Develop Reference

How to change ActionBar Tab styles in API 14 and above

I am trying to fit 5 tabs at the top using the ViewPager view. I need those 5 tabs to fit on the screen width. It does not, so I was able to decrease the text size to make it fit, but then the text is too small. So now I am trying to take away some of the padding for each tab like so:
<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarTabTextStyle">#style/MyActionBarTextTheme</item>
<!-- <item name="android:actionBarStyle">#style/MyActionBarTheme</item> -->
</style>
<style name="MyActionBarTheme" parent="Widget.AppCompat.Light.Base.ActionBar.TabView">
<item name="android:padding">0dp</item>
</style>
<style name="MyActionBarTextTheme" parent="Widget.AppCompat.Light.ActionBar.TabText">
<item name="android:textSize">10sp</item>
</style>
Except nothing happens. In fact the tabs completely disappear. Is there something more specific I should be doing? Thanks.

how to add fix size of tab bar using sherlockactionbar in android? It should not going out of screen

I am using actionbarsherlock in my android project. I have added tabs but the last tab going out of screen.
my problem is I don't want to be last tab out of screen. I wanted to fit all tabs in screen using actionbarsherlock.
Please help me. If any one have answer to this problem. I am stuck on it.

This is possible with the layout in your xml. Keep in mind that your text will make your tabs wider and could still cause the problem. The maximum tabs is around 5 without sliding out of your screen.
<style name="DefaultTheme" parent="#style/Theme.Sherlock.Light">
<item name="actionBarTabStyle">#style/default_ActionBarTabStyle</item>
<item name="actionBarTabBarStyle">#style/default_ActionBarTabStyle</item>
</style>
<style name="default_ActionBarTabStyle" parent="#style/Widget.Sherlock.Light.ActionBar.TabView">
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:minWidth">0dp</item>
</style>

how to remove spacing between ActionBar icons

Once again I'm fighting with ActionBar styles for SDK 14 and above. I'm trying to remove/reduce spacing between Tab icons since the default spacing does not fit well in my design. Currently my style looks like:
<style name="sMain" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/mTabAreaBackground</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
</style>
<style name="mTabAreaBackground" parent="#android:style/Widget.Holo.ActionBar.Solid">
<item name="android:backgroundStacked">#2b2f33</item>
</style>
<style name="ActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#android:color/transparent</item>
<!-- below attributes have no effect -->
<item name="android:width">0dp</item>
<item name="android:height">0dp</item>
</style>
I "removed" the active Tab indicator by making it transparent since my Tab icons already have one. I assumed that the spacing between Tab icons was somehow related to the Tab indicator, which was still there though I made it transparent. Therefore I tried to apply a width and height of 0 in the same style (inherited from style/Widget.Holo.ActionBar.TabView). I don't know if my assumption was incorrect or I'm doing something wrong, I also could not find any documentation/examples related to adjusting spacing between Tab icons.
Any suggestions are appreciated.

AFAIK, the spacing is because of the padding on the TabView.
You should changing the padding on the TabView something like below.
<style name="ActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#android:color/transparent</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
</style>
The default padding on the TabView seems to be 16dp.

Actionbar tabs don't fill the tabbar

After hours of trying I finally found a method to separate the actionbar tabbar from the actionbar manualy.
actionbar convert tabs to list navigation if there is no room
But now there is one problem left. The tabs don't fill the tabbar.
EDIT
The tabs are added to the actionbar by:
ActionBar.Tab relatieTab = actionBar.newTab().setText("Relaties");
actionBar.addTab(relatieTab);

Try to switch the parent. If that doesn't work try visiting this post: Stacked ActionBar tab bar not filling parent
Good luck :)

Use the following to customize the tabs in action bar:
<style name="MyAppActionBarTabStyle" parent="#android:style/Widget.ActionBar.TabView">
<item name="android:background">#drawable/actionbar_tabindicator</item>
<item name="android:minWidth">40dip</item>
<item name="android:maxWidth">40dip</item>
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">1</item>
</style>
Make sure that the activity where you are setting these navigation tabs has the following in its #android:theme
<style name="MyAppTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/MyAppActionBarTabStyle</item>
</style>
I still could not figure how how to detect whether the tabbar is separate i.e. below main action bar or merged (when in landscape OR larger screens even in portrait)
Another interesting thing to know is how to prevent tab bar from collapsing to a spinner when space is not enough.
As and when I find out answers to my questions above, will update the post. Until then hope the styles help few other ppl

I just solved this problem today.
They key was using <item name="android:padding">0dp</item> like so...
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar">
</style>
<style name="LoginActionBar"
parent="#style/MyActionBar">
<item name="android:actionBarTabStyle">#style/LoginActionBarTabs</item>
</style>
<style name="LoginActionBarTabs"
parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:padding">0dp</item>
</style>
You don't need that many styles, but I didn't want to take any chunks out, which may have lead to confusion.
I also see that you already worked around this, but I figured I'd add my answer for the next person to come looking for this.

