How to create a tab separator between Sandwich Ice Cream?

Question

I use the following style along with a set of nine patch images to create a red line at the bottom of some Sandwich Ice Cream 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> 

A red line is displayed and everything looks good, except for the separator between the tabs. As you can see inside the green window in the image, the line is not drawn below the separator. How to choose a selection or style for this separator?

The android:divider and android:showDividers not responsible for the separator between the tabs. They select only the separator between the tab design and the tab title. I hide these separators because there is no name and the separator will look weird.

---

Update . Given the answer from Aneal, I added a second customTabBar style. Style selects popped as a separator. The divider is a solid black line created using the following 9 patch:

With this drawable, a separator is drawn, but there is also an empty line next to it:

Answer 1

After removing each used style, I got the following image:

This image also contains small spaces. Therefore, it seems that this is some kind of default behavior.

However, I found a way around the problem. I set the red line as the standard background for the entire panel. Thus, a space appears, but no one sees it, because a background is displayed that already contains a string.

Now I use the following style for all my actions:

 <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 individual tab in a tab:

 <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 create a style in 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 separator, and also defines the background for the tab. As a background, I directly set nine patches that stretch if the tab is not selected. The result of all this is a panel with a red underline without spaces.

Answer 2

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> 

Answer 3

 <style name="AppTheme" parent="AppBaseTheme"> <item>...... </item> <item name="android:actionBarDivider">@null</item> </style> 

here @null is not providing any separator and if you want to customize your separator than use @ drawable / your_divider_image

Answer 4

If you want to get rid of delimiters, you can do the following:

 <style name="customTabBar" parent="@android:style/Widget.Holo.ActionBar.TabBar"> <item name="android:divider">@null</item> </style> 

Answer 5

Btw. This is caused by a huge error in ICS in the implementation of the LinerLayout class of the android: divider attribute. It was introduced at Honeycomb, broken up on ICS, and works on Bean Jelly again.

The problem is that when you use android: divider, it makes a small space between it child for the space separator, but put divider no in that space, but after it it will be overlapped by the tab itself, and the space will remain empty. Very stupid mistake. Try comparing the source code for LinerLayout for versions 4.0 and 4.1.

And yes, the solution puts the separator on the background of all tabs, and it will be visible only in the intervals between tabs caused by this error.

Answer 6

Based on ATom's answer , here is a way to have something like separators in all versions of Android.

To make this work, you do not use any of your own divisor methods (because in some versions they are broken). Remember to remove the code where you set the delimiters.

The trick just sets a very small right edge in the views used for each tab. So there will be a small space where you can see the background (TabHost). To end this, you set the background to TabHost to simulate a stretched separator.

Although this trick does not work for all the possible designs you might need, it works well for many cases like the ones I had.

Here's an example 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>