CODEWITHSUNDEEP
androidandroid-xmlandroid-bottomnavandroid-bottomnavigationview
The Bat
The Bat

Reputation: 1115

Bottom Navigation Not showing original color

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.

Image

Please help

Upvotes: 1

Views: 2911

Answers (6)

Lara
Lara

Reputation: 11

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.

Upvotes: 1

tmagomedk
tmagomedk

Reputation: 1

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"/>

Upvotes: 0

Ibramazin
Ibramazin

Reputation: 1018

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

bottomNavigation.setItemIconTintList(null);

Upvotes: 7

lbasek
lbasek

Reputation: 419

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"

Upvotes: 0

hemen
hemen

Reputation: 1490

<?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"

Upvotes: 0

Kasım &#214;zdemir
Kasım &#214;zdemir

Reputation: 5634

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"

Upvotes: 0

Related Questions