In material 3 in edgeToEdge I'm having trouble getting the system bottom navigation bar color to be ...

# compose

[Chris Johnson]

In material 3 in edgeToEdge I'm having trouble getting the system bottom navigation bar color to be fully transparent. I'm using material 3 components such as NavigationBar and NavigationBarItem and it seems there's some color being applied to it so even going edgeToEdge doesn't seem to work. Code && pictures in 🧵

[Chris Johnson]

I've tried setting the navigation bar's color manually in my compose theme but that also doesn't seem to work. It's also strange because the NavigationBar composable does take up the correct size with navigationBarPadding applied as shown by the 2nd image. And if the system navigation bar was truly transparent it should be the same color as my navigation bar composable.

Worth mentioning if I use the TopAppBar composable from material 3, the status bar works perfectly with EdgeToEdge enabled

I'm on compose BOM 2024.03.00 which should be the latest m3 library.

[Stylianos Gakis]

Which API level is it?
I think in some API levels, the 3 button nav bar in particular can never be transparent. The gesture nav can.
What does your code look like exactly for this?

[Chris Johnson]

On an emulator with api 32 atm. But even with gestures turned on it still doesn't appear to be transparent. I can't paste everything, but basically...

Column {
   DestinationNavHost(modifier = Modifier.weight(1f)) {}
   NavigationBar(
        modifier = modifier,
        containerColor = bottomBarContainerColor,
    ) {
        NavigationBarItem(selected = true, onClick = {}, icon = {}, label = { Text(text = "HA")})
        NavigationBarItem(selected = true, onClick = {}, icon = {}, label = { Text(text = "HA")})
        NavigationBarItem(selected = true, onClick = {}, icon = { , label = { Text(text = "HA")})
}
}

And my theme:

SideEffect {
    val window = activity.window
    WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
}
MaterialTheme(
    colorScheme = colorScheme,
    content = content
)

[Chris Johnson]

Screen Shot 2024-05-17 at 1.28.03 PM.png

[Stylianos Gakis]

Can you use edgeToEdge() instead of doing stuff on WindowCompat?
Here's what we do btw https://github.com/HedvigInsurance/android/blob/fd9c40275e2741c432204222d978b7d7ef[…]/app/app/src/main/kotlin/com/hedvig/android/app/ui/HedvigApp.kt

[Alex Styl]

@Chris Johnson you might have to set <item name="android:enforceNavigationBarContrast">false</item> in your xml theme

[Stylianos Gakis]

FWIW we don't have that in our XML style and we got a transparent nav bar. At least on Android 14 which I got on my hands right now and I just tested.

[Chris Johnson]

Kind of embarassed I had it for a second (might've been a fluke) but now I can't get back lol.

<item name="android:enforceNavigationBarContrast">false</item>

probably won't work because we support <29 but I'm gonna keep playing with it.
👀 looking at your app again Stylianos 😄

[Stylianos Gakis]

So did you try with enableEdgeToEdge?
I think when I migrated to that is when I managed to get rid of a bunch of leftover styles and whatever.

Now our style is just basically nothing https://github.com/HedvigInsurance/android/blob/fd9c40275e2741c432204222d978b7d7efd7d446/app/app/src/main/res/values/themes.xml#L3-L6 + https://github.com/HedvigInsurance/android/blob/fd9c40275e2741c432204222d978b7d7efd7d446/app/app/src/main/res/values-night/themes.xml#L3

The only thing left is smth for the splash screen

[Chris Johnson]

Yeah I had enableEdgeToEdge in our onCreate of our main activity before the super call. It does work

[Chris Johnson]

just not the bottom bar for some reason

[Stylianos Gakis]

How are you calling it exactly?
If you call it with SystemBarStyle.auto it will try to be smart about some contrast or whatever.
Which is exactly why I do explicitly .dark and .light

[Stylianos Gakis]

https://issuetracker.google.com/issues/326819671#comment2
For reference

[Chris Johnson]

We weren't using either just calling it plain enableEdgeToEdge()

[Stylianos Gakis]

Yeah that won't make it transparent then by default
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:activity[…]nableEdgeToEdge&amp;ss=androidx%2Fplatform%2Fframeworks%2Fsupport

[Chris Johnson]

mind blown I think I figured out why it's been so fickle. You're the best rubber duck ❤️ . I was also adding window insets padding for bottom sheets. Also, yeah, I don't think you can call enableEdgeToEdge with Auto and get the effect we want. I think we want exactly what you have which means re-applying it when the theme changes back to transparent. Thanks for saving me a ton of time!

[Stylianos Gakis]

Yup, that's why we're also doing the raw enableEdgeToEdge() before onCreate and before we know anything about the theme, and have the side effect too when we do in fact know about the theme selection.
In practice for us while those are being evaluated we are still showing the splash screen so when the app shows the right thing is already applied. Hence the xml stuff only needs to be added on the splash theme instead.

And of course, always happy to help 😊