How to change tab background on viewpagerindicator tabs?

Flyview picture Flyview · Oct 13, 2012 · Viewed 9.3k times · Source

I am using ViewpagerIndicator library by Jake Wharton. I am using the tabs code in conjunction with the ActionBarSherlock library. Everything works fine, but I'm trying to style the background of the tabs and can't figure out how. I would like a dark action bar with dark tabs and light fragments (tab content).

The base theme I am using is Theme.Sherlock.Light.DarkActionBar. I extend this style by making it the parent of a style that sets attributes for the tabs (like text color, indicator color, etc). This results in dark actionbar, light tabs, and light fragments.

I can't find anything that will change the background of the tabs themselves. The only way I can change it is by changing the whole app to dark (using Theme.Sherlock). Here's my code so far:

<style name="vpiTheme" parent="Theme.Sherlock.Light.DarkActionBar">
    <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>

<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:textColor">#FF000000</item>
    <item name="android:paddingTop">6dp</item>
    <item name="android:paddingBottom">6dp</item>
    <item name="android:paddingLeft">16dip</item>
    <item name="android:paddingRight">16dip</item>
    <item name="android:maxLines">2</item>
</style>

Answer

Tam&#225;s Szincs&#225;k picture Tamás Szincsák · Dec 8, 2012

Since the 9-patch drawables are mostly transparent, the color of the tabs can be changed by simply adding a background color to the whole ViewPagerIndicator, like this:

<com.viewpagerindicator.TabPageIndicator
    android:id="@+id/indicator"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:background="#333333" />

This way you can keep using a theme based on Theme.Sherlock.Light.DarkActionBar, and do not need to create new drawables.