Unable to change bottom nav icon tint

Question

im trying to implement icon tint to the bottom nav , but it seems not to work for some reason,

i have added hard coded #color code and also added it into colors.xml and also made a selector for that instance none of them are working, but if i check the text color for the bottom nav , then its set to the required color

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_margin="20dp"
    android:layout_marginEnd="30dp"
    android:background="@drawable/border">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_navigation_style"
        app:itemIconSize="30dp"
        app:itemIconTint="@color/buttonBorder"
        app:itemTextColor="@color/buttonBorder"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav_menu" />

</RelativeLayout>

and here is the colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="buttonColor">#FFFDF6</color>
    <color name="buttonBorder">#100F15</color>
</resources>

selector for the color

<?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/buttonBorder" />
    <item android:state_checked="false" android:color="@color/buttonBorder"  />
</selector>

selector for one of the icon switching for menu

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/outline_dashboard_24" android:state_checked="false" />
    <item android:drawable="@drawable/baseline_dashboard_24" android:state_checked="true" />

</selector>

and finally the menu itslef

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/dashboard"
        android:icon="@drawable/selector_main"
        android:title="Buttons" />
    <item
        android:id="@+id/add_icon"
        android:icon="@drawable/selector_requestbtn"
        android:title="Request Button" />
    <item
        android:id="@+id/favourite_icon"
        android:icon="@drawable/selector_favourite"
        android:title="Favourite" />


</menu>

I thought that maybe i will not need the selector for the icon color tint because i have selector for the icons itself for the switching icon from filled to outline with the same color that i have mentioned above, but that didn't seem to work that's the reason i also tried icontint but doesn't seems to work for me

Answer 1

In your color selector file, you have defined the same color (@color/buttonBorder) for both checked and unchecked states. This means the color of the icons will not change when their state changes. If you want different colors for different states, you should specify different colors for each state in your color selector file.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/colorWhenChecked" />
<item android:state_checked="false" android:color="@color/colorWhenUnchecked" />
</selector>

If you’re still facing issues, it might be helpful to check if there are any overriding styles in your theme that might be affecting the BottomNavigationView

In this line of code, replace yourColor with the actual color value you want to use.

bottomNavigationView.setItemIconTintList(ColorStateList.valueOf(yourColor));