What is color of NavigationBar in Jetpack Compose in Material color scheme?

Question

When I`m trying to force NavigationBar to be MaterialTheme.colorScheme.surface color(see Material 3 Guidelines), background color of app and color of NavigationBar differs. Example: color of NavigationBar is #f1edf7 but background color is #fffbfe. Background app color is MaterialTheme.colorScheme.surface too.

Soniferous

Answer 1

There is a thing named tonalElevation in material design 3. Same "base" color is different at different tonal elevation. Surface by default has tonal elevation 0dp, which means that background color is used as is. NavigationBar has tonal elevation 3dp, which changes the color slightly. If you want to force NavigationBar to be exactly surface color, change its tonal elevation to 0.

See this: https://cs.android.com/androidx/platform/frameworks/support/+/071c483c7223af673a5c0145e2fee7b0c94af1fd:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt;l=501

Roobbie

Answer 2

The proper way to replicate the color of the NavigationBar is to use the same function used behind the scenes to calculate it:

MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp)

The default ElevationToken used for NavigationBar is Level2, equivalent to 3dp. If you set a custom different elevation for your NavigationBar, set it too in this function and the color will be the same for both.

Evante

worked great for me, thanks. However, how do you know that NavigationBar is Level 2? Where is this documented by google? – Decemvir

If you access NavigationBar code, you will see the tonalElevation default value is NavigationBarDefaults.Elevation. There, the Elevation value is NavigationBarTokens.ContainerElevation. And inside that you find the value is ElevationTokens.Level2. I don't know if it is properly documented, found it by going down the classes. – Evante

thank you, like the technical way :-) Meanwhile I also found documentation: m3.material.io/styles/elevation/… – Decemvir

Answer 3

If you want the same color e.g White in the NavigationBar try this:

Container color

NavigationBar(
        containerColor = Color.White
)

No color change on tap

NavigationBar(
        contentColor = Color.White
)

Selected/Unselected icon, selectedText, Indicator:

NavigationBarItem(
       colors = NavigationBarItemDefaults.colors(
          selectedIconColor = Color.Green,
          unselectedIconColor = Color.Gray,
          selectedTextColor = Color.Transparent,
          indicatorColor = Color.White
       )
)

You can also change the selectedIconColor and unselectedIconColor colors above to Color.Transparent and control the color in the NavigationBarItem, but you need some logic to control selected/unselected color for icon and/or label.

e.g

NavigationBarItem(
      label = {
         Text(
            text = "Tab A",
            color = Color.White // selected/unselected color logic here
         )
      },
     icon = {
       Icon(
          painter = painterResource(id = imageId),
          contentDescription = destItem.destination.route,
          tint = Color.Green // selected/unselected color logic here,
       )         
     },
 )

Visit link below for more information about the Navigation bar structure in material3 https://m3.material.io/components/navigation-bar/specs

Darien

Answer 4

Instead of changing the elevation of the navigation bar, you could also calculate the color as it would be done within the material component:

activity.window.navigationBarColor = colorScheme.primary.copy(alpha = 0.08f).compositeOver(colorScheme.surface.copy()).toArgb()

Calisa

Thank you! This is a really helpful answer on simulating tonal elevation for the navigation bar. – Rockel

Answer 5

You can directly set the NavigationBar color by using its containerColor property. Just set it to Color.Transparent to get the same color your background has.

NavigationBar(
  containerColor = Color.Transparent
) {
  ...
}

Lima