Change the selected/unselected text colour of a specific Tab in a TabLayout with an index (only style one tab)

Question

Currently I am trying to style one Tab in a TabLayout differently to the rest. I would like one Tab with a specific index to have red text, both selected and unselected. As I am only requiring this for only one Tab at a specific index, the usual solution below does not work:

app:tabSelectedTextColor="@color/red"
app:tabTextColor="@color/red"

I have also attempted to apply a Spannable when returning the title for that specific Tab, however this doesn't actually display:

@Override
public CharSequence getPageTitle(int position) {
    switch (position) {
        case TAB_ONE:
            return getString(R.string.tab_one);
        case TAB_TWO_RED:
            Spannable spannable = new SpannableString(getString(R.string.tab_two));
            spannable.setSpan(new ForegroundColorSpan(Color.RED),
                        0, getString(R.string.tab_two).length(),
                        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return spannable;
        }
        return null;
    }

I would appreciate greatly if anyone knew how to style the text for one Tab with a specified index only.

score 3 · Accepted Answer · answered Jan 17 '17 at 16:38

It's fairly simple.

Try setting a customView to that specific tab in the TabLayout as follows:

TabLayout tabLayout;
tabLayout = (TabLayout) findViewById(R.id.pTabs);
tabLayout.getTabAt(1).setCustomView(R.layout.tab_two_layout);

Your XML for the custom layout (R.layout.tab_two_layout) would look something similar to this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:textStyle="bold"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        android:layout_width="60dp"
        android:textColor="@color/red"
        android:layout_gravity="center_vertical"
        android:text="TEXT HERE"
        android:layout_height="wrap_content"/>

</LinearLayout>

Change the selected/unselected text colour of a specific Tab in a TabLayout with an index (only style one tab)

1 Answers1