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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With