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

Question

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.

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

You can set a StateDrawable to your menuitem. Create an xml file in your drawable folder with the following code:

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

Update the xml file that it fits your needs (state and drawable) and reference it in your menuitem instead of your current icon.

Answer 2

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>

Answer 3

Step 1: add all the icons to your drawable folders

Step 2: create new drawable resource file for each icon. In the file named "bottom_navigation_icon" (for example), specify selectors. The default icon needs to be stated in the last line:

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

Step 3: in your menu for the bottom navigation, set the code below for each item:

android:icon="@drawable/bottom_navigation_icon"

That's all. Now your icon changes when you click on it and changes back to the previous one when you click away!

Answer 4

Create res/color/bottom_nav_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="your_highlight_color" />
    <item android:state_pressed="true" android:color="your_highlight_color" />
    <item android:color="your_inactive_color" />
</selector>

Then in your BottomNavigationView:

app:itemTextColor="@color/bottom_nav_color"
app:itemIconTint="@color/bottom_nav_color"