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.

Jan Bína · Accepted Answer · 2022-11-17T22:11:19.883

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

score 8 · Answer 2 · answered Jan 09 '23 at 20:40

8

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.

answered Jan 09 '23 at 20:40

DAA

1,346
2
11
19

worked great for me, thanks. However, how do you know that `NavigationBar` is Level 2? Where is this documented by google? – stefan.at.kotlin Apr 15 '23 at 22:24
1

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. – DAA Apr 16 '23 at 07:52
1

thank you, like the technical way :-) Meanwhile I also found documentation: https://m3.material.io/styles/elevation/tokens#df721a00-888e-4c5e-bfe1-5d905f167aaa – stefan.at.kotlin Apr 16 '23 at 10:37

score 5 · Answer 3 · answered Jun 27 '22 at 17:23

5

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()

answered Jun 27 '22 at 17:23

Patrick Lang

501
6
9

1

Thank you! This is a really helpful answer on simulating tonal elevation for the navigation bar. – Arthur Khazbs Aug 15 '22 at 15:56

score 4 · Answer 4 · answered Nov 24 '22 at 17:29

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

score 1 · Answer 5 · answered Sep 15 '22 at 15:26

1

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
) {
  ...
}

answered Sep 15 '22 at 15:26

Ronald Díaz

11
1

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

5 Answers5