How to change inactive color on bottom navigation?

Haryanto picture Haryanto · Aug 6, 2016 · Viewed 28.7k times · Source

I can't change inactive color on my bottom navigation

enter image description here

and this my xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/home_item"
    android:icon="@drawable/ic_home"
    android:color="#FFFFFF"
    android:tint="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:title="Home"
    />
<item
    android:id="@+id/setting_item"
    android:icon="@drawable/ic_setting"
    android:color="#FFFFFF"
    android:tint="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:title="Setting"
    />

and this my java

bottomBar.getBar().setBackgroundColor(getResources().getColor(R.color.bottom_tabs));
bottomBar.setActiveTabColor("#FFFFFE");

anyone can help?

Answer

chrisli picture chrisli · Feb 20, 2017

If you are using the BottomNavigationView, the solution could be easy. You just need to create a selector as a ColorStateList, then assign the selector to the "itemIconTint" attribute of the BottomNavigationView.

For example:

Create file inside drawable

bottom_nav_icon_color_selector.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="@android:color/white" />
    <item android:state_pressed="true" android:state_enabled="true" android:color="@android:color/white" />
    <item android:color="@color/InactiveBottomNavIconColor" />
</selector>

BotttomNavigationview.xml

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavMainMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/BottomNavBarColor"
        app:itemIconTint="@drawable/bottom_nav_icon_color_selector"
        app:itemTextColor="@drawable/bottom_nav_icon_color_selector"
        app:menu="@menu/bottom_navigation_menu" />