https://kotlinlang.org logo
Join Slack
Powered by
In material 3 in edgeToEdge I'm having trouble get...
# compose
c
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 🧵
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.
s
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?
c
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...
Copy code
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:
Copy code
SideEffect {
    val window = activity.window
    WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
}
MaterialTheme(
    colorScheme = colorScheme,
    content = content
)
Screen Shot 2024-05-17 at 1.28.03 PM.png
s
a
@Chris Johnson you might have to set 
<item name="android:enforceNavigationBarContrast">false</item>
in your xml theme
s
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.
c
Kind of embarassed I had it for a second (might've been a fluke) but now I can't get back lol.
Copy code
<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 😄
🌟 1
s
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
c
Yeah I had enableEdgeToEdge in our onCreate of our main activity before the super call. It does work
just not the bottom bar for some reason
s
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
c
We weren't using either just calling it plain 
enableEdgeToEdge()
s
c
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!
s
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 😊
11 Views
Open in Slack
PreviousNext
Powered by