Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Unable to change bottom nav icon tint

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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));
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading