CODEWITHSUNDEEP
androidandroid-jetpack-composenavigationbarandroid-jetpack-compose-material3material-you
Renattele Renattele
Renattele Renattele

Reputation: 2286

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

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

Upvotes: 11

Views: 9115

Answers (5)

DAA
DAA

Reputation: 1386

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.

Upvotes: 10

Pitos
Pitos

Reputation: 867

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

Upvotes: 9

Jan Bína
Jan Bína

Reputation: 7248

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

Upvotes: 22

Ronald Díaz
Ronald Díaz

Reputation: 21

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

Upvotes: 2

Patrick Lang
Patrick Lang

Reputation: 751

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

Upvotes: 6

Related Questions