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: enter image description here

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 enter image description here

Can you post a screenshot of what it currently looks like? – Jeffrey Mixon Nov 03 '14 at 23:52 — Jeffrey Mixon, Nov 03 '14 at 23:52

score 4 · Accepted Answer · edited May 23 '17 at 11:54

4

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

edited May 23 '17 at 11:54

Community

1
1

answered Nov 04 '14 at 00:11

Vincent D.

977
7
20

1

GOSH!!! Thank you!!!! Like you said the problem was that I used a drawable instead of a color. – Rick Nov 04 '14 at 15:37
Have they changed something in Android 5.0 ? This fix used to work before. I have applied a custom style with android:elevation property to 0dp. The shadow has turned to a thin line now, but still there. even after adding the above properties – binaryKarmic Dec 23 '14 at 12:59

score 2 · Answer 2 · edited Mar 08 '15 at 21:32

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.

edited Mar 08 '15 at 21:32

Taryn

242,637
56
362
405

answered Feb 25 '15 at 17:03

edwinj

430
3
14

score 0 · Answer 3 · answered Feb 25 '15 at 01:08

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.

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

3 Answers3

Linked