Customize ActionBar TabBar (ActionBarSherlock)

Question

I’ve been stuck on this issue for several days now. Can someone help me customize the tabs displayed under the ActionBar (NavigationMode - NAVIGATION_MODE_TABS )?

Basically I want to change the background color of the tabs and the underline color of the currently selected tab. So far this is what I have done, but it will not work. I am using ActionBarSherlock .

 <style name="Theme.Styled" parent="@style/Theme.Sherlock.Light"> <item name="actionBarStyle">@style/Widget.Theme.Styled.ActionBar</item> <item name="android:actionBarStyle">@style/Widget.Theme.Styled.ActionBar</item> <item name="actionBarTabBarStyle">@style/customActionBarTabStyle</item> <item name="android:actionBarTabBarStyle">@style/customActionBarTabStyle</item> <item name="actionBarTabBarStyle">@style/customActionBarTabBarStyle</item> <item name="android:actionBarTabBarStyle">@style/customActionBarTabBarStyle</item> <item name="actionBarTabTextStyle">@style/customActionBarTabTextStyle</item> <item name="android:actionBarTabTextStyle">@style/customActionBarTabTextStyle</item> </style> <style name="customActionBarTabStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabView"> <item name="android:background">@color/red</item> <item name="android:textSize">12dp</item> </style> <style name="customActionBarTabBarStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabBar"> <item name="android:background">@color/red</item> </style> <style name="customActionBarTabTextStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabText"> <item name="android:titleTextStyle">@style/Theme.Styled.ActionBar.TitleTextStyle</item> <item name="android:textStyle">bold</item> </style> <style name="Widget.Theme.Styled.ActionBar" parent="Widget.Sherlock.ActionBar"> <item name="android:background">#A9E2F3</item> <item name="background">#A9E2F3</item> <item name="android:titleTextStyle">@style/Theme.Styled.ActionBar.TitleTextStyle</item> </style> <style name="Theme.Styled.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title"> <item name="android:textColor">@color/red</item> <item name="android:textStyle">bold</item> </style> <style name="Animations" /> 

Answer 1

I'm not sure you need this anymore, but I will send an answer to other people. You can set this in the background Drawable customActionBarTabStyle as a Drawable resource:

 <style name="customActionBarTabStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabView"> <item name="android:background">@drawable/actionbar_tabs_selector</item> <item name="android:textSize">12dp</item> </style> 

The resource must be a Selector, one of these lines:

 <!-- This is the "@drawable/actionbar_tabs_selector" layout !--> <?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="@drawable/actionbar_tab_style_nselected"/> <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/actionbar_tab_style_selected"/> <!-- Pressed state --> <item android:state_pressed="true" android:drawable="@drawable/actionbar_tab_style_selected" /> <!-- Focused state --> <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/actionbar_tab_style_nselected"/> <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/actionbar_tab_style_nselected"/> </selector> 

So, the resources here are 2 layer lists. One for when the tab is inactive, and the other for when the and tab is active. Thus, you set 2 lists of layers depending on the selected state.

One list of layers might look like this:

 <!-- This is the "@drawable/actionbar_tab_style_nselected" layout !--> <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Bottom Line --> <item> <shape android:shape="rectangle"> <solid android:color="@color/HCL_orange" /> </shape> </item> <!-- Tab color --> <item android:bottom="2dip"> <shape android:shape="rectangle"> <solid android:color="@android:color/white" /> </shape> </item> </layer-list> 

Thus, the first element is the bottom line, which you can define as the underline color of the currently selected tab, and the second element is the color of the entire tab.

Answer 2

You can use the available style generator or get a deeper understanding of this or this .