How to style the divider between Ice Cream Sandwich tabs?

I'm using the following style together with a set of nine patch images to create a red line at the bottom of some Ice Cream Sandwich tabs instead of the standard blue line:
<style name="customTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:tabStripLeft">#null</item>
<item name="android:tabStripRight">#null</item>
<item name="android:tabStripEnabled">false</item>
<item name="android:showDividers">none</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:background">#drawable/tab_line</item>
<item name="android:gravity">center</item>
</style>
<style name="customTabBar" parent="#android:style/Widget.Holo">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/divider2</item>
<item name="android:dividerPadding">0dp</item>
</style>
<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/customTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/customTabBar</item>
</style>
The red line is shown and everyting looks good, except for the divider between the tabs.
As you can see inside the green box in the image the line is not drawn below the divider.
How do I select a drawable, or a style for this divider?
The android:divider and android:showDividers items are not responsible for the divider between tabs. They only select the divider drawn between the tab icon and the tab title. I hide those dividers because there isn't a title and a divider would look strange.
Update With the answer from Aneal in mind I added a second style customTabBar. The style selects a drawable as a divider. The divider is a solid black line created with the following 9patch drawable:
With this drawable the divider is drawn, but there is also a blank line next to it:

After removing every style I use I got the following image:
This image also contains the small gaps. Therefore it seems that this is some kind of default behavior.
However I found a way to work around the problem. I set the redline as a standard Background for the whole tabbar. This way the gap appears but nobody can see it because the background, that already contains the line is shown.
I now use the following style for all my activities:
<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
<item name="android:actionBarTabBarStyle">#style/customTabBar</item>
<item name="android:actionBarTabStyle">#style/customTabStyle</item>
</style>
This style is used to style each single tab inside the tabbar:
<style name="customTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:showDividers">none</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:background">#drawable/tab_line</item>
<item name="android:gravity">center</item>
</style>
To style the whole Tabbar i use the following style:
<style name="customTabBar" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:background">#drawable/tab_unselected</item>
</style>
This style defines my custom divider and also defines the background for the tabbar. As background I directly set the nine patch drawable that is drawn if a tab is not selected.
The result of all this is a tabbar with a red underline without any gaps.

Here you go.
<style name="YourTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarTabBarStyle">#style/Divider</item>
</style>
<style name="Divider" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:divider">#drawable/your_divider_drawable_here</item>
<item name="android:showDividers">middle</item>
<item name="android:dividerPadding">12dip</item>
</style>

<style name="AppTheme" parent="AppBaseTheme">
<item>......
</item>
<item name="android:actionBarDivider">#null</item>
</style>
here #null is for not to provide any divider
and if you want to customize your divider than use #drawable/your_divider_image

If you'd like to get rid of dividers you could do just this:
<style name="customTabBar" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:divider">#null</item>
</style>

Btw. This is caused by huge bug in the ICS in LinerLayout class implementation of android:divider attribute. It was introduced in Honeycomb, broken in ICS and working again in Jelly Bean.
Problem is that when you use android:divider it make small space between it child for place divider, but place divider no into this space, but after it, so it will be overlap by the tab itself and space will stay empty. Very stupid bug. Try to compare LinerLayout source code for release 4.0 and 4.1.
And yes solution is put the delimiter to the background of all tabs and it will be visible only in the gaps between tabs caused by this bug.

Based on ATom's answer, here's a way to have something resembling dividers in all android versions.
In order to make this work, you don't use any of the native divider methods (because they are broken in some versions). Don't forget removing any code where you set dividers.
The trick is simply setting a very small right margin in the views used for each tab. This way, there will be a small gap where you can see the background (the TabHost). To finish this, you set the background on the TabHost to mimic stretched divider.
Although this trick doesn't work for all possible designs you might want, it works well for many cases like the one I had.
Here's a sample implementation:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// ...
// inflate or create tabHost in code
// call tabHost.setup
// ...
TabWidget tabWidget = tabHost.getTabWidget();
tabWidget.setBackgroundResource(R.drawable.tab_divider);
// ... add tabs
for( int i = 0; tabWidget.getChildCount()-1; i++) {
View view = tabWidget.getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();
layoutParams.rightMargin = getResources().getDimensionPixelSize(R.dimen.tab_divider_width); //1dp
view.setLayoutParams(layoutParams);
}
return tabHost;
}
Here's a sample tab_divider drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/divider_color" />
<stroke android:width="#dimen/tab_divider_vertical_padding"
android:color="#color/tab_background_color"/>
</shape>