How do I remove the divider between Toolbar and TabLayout

Question

I got a tablayout:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:elevation="4dp"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabBackground="@color/colorPrimary"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@android:color/white"/>

and a toolbar but there is still a small line between the toolbar and the divider. I haven't set a toolbar style yet. How do I remove the divider?

heres an image of the divider

Set the same color of the toolbar and the tablayout and it will no be visible I guess — Vucko, Jul 16 '16 at 14:19
@Vucko They have the same color, thats why theres only a small divider — zebleckDAMM, Jul 16 '16 at 14:20
On what API level? I had a similar thing on my phone API 17, where the divider was not visible, and it was on another phone API 21 or so. — Vucko, Jul 16 '16 at 14:28
Here is its solution... https://stackoverflow.com/a/56998158/7402328 — Sheharyar Ejaz, Jul 11 '19 at 22:45

score 5 · Answer 1 · edited Oct 19 '16 at 10:28

5

Just add app:elevation="0dp" in your AppBarLayout Widget [android.support.design.widget.AppBarLayout] which has a toolbar wrapped. It will do the work!

edited Oct 19 '16 at 10:28

Roman Marusyk

23,328
24
73
116

answered Oct 19 '16 at 10:10

Srini

51
1
4

score 1 · Answer 2 · answered Jul 16 '16 at 15:18

1

http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

You can check whether that site create toolbar & tablayout

also u can trying with removing "android:elevation" tag.

answered Jul 16 '16 at 15:18

Lovekesh

125
11

score 0 · Accepted Answer · answered Jul 16 '16 at 15:04

0

please update your style.xml with that

 <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>

answered Jul 16 '16 at 15:04

NIKHIL SONI

84
1
1

added all that to my apptheme, didnt change anything – zebleckDAMM Jul 16 '16 at 15:07
added an image of how the divider looks – zebleckDAMM Jul 16 '16 at 15:11
Please check out this example [link](http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/) – NIKHIL SONI Jul 16 '16 at 15:14

score 0 · Answer 4 · answered Mar 02 '20 at 12:18

Add app:elevation="0dp" in your AppBarLayout widget like this

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="0dp"
    android:theme="@style/NavStyle">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ToolbarStyle" />

</android.support.design.widget.AppBarLayout>

How do I remove the divider between Toolbar and TabLayout

4 Answers4