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.

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 08 '15 at 11:32

score 370 · Accepted Answer · edited Jun 27 '17 at 11:52

370

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.

edited Jun 27 '17 at 11:52

Pankaj Lilan

4,245
1
29
48

answered Jan 08 '15 at 11:34

Zielony

16,239
6
34
39

48

Is there a way to change to color of the icons too? – Jamsheed Kamarudeen Feb 23 '15 at 17:44
11

`@color/theme_color` add in `values-21` folder – Pratik Butani May 23 '15 at 17:37
Also make sure that (Target Android Version) is set to at least **API 21** – MujtabaFR Aug 28 '16 at 12:04
2

Don't put this in your style file `false` Otherwise system bar coloring won't work. – Alexey Ozerov Nov 25 '16 at 21:16
how to set image in bottom bar ? – Anand Savjani Apr 26 '17 at 05:42
Thanks it changed but how to navigation buttons color @pankaj – Prasad Feb 11 '19 at 13:10
How can I set back the default color? – GMX Sep 26 '19 at 09:52
6

@JamsheedKamarudeen use `true` – Peretz30 Jan 09 '20 at 11:20
android:navigationIcon to change the icons – log0 Feb 12 '21 at 09:51
read this very carefully : https://developer.android.com/reference/android/view/Window#attr_android:navigationBarColor , don't use or remove this "true" if you want set navigationBarColor. This is very very imp other it won't work. Also refer this for more info: https://developer.android.com/develop/ui/views/layout/edge-to-edge* – pravingaikwad07 Dec 25 '22 at 11:08

Bolling · Answer 2 · 2018-02-19T12:21:10.483

80

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>

edited Feb 19 '18 at 12:21

answered Apr 08 '15 at 12:22

Bolling

3,954
1
27
29

2

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 '18 at 13:45

D_Alpha · Answer 3 · 2018-02-10T18:35:40.413

42

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)

edited Feb 10 '18 at 18:35

answered Sep 04 '15 at 23:16

D_Alpha

4,039
22
36

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 05: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 06: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` – Farshad Nov 08 '17 at 06:26
No need to override` styles.xml` while using `tools:targetApi` – Farshad Nov 08 '17 at 06:27

score 10 · Answer 4 · edited Jan 11 '18 at 01:41

10

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

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

edited Jan 11 '18 at 01:41

Pang

9,564
146
81
122

answered Jul 15 '15 at 11:34

Pratik Butani

60,504
58
273
437

Amy · Answer 5 · 2020-12-10T05:52:16.210

9

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 = this@MainActivity.window

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

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

edited Dec 10 '20 at 05:52

answered Dec 10 '20 at 04:22

Amy

1,114
13
35

score 5 · Answer 6 · answered Jun 03 '19 at 07:49

5

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

Problem is that android higher version make trasparent for #000000

answered Jun 03 '19 at 07:49

Fariz Aghayev

649
5
17

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. – Matija Martic Aug 05 '20 at 17:37

score 3 · Answer 7 · edited Feb 10 '22 at 08:52

3

Put these on your theme

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

edited Feb 10 '22 at 08:52

Super Kai - Kazuya Ito

22,221
10
124
129

answered Feb 04 '22 at 22:22

Haris Khan

41
2

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](/help/how-to-answer). – Community Feb 05 '22 at 05:14

score 2 · Answer 8 · answered Jan 24 '18 at 09:52

2

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.

answered Jan 24 '18 at 09:52

Lelouch

21
1
3

Nice tip! For me it was just under Tools -> Theme Editor. – Sam Oct 31 '18 at 02:32
Now Theme Editor is gone starting with 3.3. – Jenix Mar 19 '20 at 13:26

score 2 · Answer 9 · answered Jul 15 '22 at 23:20

@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

Dawid Polakowski · Answer 10 · 2017-09-21T15:14:45.110

1

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.

edited Sep 21 '17 at 15:14

answered Sep 21 '17 at 14:26

Dawid Polakowski

35
4

score 1 · Answer 11 · answered Sep 22 '22 at 09:39

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)

Android lollipop change navigation bar color

11 Answers11

Linked

Related