How can I remove the divider between the ActionBar and the tabs

Question

I'm trying to remove the divider between the ActionBar and the tabs but I did not succeed yet. I've tried this <item name="android:actionBarDivider">@color/tab_color</item> in my style.xml but nothing. In few words I'd like to have something like this:

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

The Theme.Holo.Light has a default shadow on the bottom, so probably appCompat too, Try to use the default one Theme.AppCompat.

Your background use image, try to use a @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 :

ActionBarSherlock issue

Removing line or divider in Android

Remove divider under actionbar

Remove blue divider on ICS

Answer 2

You can easily remove the divider by pasting this code in you styles.xml file

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

But according to Googles new Tab design principles, the tab strip is designed differently and there is also a different way of using colors.

Answer 3

I tried the posted answers but for some reason they didn't work for me. This did:

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

I set those properties in my app's theme and it worked for me.