Search code examples
javaandroidcolorsmaterial-designthemes

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

Solution

  • 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.