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

user_15061682 0
Viewed 769

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.

NavigationBar

material-you navigationbar android-jetpack-compose
3 Answers

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/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt;l=460?q=surfaceColorAtElevation&sq=

user_28019380

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

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