Line coming between toolbar and Tabs

Question

How to remove the deep line between the toolbar and tablayout, I searched on the google someone said , add some elevation to the toolbar and tablayout ,I did but it not worked , after removing the elevation from the toolbar and tablyout ,it's also not working.Please help me out :

tablayout_xml:

<RelativeLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        app:tabGravity="fill"
        android:elevation="2dp"
        app:tabMode="fixed"

        app:font="Nexa Bold.otf"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/appbarColor"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"

        android:layout_below="@id/tab_layout"/>

</RelativeLayout>

activity_toolbar:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/container_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/rl"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <android.support.design.widget.AppBarLayout
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/appbarColor"
                    android:elevation="2dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="@dimen/_15sdp"
                        android:textStyle="bold"
                        android:textColor="#fff"
                        android:layout_gravity="center"
                        android:id="@+id/toolbar_title" />
                    <LinearLayout
                        android:id="@+id/clearllBtn"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_marginRight="5dp"
                        android:layout_gravity="right"
                        android:visibility="gone"
                        android:background="@drawable/toolbar_ripple"
                        android:gravity="center_vertical|center_horizontal">
                        <TextView

                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textSize="@dimen/appbar_txt_size"
                            android:text="Clear"
                            android:textColor="@color/white"

                            android:gravity="center"
                            android:textStyle="bold"
                            android:id="@+id/clear_btn"/>


                    </LinearLayout>


                </android.support.v7.widget.Toolbar>

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




            <FrameLayout
                android:layout_below="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:background="@color/faintwhite"
                android:id="@+id/frame_container">

            </FrameLayout>





        </RelativeLayout>


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


    <!-- Navigation Drawer-->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="@color/white"
       >

    </android.support.v7.widget.RecyclerView>

</android.support.v4.widget.DrawerLayout>

Vassell

Set android:elevation="0dp" for Toolbar. – Anthropolatry

#app:elevation="" – Spectrohelioscope

Answer 1

I had the same problem, i was using android:elevation="0dp" but it didn't work. To the AppBarLayout in xml, set app:elevation="0dp" instead of android:elevation="0dp".

Polard

Accept this answer – Spectrohelioscope

@Akshay Bhat , one supplementry question : Do you knw,how to change the font of the tab text. – Vassell

@AkshayBhat , stackoverflow say need to wait for 2 mint more to accept the answer :P – Vassell

Please refer below link for font change. Hope it helps : #31067765 – Doloresdolorimetry

Answer 2

I had same problem and used android:elevation="0dp" and app:elevation="0dp" but problem not solved.Then i changed the elevation of toolbar dynamically.By using this

getSupportActionBar().setElevation(0);

and it worked for me.

Shroudlaid

Answer 3

Remove your Relative Layouts and put the TabLayout inside the appbarlayout, below the toolbar, and remove all of the elevation people suggested to add. This is the right way to do it. If it doesn't work for you, I'll be glad to help.

Schatz

Thank you, this works for my case. I understand it's been a while since you answered this, however if you happen to read and remember - I'd like to ask why - why do we need to put content into app bar layout. It really works, no problem with that - but it's kind of counter intuitive. I was able to find samples with tabs, but my case is whole content. – Hearsay

Answer 4

Go to toolbar and set app:elevation="0dp" only in toolbar and app bar layout. Everything will work fine.

Pedantry

Answer 5

I try all the above methods but no one work for me !

Then i simply remove the AppBarLayout Widget from xml. It solve my problem

Causes Problem

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/app_theme_black_color"
        local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>

Solved Problem (Just remove the AppBarLayout)

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/app_theme_black_color"
        local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Share to improve.

Quadrant