Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

Screenshot from the resulting tab bar


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:

9patch drawable creating the divider

With this drawable the divider is drawn, but there is also a blank line next to it:

tab bar with dividers

like image 596
Janusz Avatar asked Feb 07 '12 07:02

Janusz


1 Answers

After removing every style I use I got the following image:

enter image description here

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.

enter image description here

like image 170
Janusz Avatar answered Sep 20 '22 02:09

Janusz