What is the best way to deal with the circled bar ...

# compose

[James Black]

What is the best way to deal with the circled bar at the bottom of the image? Right now I am doing this, but it feels wrong as I am adding 25 dp to the height. If I use fillMaxHeight then the pink bar goes behind the circled section.

val configuration = LocalConfiguration.current

val screenHeight = configuration.screenHeightDp.dp
MyApplicationTheme {
    Surface(
        modifier = Modifier
            .height(screenHeight + 25.dp),

[Mark Murphy]

That is referred to as the navigation bar. Content appears above it by default. Somewhere (e.g., XML theme resource), you asked to have your content go behind the navigation bar. If that is not what you want, perhaps consider revising your current implementation to not opt into that "edge-to-edge" experience. Or use insets to dynamically compute the space to set aside for the navigation bar. Or hide the system bars in immersive mode.

[Abhimanyu]

Use Modifier.navigationBarsPadding()

For reference
https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Mo[…].navigationBarsPadding()

[efemoney]

Because if you dont need scaffold you shouldnt use it.

[James Black]

@efemoney I am curious when a scaffold isn't needed. I am using one in my app because I like the FAB, have bottom navigation and an Top bar, so it makes life easier. I am just curious unless you don't need these components then I can see where it wouldn't benefit.