Change Menu item color when active/inactive

Issue

I've 3 menu items and would like to change their styling.

I've set itemIconTint and Color to purple_500 and now all items/texts are same color, regardless if they're active or not.

How do I achieve this programatically?

This is my activity_main

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:itemIconSize="22dp"
        app:menu="@menu/bottom_navigation"
        app:itemIconTint="@color/purple_500"
        app:itemTextColor="@color/purple_500"/>

bottom_navigation:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav_live"
        android:icon="@drawable/ic_baseline_live_tv_24"
        android:title="@string/LIVE"/>

    <item
        android:id="@+id/nav_articles"
        android:icon="@drawable/ic_outline_article_24"
        android:title="@string/news" />

    <item
        android:id="@+id/nav_notification"
        android:icon="@drawable/ic_baseline_notifications_none_24"
        android:title="@string/subscribe"/>

</menu>

and code that I found on StackOverflow (maybe I'm on the right track with this one?)

public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.nav_live:
                navLive();
                return true;
            case R.id.nav_articles:
                navArticles;
                return true;
            case R.id.nav_notification:
                onMenuItemSelected()
                return true;
            default:
                return: super.onOptionsItemSelected(item);
        }
    }

Solution

You can achieve this by using a drawable.

drawable/bottom_tab_color.xml

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

    <item
        android:color="@color/colorActive"
        android:state_selected="true"
        android:state_checked="true"/>

    <item
        android:color="@color/colorInactive"/>

</selector>

state_selected and state_checked should be true in case of the active tab. Use this drawable in your bottomNavigationView.

<com.google.android.material.bottomnavigation.BottomNavigationView
     android:id="@+id/bottomNavigation"
     android:layout_width="match_parent"
     android:layout_height="@dimen/bottom_nav_height"
     app:itemTextColor="@drawable/bottom_tab_color"
     app:itemIconTint="@drawable/bottom_tab_color"
     app:menu="@menu/bottom_nav_menu" />

It works perfectly!

Answered By - tronku