android – Change icon color of a selected Tab

Question:

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

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 it ends up changing the colors of all the tabs, and the color is incorrect, it seems that only the contrast changes.

Answer:

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 it to suit your needs.

Scroll to Top