CODEWITHSUNDEEP
javaandroidcolorsmaterial-designthemes
Sujal Kumar
Sujal Kumar

Reputation: 1164

How to set the background color of system navigation bar to the one of the new Bottom Navigation bar in Material 3? (Android)

I tried using this:

<item name="android:navigationBarColor">?attr/colorSurface</item>

but it isn't giving me the desired result.. like the one shown in the docs: enter image description here enter image description here

I recently switched to Material 3.

If you want full code of the app: https://github.com/Sujal1245/WALLisWALL-Wallpaper-App

Upvotes: 10

Views: 10703

Answers (3)

BenjyTec
BenjyTec

Reputation: 10378

I found that with API35 and EdgeToEdge, the existing answers result in the navigation bar having a slightly different color than the BottomNavigationView. Instead, what was enough in my case is to enable EdgeToEdge in the Activity like this:

@Override
protected void onCreate(final Bundle savedInstanceState) {
    EdgeToEdge.enable(
            this,
            SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT),
            SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT));
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    // ...
}

This will make the navigation bar transparent, and it will take the color of the BottomNavigationView.

Upvotes: 3

FM1024
FM1024

Reputation: 213

In addition to Nick's answer. If you are using Dynamic Coloring. Call this method after setting Dynamic Coloring. Otherwise, you will always get the same color without dynamic effects.

Code in Kotlin

DynamicColors.applyIfAvailable(this) // After this
window.navigationBarColor = SurfaceColors.SURFACE_2.getColor(this)

Thanks.

Upvotes: 6

Nick Botticelli
Nick Botticelli

Reputation: 255

There is a new class in Material Components library in version 1.5.0 (specifically 1.5.0-alpha03) and up that solves this very problem, the SurfaceColors class.

To use it, call the getColor method on one of the constant values in the SurfaceColors enum for the desired color. Here is an example:

getWindow().setNavigationBarColor(SurfaceColors.SURFACE_2.getColor(this));

SURFACE_2 is what is used (or its equivalent) by BottomNavigationView. It works with and without Dynamic Coloring (including night mode). I have also observed this solution being used in the Files by Google app.

Here is a screenshot on Android 11

And here is a screenshot on Android 12.1 with Dynamic Coloring

If you're also curious about the exact shadow used by Google for the BottomNavigationView, it is a 5dp tall gradient drawable from #00000000 to #33333333.

Upvotes: 12

Related Questions