Change TabPageIndicator footer and text colors (ViewPagerIndicator)

Question

This is driving me insane: I can't for the life of me figure out how to change the footer and text colors of my TabPageIndicator (from Jake Wharton's ViewPagerIndicator). I looked at the source code for the sample ViewPagerIndicator app and I can't find where the code differs for the "Default" and the "Styled" samples. The Default has the default blue footer and white text, whereas the Styled sample has a red footer and uses a gray font.

I know it's possible, but I can't find out how to do it!! Any help is tremendously appreciated. :)

Answer 1

Yeah, it's different from Manifest definition for theme:

For default tab:

<activity
            android:name=".SampleTabsDefault"
            android:label="Tabs/Default"
            android:theme="@style/Theme.PageIndicatorDefaults">

And styled tab:

<activity
            android:name=".SampleTabsStyled"
            android:label="Tabs/Styled"
            android:theme="@style/StyledIndicators">

Answer 2

I think the correct answer is to add the following style to your style.xml file (this contains elements telling VPI how to show). Something like this:

<style name="Widget.MyTitlepageIndicator">
    <item name="footerColor">#ff99cc33</item>
    <item name="footerIndicatorStyle">underline</item>
    <item name="footerIndicatorHeight">3dp</item>
    <item name="footerLineHeight">1.5dp</item>
    <item name="footerPadding">6dp</item>
    <item name="selectedColor">#ffffffff</item>
</style>

Then, in the layout.xml file, where you define your VPI, you just tell it about the style you created, like this:

<com.viewpagerindicator.TitlePageIndicator
    android:id="@+id/history_vp_ind"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MyTitlepageIndicator" />

Answer 3

To do it programmatically, modify the TabPageIndicator and add the following method:

public void setTextColor(int color) {
    for (int i = 0; i < mTabLayout.getChildCount(); i++) {
        View child = mTabLayout.getChildAt(i);
        if (child instanceof TextView)
            ((TextView) child).setTextColor(color);
    }
}

Then just use the method to change the text color of the views in the indicator. For example

setTextColor(0xFFFFFFFF)

would be white.