alex
alex

Reputation: 5721

How to change system navigation bar color

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

Upvotes: 73

Views: 96816

Answers (10)

Dr. Failov
Dr. Failov

Reputation: 337

Based on answer here I finally come to this solution to make buttons light or dark.

    public static void setNavBarForeground(boolean light, Activity activity, View view){
    try {
        if (!light) {//make buttons dark to be more visible
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.R) {
                WindowInsetsController windowInsetController = activity.getWindow().getInsetsController();
                if (windowInsetController != null)
                    windowInsetController.setSystemBarsAppearance(WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS, WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);
            }
        } else { //make buttons light to be more visible
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.R) {
                WindowInsetsController windowInsetController = activity.getWindow().getInsetsController();
                if (windowInsetController != null)
                    windowInsetController.setSystemBarsAppearance(0, WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                view.setSystemUiVisibility(0);
            }
        }
    }
    catch (Exception e){
        Logger.log(e);
    }
}

Upvotes: 0

Mahbubur Rahman Khan
Mahbubur Rahman Khan

Reputation: 415

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

Upvotes: 3

Rahul
Rahul

Reputation: 3349

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>

Upvotes: 17

S.M Rokon Uddin Shawon
S.M Rokon Uddin Shawon

Reputation: 349

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

Upvotes: 7

Huseyin
Huseyin

Reputation: 567

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>

Upvotes: 19

conrad wawire
conrad wawire

Reputation: 294

 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  

Upvotes: 3

wrozwad
wrozwad

Reputation: 2737

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.

Upvotes: 5

EyesClear
EyesClear

Reputation: 28407

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.

Upvotes: 59

Roadies
Roadies

Reputation: 3329

Use this in your Activity.

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

Upvotes: 38

Pierfrancesco Soffritti
Pierfrancesco Soffritti

Reputation: 1738

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

Upvotes: 6

Related Questions