How to change tab background on viewpagerindicator tabs?

Question

I am using the ViewpagerIndicator library by Jake Wharton. I use tabs code along with the ActionBarSherlock library. Everything works fine, but I'm trying to create a tab background and can't figure out how to do this. I need a dark action panel with dark tabs and light fragments (tab contents) .

The main theme I use is Theme.Sherlock.Light.DarkActionBar. I am expanding this style by creating it as the parent of the style that sets the attributes for the tabs (for example, text color, indicator color, etc.). This results in a dark action bar, light tabs and light fragments.

I can not find anything that will change the background of the tabs themselves. The only thing I can change is to change the whole application to darkness (using Theme.Sherlock). Here is my code:

<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 1

Since graphic elements with 9 patches are mostly transparent, the color of the tabs can be changed simply by adding a background color for the entire ViewPagerIndicator, for example:

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

That way, you can continue to use a theme based on Theme.Sherlock.Light.DarkActionBar , and you don't need to create new drawings.

Answer 2

First add a drawing to your project, one of which 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 refer to your drawing in your style:

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

This will cause the active tab to have a white background and the rest are black.