68

In guidelines of Android 5.0, the navigation bar seems customizable: http://www.google.com/design/spec/layout/structure.html#structure-system-bars

How can I change the navigation bar color? I would like to use a white style.

Screenshots: enter image description here enter image description here enter image description here enter image description here


Edit: In my resources, I tested the style:

<item name="android:navigationBarColor" tools:targetApi="21">@android:color/white</item>

But the buttons are white. I would like the same renderer as the second image.

enter image description here

1
  • 5
    Maybe the question has evolved to a different question: How do I customize the color of the navigation bar buttons?
    – Bart Burg
    Dec 9, 2015 at 15:07

9 Answers 9

55

Starting from API 27, it is now possible to use the light style of the navigation bar:

<item name="android:navigationBarColor">@android:color/white</item>
<item name="android:windowLightNavigationBar">true</item>

From the documentation:

windowLightNavigationBar

If set, the navigation bar will be drawn such that it is compatible with a light navigation bar background.

For this to take effect, the window must be drawing the system bar backgrounds with windowDrawsSystemBarBackgrounds and the navigation bar must not have been requested to be translucent with windowTranslucentNavigation. Corresponds to setting SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR on the decor view.

5
  • 1
    Unfortunately, it requires minimum API level 28 Sep 11, 2018 at 5:28
  • 1
    @AhamadullahSaikat It requires a minimum API level of 27 Sep 13, 2018 at 0:57
  • 5
    Doesn't work on Pixel 2 XL with Android 9 (API 28). I have these exact two lines in my values-v27/styles.xml, and the navigation bar changes color correctly, but it doesn't honor the second part - even though I have the android:windowLightNavigationBar property set to true, it still shows white buttons on light background. Oct 3, 2018 at 9:42
  • 1
    @VratislavJindra I need a solution for this case. Do you have any solution?
    – zakjma
    Sep 23, 2019 at 10:17
  • @zakjma have you found any solution? May 10, 2021 at 12:46
33

Use this in your Activity.

 if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getWindow().setNavigationBarColor(getResources().getColor(R.color.green));
    }
1
  • 12
    what about setNavigationBarColor(Color.WHITE) ? icon color is still white.
    – zakjma
    Sep 21, 2019 at 8:14
18

add this line in your v-21/style

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/black</item>
</style>

0
15

This code changes the navigation bar color according to your screen background color:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setNavigationBarColor(ContextCompat.getColor(this, R.color.any_color));
        }

You can also use the light style for the navigation bar:

<item name="android:navigationBarColor">@android:color/white</item>
7
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getWindow().setNavigationBarColor(getResources().getColor(R.color.colorWhite));
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR); //For setting material color into black of the navigation bar
    }

Use this one if your app's API level is greater than 23

getWindow().setNavigationBarColor(ContextCompat.getColor(MainActivity.this, R.color.colorWhite));
        getWindow().getDecorView().setSystemUiVisibility(SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);

May this code will not work for API level 30. Because " SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR" is deprecated in API level 30. Check this out: https://developer.android.com/reference/android/view/View#SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR

6

the navigation bar is not supposed to be colored

When you customize the navigation and status bars, either make them both transparent or modify only the status bar. The navigation bar should remain black in all other cases.

(source https://developer.android.com/training/material/theme.html )

BUT, you can use this library to achieve what you want :) https://github.com/jgilfelt/SystemBarTint

2
  • 1
    Thank you for your help, I edited my question with the attribute android:navigationBarColor but I don't want to use library.
    – alex
    Dec 7, 2014 at 22:44
  • 10
    YouTube official app changes black backrgound of navigation bar to white. Google creates a lot of rules but doesn't always implement them in own apps
    – user25
    Feb 28, 2019 at 15:19
3

You can also set light system navigation bar in API 26 programmatically:

View.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);

Where View coluld be findViewById(android.R.id.content).

However remember that:

For this to take effect, the window must request FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS but not FLAG_TRANSLUCENT_NAVIGATION.

See documentation.

3
 getWindow().setNavigationBarColor(ContextCompat.getColor(MainActivity.this,R.color.colorPrimary)); //setting bar color   
 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); //additional setting items to be black if using white ui  
2

Old question. But at this time we have a direct solution. May be helpful for someone.

public static void setNavigationBarColor(Activity activity, int color, int divColor) {
    Window window= activity.getWindow();
    window.setNavigationBarColor(color);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        window.setNavigationBarDividerColor(divColor);
    }
}

View Official Documentation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.