Hello, I'm creating an app with CMP, and ModalBottomSheet appear below the navigation bar. I tried e...

# compose-android

[Raphael TEYSSANDIER]

Hello, I'm creating an app with CMP, and ModalBottomSheet appear below the navigation bar. I tried enableEdgeToEdge with safeContentPadding(). With setDecorFitsSystemWindows false too. Any idea how to fix this ?

[Stylianos Gakis]

Do you have adjustResize on your manifest?
And what insets do you provide to your modal bottom sheet? Are you perhaps always padding it at the bottom there?

Perhaps a screenshot of the problem would also help

[Raphael TEYSSANDIER]

Yes for adjustResize , for the BottomSheet I tried navigationBars.only(Bottom)

[Raphael TEYSSANDIER]

image.png

[Hugo Bernardi]

Maybe try this :

enableEdgeToEdge(navigationBarStyle = SystemBarStyle.light(android.graphics.Color.TRANSPARENT, android.graphics.Color.TRANSPARENT))
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) window.isNavigationBarContrastEnforced = false

light is important here, according to the doc of auto :

Creates a new instance of [SystemBarStyle]. This style detects the dark mode
* automatically and applies the recommended style for each of the status bar and the
* navigation bar. If this style doesn't work for your app, consider using either [dark] or
* [light].
* - On API level 29 and above, both the status bar and the navigation bar will be
*   transparent. However, the navigation bar with 3 or 2 buttons will have a translucent
*   scrim. This scrim color is provided by the platform and *cannot be customized*.
* - On API level 28 and below, the status bar will be transparent, and the navigation bar
*   will have one of the specified scrim colors depending on the dark mode.

[Raphael TEYSSANDIER]

It will still be below ?

[Stylianos Gakis]

The screenshot does not necessarily show if the sheet is over the nav bar or if it's under it but the bar itself is just not transparent.

Also when using SystemBarStyle.auto() it does some stuff around the contrast which I remember I found not obvious.

Instead I've done this now

@Composable
private fun EnableEdgeToEdgeSideEffect(
  darkTheme: Boolean,
) {
  DisposableEffect(darkTheme) {
    val systemBarStyle = when (darkTheme) {
      true -> SystemBarStyle.dark(Color.TRANSPARENT)
      false -> SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT)
    }
    enableEdgeToEdge(
      statusBarStyle = systemBarStyle,
      navigationBarStyle = systemBarStyle,
    )
    onDispose {}
  }
}

Which explicitly uses the .dark or .light version depending on if you are in dark or light mode, and this makes the nav bar truly transparent.
This way you also don't need to change the window.isNavigationBarContrastEnforced or anything like that

[Alex Vanyo]

Which version of material3 are you using for the ModalBottomSheet?

[Raphael TEYSSANDIER]

1.7.0-alpha02, but it's actually working