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?

Solution 1

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

Solution 2

This should get pretty straightforward starting from Android O. SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR

Solution 3

add this in your Application's BaseTheme

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

Solution 4

From Oreo+ use:

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

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

Solution 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)
    .....
}

View more solutions

Comments

[lopez.mikhael]

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

[Mansoor V.M]

How about pre Android O ? is it possible ?

[patrick.elmquist]

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

[Mygod]

For XML light navigation bar use: android:windowLightNavigationBar

[Oliver Dixon]

The icons go white and you cannot see them anymore.

[Bert Wijnants]

@OliverDixon The icons will get a dark color when applying decorView.setSystemUiVisibility(FLAG_DRAWS_SYSTEM_BAR_BACKGR‌​OUNDS | SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR)

[Akash Ratanpara]

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

[Admin]

@patrick.elmquist 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.

[Amy]

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.