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>

score 13 · Answer 1 · answered Aug 21 '18 at 02:53

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"

score 11 · Answer 2 · answered Jun 27 '17 at 09:14

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>

Icon state was working in SDK 25 but it's not working in SDK SDK 26. Could you please help me out, why it's not working? — Anksss, May 30 '18 at 19:11
None of this works for me and app is targeting 31 and emulator is also 31 — JPM, Jan 12 '23 at 19:58

score 7 · Answer 3 · answered Apr 19 '18 at 21:49

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!

score 1 · Answer 4 · answered Jan 05 '17 at 16:13

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.

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

4 Answers4