How to style the divider between Ice Cream Sandwich tabs? –

Development issue/problem:

I use the following style and a set of nine patches to create a red line at the bottom of some Ice Cream Sandwich tabs instead of the standard blue line:

The red line is displayed and everything looks correct except for the tab separator.
As you can see in the green box on the picture, the line does not go below the boundary line.
How do I choose a pattern or style for this separator?

The android:divider and android:showDividers elements are not responsible for the separation between the tabs. You select only the boundary dragged between the bookmark icon and the bookmark title. I’m hiding these distributors because there’s no title and the distributor would look weird.

Update With Aneal’s answer I added a second style of CustomTabBar. Style selects a pattern as a separator. The dividing line is a continuous black line made with the next piece in figure 9:

It draws a separator, but also puts a white line next to it:

How can I solve this problem?

Solution 1:

After removing all the styles I used, I get the following image:

This image also contains small openings. So it seems to be some kind of standard behavior.

However, I have found a way around this problem. I set the overflow rule as the default background for the entire tab bar. This creates a space, but nobody sees it because the background, which already contains the line, is displayed.

I now use the next style in everything I do:

This style is used to style each tab in the tab bar:

I use the following style to style the whole tab bar:

This style defines my custom separator and also defines the background of the tab bar. I have directly defined the nine patches as backgrounds that will be drawn if the tab is not selected.
The result is a tab with a red underscore and no spaces.

Solution 2:

Here it is.

Solution 3:

here @null to not offer
divider and if you want to customize your divisor use @drawable/your_divider image

Solution 4:

If you want to get rid of the bulkheads, you can do that:

Solution No 5:

Oh, by the way. This is due to a major bug in the implementation of the android:divider attribute in the ICS in the LinerLayout class. It was introduced in Honeycomb, went bankrupt in ICS, and is now active again in Jelly Bean.

The problem is that when you use android:separator, it creates a small space between the children to place the separator, but does not place the separator in that space, but after, so it overlaps the tab itself, leaving the space empty. A very stupid mistake. Try comparing the LinerLayout source code for versions 4.0 and 4.1.

And yes, the solution is to put the separator in the background of all tabs, and it will only be visible in the spaces between the tabs caused by this error.

Solution No 6:

Based on ATom’s answer, here is a way to get something similar to the splitters in all versions of Android.

To make this work, you should not use any of the native demarcation methods (as they are buggies in some versions). Don’t forget to remove any code in which you place delimiters.

The trick is to simply define a very small right margin in the views used for each tab. This leaves a small space where you can see the background (TabHost). Finally, place a background on the TabHost that simulates a stretched separator.

This trick may not work for every possible design you need, but for many cases like the one I’ve had, it works well.

Here is an example of implementation:

General view
onCreate view (LayoutInflater inflater, ViewGroup container, Bundle storedInstanceState) {

// …
// 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 = 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 is an example of tab_divider rendering :

Good luck!

Related Tags:

southern living ice cream sandwiches,southern living ice cream cake recipe,southern living ice cream desserts,loaf pan ice cream cake,ice cream sandwich cake 9×13 pan,ice cream sandwich cake with strawberries,android version 4.0.4 update download,update 4.0 youtube,how to upgrade android 4.0 4,is android 4.0 still supported,android 4.0 youtube update,how to update ice cream sandwich to lollipop