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;
}

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.