Android lollipop change navigation bar color

Question

In my app I need to change the bottom navigation bar color. I watched many post but cant find with the solution. I am using appCompat library.

v21/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
       <item name="android:windowBackground">@drawable/bgpreview</item>
       <item name="android:colorPrimary">@color/MyColor</item>
       <item name="android:colorPrimaryDark">@color/MyColor</item>
       <item name="android:windowContentOverlay">@null</item>
       <item name="android:textColorPrimary">@color/MyColor</item>
       <item name="colorAccent">@color/MyColor</item>
       <!-- darker variant for the status bar and contextual app bars -->
       <item name="android:windowContentTransitions">true</item>
       <item name="android:windowAllowEnterTransitionOverlap">true</item>
       <item name="android:windowAllowReturnTransitionOverlap">true</item>
       <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
       <item name="android:windowSharedElementExitTransition">@android:transition/move</item>

       <item name="windowActionBar">false</item>
       <item name="android:textAllCaps">false</item>

</style>

Armington

can you post the style.xml file? Not the whole thing. Just related snippets – Wandawander

How can I set back the default color? – Merow

Answer 1

It can be done inside styles.xml using

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

or

window.setNavigationBarColor(@ColorInt int color)

http://developer.android.com/reference/android/view/Window.html#setNavigationBarColor(int)

Note that the method was introduced in Android Lollipop and won't work on API version < 21.

The second method (works on KitKat) is to set windowTranslucentNavigation to true in the manifest and place a colored view beneath the navigation bar.

Brushwood

Is there a way to change to color of the icons too? – Charlottecharlottenburg

<item name="android:navigationBarColor">@color/theme_color</item> add in values-21 folder – Blend

Also make sure that (Target Android Version) is set to at least API 21 – Gawain

Don't put this in your style file <item name="android:windowDrawsSystemBarBackgrounds">false</item> Otherwise system bar coloring won't work. – Poland

how to set image in bottom bar ? – Chili

Thanks it changed but how to navigation buttons color @pankaj – Feld

How can I set back the default color? – Merow

@JamsheedKamarudeen use <item name="android:windowLightNavigationBar">true</item> – Chine

android:navigationIcon to change the icons – Selfless

read this very carefully : developer.android.com/reference/android/view/… , don't use or remove this "<item name="android:windowIsTranslucent">true</item>" if you want set navigationBarColor. This is very very imp other it won't work. Also refer this for more info: developer.android.com/develop/ui/views/layout/edge-to-edge* – Staford

Answer 2

Here is how to do it programatically:

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

Using Compat library:

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().setNavigationBarColor(ContextCompat.getColor(this, R.color.primary));
}

Here is how to do it with xml in the values-v21/style.xml folder:

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

Hispanicism

This is a strange option! I have an app that makes the navbar black with black buttons making it impossible to see the home/back/recent soft buttons... – Biondo

Answer 3

Here are some ways to change Navigation Bar color.

By the XML

1- values-v21/style.xml

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

Or if you want to do it only using the values/ folder then-

2- values/style.xml

<resources xmlns:tools="http://schemas.android.com/tools">

<item name="android:navigationBarColor" tools:targetApi="21">@color/navigationbar_color</item>

You can also change navigation bar color By Programming.

 if (Build.VERSION.SDK_INT >= 21)
    getWindow().setNavigationBarColor(getResources().getColor(R.color.navigationbar_color));

By Using Compat Library-

if (Build.VERSION.SDK_INT >= 21) {
    getWindow().setNavigationBarColor(ContextCompat.getColor(this, R.color.primary));
}

please find the link for more details- http://developer.android.com/reference/android/view/Window.html#setNavigationBarColor(int)

Arsis

I wasn't able to use tools:targetApi? Is this functionality outdated? – Cristen

@Cristen It's not outdated, see my updated answer. – Arsis

If I decide to change the color programmatically - do I need to do this in each Activity/Fragment? Or is there a certain place where I should do it? Maybe in class that extends Application? – Cristen

You need to do this in each Activity or you can make different style for different activity. – Arsis

No need to override styles.xml while using tools:targetApi – Achelous

No need to override` styles.xml` while using tools:targetApi – Achelous

Answer 4

You can add the following line in the values-v21/style.xml folder:

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

Blend

Answer 5

For people using Kotlin you can put this in your MainActivity.kt:

window.navigationBarColor = ContextCompat.getColor(this@MainActivity, R.color.yourColor)

With window being:

val window: Window = [email protected]

Or you can put this in your themes.xml or styles.xml (requires API level 21):

<item name='android:navigationBarColor'>@color/yourColor</item>

Firm

Answer 6

1. Create Black Color: <color name="blackColorPrimary">#000001</color> (not #000000)
2. Write in Style: <item name="android:navigationBarColor" tools:targetApi="lollipop">@color/blackColorPrimary</item>

Problem is that android higher version make trasparent for #000000

Uis

If you're doing everything correctly and it STILL doesn't work, this is what worked for me. It doesn't seem to be mentionned anywhere else that #000000 won't work. – Stipulate

Answer 7

Put these in your theme

themes.xml:

 <item name="android:navigationBarColor" 
tools:targetApi="21">yourcolor</item>  

Cabinda

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Congeal

Answer 8

You can also modify your theme using theme Editor by clicking :

Tools -> Android -> Theme Editor

Then, you don't even need to put some extra content in your .xml or .class files.

Prefigure

Nice tip! For me it was just under Tools -> Theme Editor. – Koziol

Now Theme Editor is gone starting with 3.3. – Koel

Answer 9

@Zielony's answer above works,

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

Also added the following based on @Alexey Ozerov's comment

true

but adding this screen shot in case anyone's new and having trouble finding styles.xml and colors.xml

Clansman

Answer 10

You can change it directly in styles.xml file \app\src\main\res\values\styles.xml

This work on older versions, I was changing it in KitKat and come here.

Chichihaerh

Answer 11

If you want to set default color of navigationBar, which depends on day or night theme, for example, after setting custom colour in one of the fragments, you need to use this:

requireActivity().window.navigationBarColor = requireContext().getColorFromAttr(android.R.attr.navigationBarColor)

Henrique