Bottom Navigation Not showing original color

Question

I have designed a bottom navigation view for my application. The idea is simple, green colored bottom bar will have white colored icons. I wrote a selector for this

<?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">

     <item android:state_checked="false" android:color="@android:color/white" />
     <item android:color="@android:color/holo_blue_dark"  />
  </selector>

And it works, it changes the icon colors, but it does not make it completely white, the color looks gray-ish. I have also tried the <item android:state_selected="true" android:color="@android:color/white" /> but it also doesn't work. I have added the images below for you to see the difference.

Please help

score 5 · Answer 1 · answered Jul 22 '20 at 11:50

5

If you want your icon to have same default color use this in your activiy.

bottomNavigation.setItemIconTintList(null);

answered Jul 22 '20 at 11:50

Ibramazin

958
10
30

score 1 · Answer 2 · answered Jul 12 '22 at 09:31

Here is what worked for me:

theme.xml

<item name="elevationOverlayEnabled">false</item>

It appears that for anything that has elevation set, there will be an overlay. In my case my BottomNavigationView had elevation manually set and thus received a dark overlay.

Kasım Özdemir · Answer 3 · 2020-04-29T13:10:21.240

0

You should use state_selected

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_selected="true"
      android:color="@color/color1" />
   <item android:color="@color/color2" />
</selector>

app:itemIconTint="@color/navigate_state"

edited Apr 29 '20 at 13:10

answered Apr 29 '20 at 13:04

Kasım Özdemir

5,414
3
18
35

1

check my complete question. I have mentioned that I tries this as well. No luck – The Bat Apr 29 '20 at 13:05
i have already used selector. Where is the your selector. i saw your question. – Kasım Özdemir Apr 29 '20 at 13:06
Selector have to be in color folder. – Kasım Özdemir Apr 29 '20 at 13:08
I know, it in colors folder only. If it was error in the selector, then it would not work at all. Currently it is showing dull color – The Bat Apr 29 '20 at 13:10
So you check your BottomNavigationView. Do you use any styles? – Kasım Özdemir Apr 29 '20 at 13:17

score 0 · Answer 4 · answered Apr 29 '20 at 13:13

0

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@android:color/holo_blue_dark" />
    <item android:color="@android:color/darker_gray"  />
</selector>

and kind of

add it on android.support.design.widget.BottomNavigationView app:itemIconTint="@drawable/nav_item_color_state" app:itemTextColor="@drawable/nav_item_color_state"

answered Apr 29 '20 at 13:13

hemen

1,460
2
16
35

I did.. it is not working. You can see that it is changing the color to white, but the white is not at all crisp. It looks like an overlay. – The Bat Apr 30 '20 at 11:08

score 0 · Answer 5 · answered Apr 29 '20 at 13:18

If you using BottomNavigationView from com.google.android.material, you should specified colors especially for icon and text, for example:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background"
        app:itemIconTint="@color/bottom_bar_icon_tint"
        app:itemTextColor="@color/bottom_bar_icon_tint"
        app:menu="@menu/navigation_menu" />

and bottom_bar_icon_tint.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/white" />
    <item android:color="@color/cool_grey"  />
</selector>

also pay attention to: android:state_checked="true"

I did.. it is not working. You can see that it is changing the color to white, but the white is not at all crisp. It looks like an overlay. — The Bat, Apr 30 '20 at 11:08
what happens if you change that white color to another color? try some own color from `colors.xml` not from android resources. — lbasek, Apr 30 '20 at 13:39

score 0 · Answer 6 · answered Jan 07 '21 at 10:03

Your xml files seems to have an alpha channel/transparency

You need to change the "android:alpha" parameter to "1.0" or remove it in your icon.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="@color/white"
android:alpha="0.8">

<path
  android:fillColor="@color/white"
  android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM6.5,17.5l7.51,-3.49L17.5,6.5 9.99,9.99 6.5,17.5zM12,10.9c0.61,0 1.1,0.49 1.1,1.1s-0.49,1.1 -1.1,1.1 -1.1,-0.49 -1.1,-1.1 0.49,-1.1 1.1,-1.1z"/>

Bottom Navigation Not showing original color

6 Answers6