Change bottom navigation icon when clicked

Question

I want to change the icon that was clicked in bottom navigation by a user to another one to show the user the current fragment he is in. I found similar questions online with answers but none worked for me and i don't know how my code is different.

first thing i did was create a selector like this

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

and then i used it as my icon like this

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/navigation_request"
    android:icon="@drawable/requests"
    android:title="@string/title_requests"
     />

<!--just here for test-->
<item
    android:id="@+id/navigation_chat"
    android:icon="@drawable/chat_selector"
    android:title="@string/title_chat"
     />
<item
    android:id="@+id/navigation_groups"
    android:icon="@drawable/ic_group_24dp"
    android:title="@string/title_groups"
     />

<item
    android:id="@+id/navigation_friends"
    android:icon="@drawable/friends"
    android:title="@string/title_friends"
     />

</menu>

but when i run the code on my device it has no effect.

this is my BottomNavigation

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:labelVisibilityMode="unlabeled"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/white"
    app:menu="@menu/navigation" />

and this i where i handle clicks in my activity

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = item -> {
    Fragment fragment;


    switch (item.getItemId()) {
        case R.id.navigation_request:
            getSupportActionBar().setTitle("Request");
            loadFragment(requestFragment);
            return true;

        case R.id.navigation_chat:
            // toolbar.setTitle("Chat");
            getSupportActionBar().setTitle("Chat");
            loadFragment(chatsFragment);
            return true;

        case R.id.navigation_friends:
            // toolbar.setTitle("Friends");
            getSupportActionBar().setTitle("Friends");
            loadFragment(friendsFragment);
            return true;

        case R.id.navigation_groups:
            // toolbar.setTitle("Chat");
            getSupportActionBar().setTitle("My Groups");
            loadFragment(groupsFragment);
            return true;

            default:
                return false;

    }
};

Answer 1

Create color folder in res

res -> Android Resource Directory -> color

Create color selector : navigation_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:color="@color/selected_color" />
    <item android:color="@color/normal_color" />
</selector>

Set item icon tint and text color.

<com.google.android.material.bottomnavigation.BottomNavigationView
   //***
    app:itemIconTint="@color/navigation_state"
    app:itemTextColor="@color/navigation_state"
  //***
  />

I have used material design. Doesn't matter