Elevation not working on TabLayout

Question

I am setting elevation on the TabLayout inside a ViewPager but it is not showing at all. I tried a lot of answers here on stackoverflow but couldn't solve the problem. Setting android:clipToPadding="false" in the CoordinatorLayout does not solve the problem either. Any help would be appreciated. Here is the xml of the layout that I am using but getting now elevation:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/statusBarBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:clipToPadding="false" >

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false" >

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

    </ScrollView>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:elevation="3dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" />

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

Answer 1

Change the AppBarLayout android:elevation to 0dp and change TabLayout android:elevation to 16dp

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/statusBarBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:elevation="0dp" >

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false" >

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

    </ScrollView>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            android:elevation="16dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" />

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

Answer 2

• To make the shadow visible, you have to set a background on your TabLayout. It can be the same color as your window background (as long as it's a solid color with no alpha).

• Also you have to give it Tablayout margin to see elevation. minimum margin should be elevation you give.

  android.support.design.widget.TabLayout ... android:elevation="6dp" android:margin="10dp" // margin > elevation android:background="@color/white" />

Answer 3

Use CardView elevation; Ye maybe its byckle, but its work for me

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="0dp"
        app:cardElevation="5dp">
        <android.support.design.widget.TabLayout
                 android:id="@+id/tab"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 />
</android.support.v7.widget.CardView>

Answer 4

You have couple of problems with your layout:

1. change app:elevation="3dp" -> android:elevation="3dp"
2. add android:background="@color/colorPrimary" to your TabLayout
3. Add android:paddingBottom="3dp" to your AppBarLayout

The main idea is that your shadow will not show if the view background is transparent or the parent view is clipping your shadow.

You will still have some problems to solve, but is a start.

Answer 5

change app:elevation="3dp" to android:elevation="3dp"

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
         change ---->  android:elevation="3dp" />