How to change tab background on viewpagerindicator tabs?

Question

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>

score 7 · Answer 1 · answered Dec 08 '12 at 13:28

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.

score 0 · Answer 2 · answered Oct 23 '12 at 22:13

First add a drawable to your project, the one below is called tab_indicator.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/black" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@android:color/white" />
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/black" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@android:color/white" />
</selector>

Then reference your drawable in your style:

<item name="android:background">@drawable/tab_indicator</item>

This will make the active tab have a white background and the others black.

Yes, that's right. I'd forgotten that my goal was to have the indicator removed. The answers here http://stackoverflow.com/questions/10364045/actionbarsherlock-actionbar-custom-background-with-divider should be applicable, as the default indicator/background is done with a 9 patch image. — grant, Oct 24 '12 at 14:19

How to change tab background on viewpagerindicator tabs?

2 Answers2