Change icon and title color when selected in android design library TabLayout

Question

I am using TabLayout of design library what i want to acheive is

I have tried many tutorial and i am able to achieve it by customizing the tab but there is an limitation that is occurring when the tab is selected i want to change the text color as well as the image of the icon which is not possible by referring any of the tutorial i read so far. I have tried this so far by adding this in the FragmentStatePagerAdapter

public View getTabView(int position) {
    View tab = LayoutInflater.from(mContext).inflate(R.layout.tabbar_view, null);
    TextView tabText = (TextView) tab.findViewById(R.id.tabText);
    ImageView tabImage = (ImageView) tab.findViewById(R.id.tabImage);
    tabText.setText(mFragmentTitles.get(position));
    tabImage.setBackgroundResource(mFragmentIcons.get(position));
    if (position == 0) {
        tab.setSelected(true);
    }
    return tab;
}

Maidamaidan

Keep arrays or Lists of the tabText and tabImage Views you're finding in that method, and you can change whatever you want on them when a tab is selected/unselected. – Westberry

I am able to change the Icon with Tab Activity if you want to check then i will post that code. – Tremaine

@MikeM. i will try your method – Maidamaidan

@RajanBhavsar i want it in TabLayout from design library – Maidamaidan

Please check the following link will help in your Issue: #32662181 – Tremaine

@VishwajitPalankar , any solution for this problem? i am faceing same problem.. – Admeasure

Answer 1

The Design Library were updated to match the material design "Tabs with icons and text" specs, so you don't need a custom tab view.

But in the current version (23.1.1), only the text colors match the spec (tab focused - #fff, tab unfocused - 70% #fff). So you can use the ColorStateList returned by getTabTextColors() to tint the icons using DrawableCompat.setTintList(ColorStateList).

Try to use this gist https://gist.github.com/mikovali/7a89b505cd6306bb94a8. Removing the line tabs.setTabTextColors(Color.RED, Color.GREEN) should be enough to match the spec for both text and icon on dark toolbars.

Leyba