Light Navigation Bar

Question

I want to change the color of the navigation bar from black (w/ white icons) to white (w/ black icons).

Desired result (as seen in uCrop) :

I know how to change the status bar color via android:windowLightStatusBar.

Is there a similar property for the navigation bar?

Devaney

Here is a duplicate question for that: https://mcmap.net/q/239809/-change-navigation-bar-icon-color-on-android/1973391. Did you run uCrop on Nougat device? For me it doesn't work so above black icons seem being just photoshop graphic :/ – Lobate

Answer 1

For API 27+, you can do this via styles:

<!-- added in API 27 -->
<item name="android:windowLightNavigationBar">true</item>

<!-- required to contrast the dark buttons -->
<item name="android:navigationBarColor">@android:color/white</item>

<!-- optional -->
<item name="android:navigationBarDividerColor">@android:color/black</item>

While the XML attribute was introduced in API 27, the support for a light navigation bar was introduced one version earlier, in API 26, via SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.

Therefore, to target the earliest devices that support it, you'll have do it via code, rather than XML styles.

Morphophoneme

I would like to suggest #E0E0E0 (gray 300) as a good color for "android:navigationBarDividerColor" – Shirk

Answer 2

You can control the Navigation Bar background color in v26/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        ...
        <item name="android:navigationBarColor">@android:color/white</item>
    </style>
</resources>

For the color of the buttons in the Navigation Bar to match with a light background, you will need to set 2 flags on the acitivity's DecorView.

In your Activity:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    View decorView = getWindow().getDecorView();
    decorView.setSystemUiVisibility(FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS | 
                                    SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);
}

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

See: https://developer.android.com/.../View#SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR

Winna

The icons go white and you cannot see them anymore. – Conto

@OliverDixon The icons will get a dark color when applying decorView.setSystemUiVisibility(FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS | SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR) – Winna

By using this status bar icons go white. So how to set both light? – Chlor

Answer 3

This should get pretty straightforward starting from Android O. SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR

Precursory

How about pre Android O ? is it possible ? – Styles

Nope it's not possible < API 26 and also for some reason the XML/Theme attribute for Light navigation bar is not available until API 27 – Decretory

For XML light navigation bar use: android:windowLightNavigationBar – Leninist

@Decretory Gotta love it.. pretty much makes the attribute useless if you're targeting <27, especially if you're looking to set up a light status bar concurrently. – Morphophoneme

Answer 4

add this in your Application's BaseTheme

<item name="android:navigationBarColor">@color/yourNavigationColor</item>

Theatrics

In this case I only changes the background color and not the icons color. – Devaney

Answer 5

I use this kotlin extension functions in all my Activities. Just copy this functions some where in your project, and use them any time you need to change statusBar color or navBar color or change light/dark statusBar or change light/dark navBar if it is possible.

fun AppCompatActivity.setStatusBarColor(color: Int)
{
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
    window.setStatusBarColor(color)
}

fun AppCompatActivity.setStatusLightDark(is_light: Boolean)
{
    if (Build.VERSION.SDK_INT < 23)
    {
        return
    }

    var flags = window.decorView.systemUiVisibility
    if (is_light)
    {
        flags = flags and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
    }
    else
    {
        flags = flags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
    }
    window.decorView.systemUiVisibility = flags
}

fun AppCompatActivity.setNavBarColor(color: Int)
{
    window.setNavigationBarColor(color)
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P)
    {
        window.setNavigationBarDividerColor(color)
    }
}

fun AppCompatActivity.setNavBarLightDark(is_light: Boolean)
{
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O)
    {
        return
    }

    var flags = window.decorView.systemUiVisibility
    if (is_light)
    {
        flags = flags and View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()
    }
    else
    {
        flags = flags or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
    }
    window.decorView.systemUiVisibility = flags
}

Usage:

override fun onCreate(savedInstanceState: Bundle?)
{
    super.onCreate(savedInstanceState)
    val color_status_bar = ContextCompat.getColor(this,R.color.yellow)
    val color_nav_bar = ContextCompat.getColor(this,R.color.red)

    this.setStatusBarColor(color_status_bar)
    this.setStatusLightDark(false)
    this.setNavBarColor(color_nav_bar)
    this.setNavBarLightDark(true)
    .....
}

Mayman

Answer 6

From Oreo+ use:

    <item name="android:windowLightNavigationBar">true</item>

Before oreo, light colors are not supported (nicely).

Cahilly

Answer 7

This is the instruction I used for doing it programmatically for API 24 (of course it will have effect from 27+) to 33, in Java (MainActivity):

WindowInsetsControllerCompat windowInsetsControllerCompat = new WindowInsetsControllerCompat(getWindow(), getWindow().getDecorView());
windowInsetsControllerCompat.setAppearanceLightNavigationBars(true);

With WindowInsetsControllerCompat you can also change easily statusbar light mode programmatically with:

windowInsetsControllerCompat.setAppearanceLightStatusBars(true);

Wittie

Answer 8

The bar is called snackbar try this:

snackBarView.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.BLACK));

Shanghai

lopez.mikhael has got the bar name right, it's called the navigation bar. The snackbar however, is different. Making your code wrong for this question. – Mete