Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 799
Jason Fel Avatar asked Jan 05 '17 15:01

Jason Fel


4 Answers

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"
like image 54
truongnm Avatar answered Nov 18 '22 22:11

truongnm


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>
like image 39
JeKa Avatar answered Nov 18 '22 21:11

JeKa


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!

like image 5
BakaOne Avatar answered Nov 18 '22 21:11

BakaOne


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.

like image 1
ADS_Developer Avatar answered Nov 18 '22 21:11

ADS_Developer