Android Bottom navigation change text & icon tint on item selection

Question

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?

Answer 1

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.

Answer 2

Answering my own question, the mistake in my code was to replace the return value in onNavigationItemSelected() mentioned below, earlier I was returning false, whereas expected was to return true, it might be helpful for someone.

 bottomNavigation.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
 @Override
 public boolean onNavigationItemSelected(@NonNull MenuItem item) {
  switch (item.getItemId()) {
   case R.id.menu_product_details_home:
    break;
   case R.id.menu_product_details_product_documents:
    break;
   case R.id.menu_product_details_product_part_list:
    break;
   case R.id.menu_product_details_product_service:
    break;
  }
  return true;
 }
});

Answer 3

Change your selector file like below

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_enabled="true" />
    <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
</selector>

and yes reference @drawable instead of @color