Android Bottom navigation change text & icon tint on item selection

user_4784067 0
Viewed 9249

I recently explored BottomNavigationView component of Android. I have 4 menu items and currently my BottomNavigationView configuration looks as below: 

<android.support.design.widget.BottomNavigationView
    android:id="@+id/activity_product_details_bottom_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@color/menu_select_deselect"
    app:itemTextColor="@color/menu_select_deselect"
    app:menu="@menu/menu_product_details"/>

What I want is the distinguished colors for the element selected & the one's that are deselected. I also created Color state list file named menu_select_deselect.xml placed at res/color directory as follows

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/white" android:state_checked="true"/>
    <item android:color="@color/tint_color_deselected"/>
</selector>

menu_product_details.xml is as follows

<?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/menu_product_details_home"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_home"
    android:title="@string/menu_product_details_home" />

<item
    android:id="@+id/menu_product_details_product_documents"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_product_documents"
    android:title="@string/menu_product_details_product_documents" />

<item
    android:id="@+id/menu_product_details_product_part_list"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_product_part_list"
    android:title="@string/menu_product_details_product_part_list" />

<item
    android:id="@+id/menu_product_details_product_service"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/ic_product_service"
    android:title="@string/menu_product_details_product_service" />
</menu>

Can anyone help me in what is wrong with the code, as only first element is displayed in white color even if I click on other 3 items?

bottomnavigationview android
4 Answers

You can change icon and text's tint color of select/deselect by adding

app:itemIconTint=""
app:itemTextColor=""

These are the 2 properties of BottomNavigationView and you can set it in your xml by adding drawable selectors in it.

But if you want to change icon of selected item and not just color, then I have different solution for you. Remove

app:itemIconTint=""

from your BottomNavigationView xml file and add below line to your class where BottomNavigationView is available:

bottomNavigationView.setItemIconTintList(null);

This will disable color tint effect of selected item icon and change the icon as per your selector drawable.

I had the same problem. I have added selector drawable for changing icon of BottomNavigationView item when its checked/selected. The selector drawable for each item is added in the menu file of BottomNavigationView as icon.

user_88749580
Related