Use Material 3 insets

Stay organized with collections Save and categorize content based on your preferences.

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:

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