Is there a way to have different icon/color for selected state of Android's BottomNavigationView?

Jason Fel picture Jason Fel · Jan 5, 2017 · Viewed 8k times · Source

The following is the XML for my current BottomNavigationView. Currently, all three of the icon drawables are unfilled icons with the same color. I would like be able to present a filled in version of the icon when that state is selected as well as possibly changing the color to make it obvious it is the current icon state. The following image is an example of what I mean.

Example of icon color changing for selected state

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/icon_flyer"
        android:title="Flyer"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/icon_list"
        android:title="List"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/icon_contact"
        android:title="Contact"
        app:showAsAction="ifRoom" />
</menu>

Answer

JeKa picture JeKa · Jun 27, 2017

To change the icon color by state you can set a color state drawable for the "itemIconTint" property in your BottomNavigationView. For the text color you can set the same color state drawable in the "itemTextColor" property. Here is an example of a color state drawable for the BottomNavigationView:

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

The "android:state_pressed" state is the menu item's pressed state. The "android:state_checked" is the menu item's selected state.

This only changes the color of the icons and labels in your BottomNavigationView. For filling your icon you can set an icon state drawable for the "icon" property in your menu item. Here is an example of an icon state drawable:

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