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. Need help please. Thanks in advance.

enter image description here

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>
  • can you post the style.xml file? Not the whole thing. Just related snippets – Blackbelt Jan 8 '15 at 11:32
up vote 138 down vote accepted

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.

  • Thank you. I added to my styles code <item name="android:navigationBarColor">@color/MyColor</item> and now works. – user3065901 Jan 8 '15 at 11:49
  • 11
    Is there a way to change to color of the icons too? – Jamsheed Kamarudeen Feb 23 '15 at 17:44
  • 7
    <item name="android:navigationBarColor">@color/theme_color</item> add in values-21 folder – Pratik Butani May 23 '15 at 17:37
  • @PratikButani +1 for adding the XML approach. Perhaps you should consider posting this as an answer as well. – Fernanda Bari Jul 15 '15 at 10:54
  • @FelipeBari I have added :) you can +1 :) – Pratik Butani Jul 15 '15 at 11:35

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>
  • 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... – JohnyTex Aug 13 at 13:45

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)

  • I wasn't able to use tools:targetApi? Is this functionality outdated? – winklerrr Apr 26 '17 at 15:47
  • 1
    @winklerrr It's not outdated, see my updated answer. – D_Alpha Apr 28 '17 at 5:22
  • 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? – winklerrr Apr 28 '17 at 6:37
  • 1
    You need to do this in each Activity or you can make different style for different activity. – D_Alpha Apr 28 '17 at 11:38
  • No need to override styles.xml while using tools:targetApi – ҒάгՏҺαԃ ッ Nov 8 '17 at 6:26

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

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

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.

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.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.