Android Studio: Set Color Tint on Icon within a TabItem

Question

I'm using the TabLayout for my menu with Icon buttons. Is it possible to tint the icons via XML in drawables?

android:tint doesn't work with a TabItem element.

Answer 1

You can do it coding part, try this

private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    tabLayout.getTabAt(3).setIcon(tabIcons[3]);

    tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);


    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
        }

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

        }
    });
}

Answer 2

If you want to set tint through XML there is one way. Is custom layout for TabItem which is set through attribute android:layout:

<android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_drawable"
        android:layout="@layout/custom_tab" />

Where custom_tab layout is:

<?xml version="1.0" encoding="utf-8"?>
<com.view.TintableImageView 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@android:id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:tint_color="@color/red" />

Source of TintableImageView you can find here.

This approach gives you flexibility if you want to use different icon colors for different selector states, just create color selector file and set it as a tint color and it works

app:tint_color="@color/selector_tab"

Answer 3

I have found a much simpler solution, in the layout file add this attribute to the TabLayout:

app:tabIconTint="@color/desired_color_or_selector"

if you want to preserve the color state (enable/disable/selected) give it a color selector like so:

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