How to remove separator between ActionBar and tabs

Question

I am trying to remove the separator between the ActionBar and the tabs, but I have not succeeded yet. I tried this <item name="android:actionBarDivider">@color/tab_color</item> in my .xml style but nothing. In a few words, I would like to have something like this:

Here is my style.xml:

 <style name="AppTheme" parent="Theme.AppCompat.Light"/> <style name="Theme.Styled" parent="@style/Theme.AppCompat.Light"> <item name="android:windowContentOverlay">@null</item> <item name="android:windowDisablePreview">true</item> <item name="android:actionBarItemBackground">@drawable/selectable_background_example</item> <item name="android:actionBarTabStyle">@style/Widget.Styled.ActionBar.TabView</item> <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item> <item name="android:actionBarTabTextStyle">@style/MyCustomTabView</item> <item name="android:actionBarDivider">@color/tab_color</item> </style> <style name="Widget.Styled.ActionBar.TabView" parent="@style/Widget.AppCompat.Light.ActionBar.TabView"> <item name="android:background">@drawable/tab_indicator_ab_example</item> <item name="android:width">30dp</item> </style> <style name="Widget.Styled.ActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid"> <item name="android:background">@color/tab_color</item> <item name="android:backgroundStacked">@drawable/ab_stacked_solid_example</item> <item name="android:backgroundSplit">@color/tab_color</item> <item name="android:textColor">@color/tab_text</item> <item name="android:titleTextStyle">@style/MyActionBarTextColor</item> <item name="android:actionBarDivider">@color/tab_color</item> </style> <style name="MyActionBarTextColor" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textColor">@color/tab_text</item> </style> <style name="MyCustomTabView" parent="Theme.AppCompat.Light"> <item name="android:textColor">#ffffff</item> <item name="android:textSize">14dp</item> <item name="android:textStyle">bold</item> </style> 

This is what I have

Answer 1

There is a default lower bound in Theme.Holo.Light , so probably also appCompat, try using the default Theme.AppCompat .

Use a background image, try using @color/tab_color like this.

 <style name="Widget.Styled.ActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid"> <item name="android:background">@color/tab_color</item> <item name="android:backgroundStacked">@color/tab_color</item> <item name="android:backgroundSplit">@color/tab_color</item> <item name="android:textColor">@color/tab_text</item> <item name="android:titleTextStyle">@style/MyActionBarTextColor</item> <item name="android:actionBarDivider">@color/tab_color</item> </style> 

Sources:

Problem with ActionBarSherlock

Removing a string or delimiter in Android

Remove the separator under the action bar

Remove blue delimiter on ICS

Answer 2

You can easily remove the delimiter by pasting this code into the styles.xml file

 <item name="windowActionBarOverlay">true</item> <item name="android:windowActionBarOverlay">true</item> 

But according to Google’s Guidelines for New Tab Design, the tab bar is designed differently, and there’s another way to use colors.

Answer 3

I tried the posted answers, but for some reason they did not work for me. It is happened:

  <item name="windowActionBarOverlay">true</item> <item name="android:windowActionBarOverlay">true</item> 

I set these properties in my application theme and it worked for me.