How to change system navigation bar color

Question

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

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

Maybe the question has evolved to a different question: How do I customize the color of the navigation bar buttons? — Bart Burg, Dec 09 '15 at 15:07

score 56 · Answer 1 · answered Dec 12 '17 at 14:24

56

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.

answered Dec 12 '17 at 14:24

EyesClear

28,077
7
32
43

1

Unfortunately, it requires minimum API level 28 – Ahamadullah Saikat Sep 11 '18 at 05:28
1

@AhamadullahSaikat It requires a minimum API level of 27 – AdamHurwitz Sep 13 '18 at 00:57
6

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. – Vratislav Jindra Oct 03 '18 at 09:42
1

@VratislavJindra I need a solution for this case. Do you have any solution? – zakjma Sep 23 '19 at 10:17
@zakjma have you found any solution? – Vivek Makwana May 10 '21 at 12:46

score 36 · Answer 2 · answered Jul 14 '15 at 11:58

36

Use this in your Activity.

 if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getWindow().setNavigationBarColor(getResources().getColor(R.color.green));
    }

answered Jul 14 '15 at 11:58

Roadies

3,309
2
30
46

13

what about setNavigationBarColor(Color.WHITE) ? icon color is still white. – zakjma Sep 21 '19 at 08:14

score 19 · Answer 3 · edited Mar 10 '20 at 07:20

19

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>

edited Mar 10 '20 at 07:20

Rahul

3,293
2
31
43

answered Sep 03 '16 at 14:19

Huseyin

567
6
17

score 17 · Answer 4 · edited Dec 15 '20 at 09:02

17

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>

edited Dec 15 '20 at 09:02

Amy

1,114
13
35

answered Feb 25 '19 at 08:01

Rahul

3,293
2
31
43

S.M Rokon Uddin Shawon · Answer 5 · 2020-06-21T10:43:49.193

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

score 6 · Answer 6 · answered Dec 07 '14 at 22:20

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

answered Dec 07 '14 at 22:20

Pierfrancesco Soffritti

1,678
1
18
22

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 07 '14 at 22:44
11

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 '19 at 15:19

score 4 · Answer 7 · answered Jun 13 '18 at 12:01

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.

score 3 · Answer 8 · answered Feb 02 '20 at 15:13

 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

score 2 · Answer 9 · answered Jul 28 '21 at 19:56

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

How to change system navigation bar color

9 Answers9

Linked

Related