Attribute to change the color of the tab indicator

Question

This problem is really driving me crazy. I am using the viewpager indicator without any trouble, but I would like to change something on the final result:

I would like to change the color of the line from blue to green; obviously I would like to keep the same line color when a tab is selected. This is my style file:

<resources>


<style name="collection_field">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
</style>

<style name="collection_header" parent="collection_field">
    <item name="android:textStyle">bold</item>
</style>


<style name="CollectionTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:textColor">@android:color/black</item>


</style>

<style name="Theme.Collection" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="vpiTabPageIndicatorStyle">@style/CollectionTabPageIndicator</item>
</style>

What attribute am I supposed to use to make this happens? Thanks for your replies.

Answer 1

You'll need to create your own tab indicators then apply them using the android:background attribute in your CollectionTabPageIndicator style.

<style name="CollectionTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:background">@drawable/your_tab_indicator</item>
</style>

The easiest way to create your own green indicators is to use the Action Bar Style Generator.

Once there, turn on the Tab hairline style and apply your Tab indicator color. Then download the zip, copy over all of your tab indicator resources into the appropriate drawable folders, and finally add it your style.

For reference, here's the default blue indicator res/drawable/vpi__tab_indicator