Give text of selected tab a different color using ViewPagerIndicator

Question

I've tried to let the SampleTabsStyled demo from the ViewPagerIndicator change the color of the text of the currently selected tab without success.

However, the SampleTitlesStyledTheme demo does change its text color when switching between titles/tabs.

When looking inside the styles xml:

<resources>
    ...
    <style name="CustomTitlePageIndicator">
        <item name="android:background">#18FF0000</item>
        <item name="footerColor">#FFAA2222</item>
        <item name="footerLineHeight">1dp</item>
        <item name="footerIndicatorHeight">3dp</item>
        <item name="footerIndicatorStyle">underline</item>
        <item name="android:textColor">#AA000000</item>
        <item name="selectedColor">#FF000000</item>
        <item name="selectedBold">true</item>
    </style>
    ...
    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textColor">#FF555555</item>
        <item name="android:textSize">16sp</item>
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <item name="android:dividerPadding">10dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
    </style>
    ...
</resources>

I see that the SampleTitlesStyledTheme demo uses the CustomTitlePageIndicator style, which defines a selectedColor item. So (perhaps naively) I thought to add

<item name="selectedColor">#FF000000</item>

to the style the SampleTabsStyled demo is using, CustomTabPageIndicator, but, alas, that didn't work.

The question seems obvious, but I'll ask anyway: is there a way (using the present styles xml) to let the currently selected text of a tab in the SampleTabsStyled demo have a different color than the other tabs? If so, how?

EDIT

Oh, and I'm using this in combination with ActionBarSherlock, in case that is important...

Solution 1

Assuming you don't mind creating an extra xml, first try include the attribute android:textColor in your CustomTabPageIndicator.Text (or CustomTabPageIndicator) like this:

<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
    <item name="android:textColor">@drawable/tab_text_color</item>
    ...
</style>

where tab_text_color.xml is put under res/drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:color="@color/text_tab_selected" />
    <item
        android:state_selected="false"
        android:color="@color/text_tab_unselected" />
</selector>

Finally, just define the two colors @color/text_tab_selected and @color/text_tab_unselected in your color resource file colors.xml located in res/values folder (create one if it does not exist already). For example:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="text_tab_selected">#FF000000</color>
    <color name="text_tab_unselected">#FF555555</color>
</resources>

Solution 2

Try this

Simplest way

<android.support.design.widget.TabLayout
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabTextColor="@color/White"
                app:tabSelectedTextColor="@color/Blue"
                app:tabIndicatorColor="@color/Yellow"
                app:tabMode="fixed"
                app:tabGravity="fill"/>

Don't forgot to add this Dependency

compile 'com.android.support:design:23.1.1'

Comments

[Bart Kiers]

I could have sworn I tried something like that, but I must have goofed up somewhere. I only had to change android:textColor into android:color in the tab_text_color.xml file after which it worked like a charm. Many thanks Neoh!

[Neoh]

Yes, I've edited the answer to reflect what you really asked :)

[Bart Kiers]

I already edited with the correct value (which is android:color). When I do android:textColor, a runtime exception is thrown and the following is on my logcat: "Binary XML file line #5: <item> tag requires a 'android:color' attribute.". I've edited your answer to contain the correct variant.