Change color of the icon of a selected Tab

Question

I’m developing tabs in Android Studio with com.google.android.material.tabs.Tablayout and would like to change the color of the icon, only of the selected tab.

The icons are in SVG. And the text and icon colors are different, so I can’t use the default style.

API version: 30

Android Studio version: 4.1.1

XML

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="32dp"
    tools:ignore="MissingConstraints"
    app:tabIndicatorHeight="0dp"
    app:tabInlineLabel="true">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ir agora"
        android:icon="@drawable/ic_tab_imediatas"
        />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ir outro dia"
        android:icon="@drawable/ic_tab_programadas"
        />

</com.google.android.material.tabs.TabLayout>

In Activity, I made the following attempt:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @SuppressLint("ResourceAsColor")
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setTint(R.color.icon_tab_selected);
        //tabLayout.setTabIconTintResource(R.color.icon_tab_selected);
    }

    @SuppressLint("ResourceAsColor")
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tabLayout.setTabIconTintResource(R.color.icon_tab_unselected);
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

But ends up changing the colors of all tabs, and the color is incorrect, it seems that changes only the contrast.

Answer 1

Well, part of your question already has the answer. Yes you will need to create a customization with two <selector>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:tabBackground="@drawable/tab_bg_color_selector"
    app:tabIconTint="@color/tab_content_color_selector"
    app:tabIndicator="@null"
    app:tabSelectedTextColor="@color/red"
    app:tabTextColor="@color/secondaryColor">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_pedidos"
        android:text="Pedidos" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_suporte"
        android:text="Suporte" />
</com.google.android.material.tabs.TabLayout>

drawable/tab_bg_color_selector.xml

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

color/tab_content_color_selector.xml

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

EDIT: Important: the icons you change to yours. This is an example here in use in an app and the icons are also in SVG. Modify to suit your needs.