Changing bottom navigation bar icon colour?

Question

This is what my bottom navigation bar looks like at the moment:

Looks great right? Except that, right now you can see each icon clearly (or mostly clearly), however when you view it on my device you can barely make out the icons at all.

I have the following in my themes.xml at the moment:

...
<!-- Navigation bar colour. -->
<item name="android:navigationBarColor">@color/pink</item>
<item name="android:windowLightNavigationBar">false</item><!-- This does nothing -->
...

At the moment my minSdkVersion is 29 and my targetSdkVersion is 30.

How could I change the icons colour, or if that's not possible, at least have them a darker colour so they can be viewable?

What's your phone model? I think behavior may be different for different phones. Have you tried to run your code on android emulator? — Vadik Sirekanyan, Jul 28 '21 at 23:29
To make icons *darker* you should set `windowLightNavigationBar` flag to `true`, not `false`. — Vadik Sirekanyan, Jul 28 '21 at 23:42
Have you tried to run your code on other devices or emulator? It may be a device specific problem. — Vadik Sirekanyan, Jul 30 '21 at 05:17

score 0 · Answer 1 · answered Jul 28 '21 at 23:25

0

You can't change color of navigation bar icons. But you can make it dark or light. Your pink navigation bar looks pretty light. So, set windowLightNavigationBar to true:

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

answered Jul 28 '21 at 23:25

Vadik Sirekanyan

3,332
1
22
29

I've tried to do that but unfortunately it doesn't work – JamieRhys Jul 29 '21 at 07:42

score 0 · Answer 2 · answered Jul 28 '21 at 23:28

0

You could make it lighter only

answered Jul 28 '21 at 23:28

Aang 아앙

45
7

score 0 · Answer 3 · answered Aug 02 '21 at 13:52

0

Please try to this

 <item name="android:navigationBarColor">@android:color/white</item>
<item name="android:windowLightNavigationBar">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>

answered Aug 02 '21 at 13:52

Kevin Patel

51
4

score 0 · Answer 4 · answered Aug 03 '21 at 15:01

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

should be right. but you said it doens't work. So I assumed there is another theme on your activity.

So, I sugest, in your activitiy or fragment code, how about set window flag directly. try code below . It will make your icon dark

activity.window.decorView.systemUiVisibility = (
                or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
                or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR)

score 0 · Answer 5 · answered Aug 04 '21 at 17:21

You're in the themes.xml file- have you tried adding this to the styles.xml file?

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

Also, this Styles and Themes page might help you out! They have a comparison and pretty good explanations with examples. For example, you can customize the default theme that you're using like this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Changing bottom navigation bar icon colour?

5 Answers5