Home » Android » android – Light Navigation Bar

android – Light Navigation Bar

Posted by: admin June 15, 2020 Leave a comment

Questions:

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) :

Light Navigation Bar

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

Is there a similar property for the navigation bar?

How to&Answers:

This should get pretty straightforward starting from Android O.
SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR

Answer:

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

Answer:

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.

Answer:

add this in your Application’s BaseTheme

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

Answer:

From Oreo+ use:

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

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

Answer:

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

Answer:

The bar is called snackbar try this:

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