Use Material 3 insets

For ease of use, many of the built-in Material 3 composables (androidx.compose.material3) handle insets themselves, based on how the composables are placed in your app according to the Material specifications.

Inset handling composables

The following is a list of the Material Components that automatically handle insets.

App bars

• TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: Applies the top and horizontal sides of the system bars as padding since it is used at the top of the window.
• BottomAppBar: Applies the bottom and horizontal sides of the system bars as padding.

Content containers

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (content inside a modal navigation drawer): Applies vertical and start insets to content.
• ModalBottomSheet: Applies the bottom insets.
• NavigationBar : Applies the bottom and horizontal insets.
• NavigationRail: Applies the vertical and start insets.

Scaffold

By default, Scaffold provides insets as parameter PaddingValues for you to consume and use. Scaffold does not apply the insets to content; this responsibility is yours. For example, to consume these insets with a LazyColumn inside a Scaffold:

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

The following video shows a LazyColumn within a Scaffold with edge-to-edge display disabled and enabled:

Using the PaddingValues parameter in Scaffold is generally enough to inset your UI away from the system UI and display cutouts. Avoid using additional inset handling approaches like rulers, padding modifiers, or inset size modifiers if using Scaffold to avoid applying too much padding to your UI.

Override default insets

You can change the windowInsets parameter passed to the composable to configure the composable's behavior. This parameter can be a different type of window inset to apply instead, or disabled by passing an empty instance: WindowInsets(0, 0, 0, 0).

For example, to disable the inset handling on LargeTopAppBar, set the windowInsets parameter to an empty instance:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt