tablayout shadow/elevation for pre-lollipop

Question

I have a tablayout inside an AppBarLayout. I am trying to add a shadow view below the tabbarlayout for pre-lollipop versions. The shadow view shows up, however when I scroll down, the shadow view doesn't seem transparent. It look like as though there is a padding below tablayout, between the tabindicator and shadow. However if I use the same shadow view with just under a Toolbar, it seems to be transparent when I scroll up. Can someone tell me if there is anything different to add shadow for tablayouts?

main_layout-

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

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <include layout="@layout/include_coordinator_layout"/>

    </LinearLayout>

    <TextView
        android:id="@+id/mtext_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:visibility="gone"/>

    <Button
        android:id="@+id/mBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/mtext_view"
        android:text="@string/retry_button"
        android:visibility="gone"/>
</RelativeLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/white"
    android:fitsSystemWindows="true" />

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

And this is my include_coordinator_layout

<?xml version="1.0" encoding="utf-8"?>
 <android.support.design.widget.CoordinatorLayout  
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/main_content"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
       android:id="@+id/appbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

    <include
        android:id="@+id/toolbar"
        layout="@layout/tool_bar" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:background="@color/tab_layout_color"/>

    <View
        android:id="@+id/shadow_view"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/toolbar_shadow"
        />

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

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

This is my toolbar_shadow drawable.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#88333333"
        android:angle="90"/>
</shape>

Answer 1

I'm guessing you have your layout in a LinearLayout?

Either

Change LinearLayout to RelativeLayout and add android:layout_below="@+id/appbar", android:paddingTop="-5dp" and android:clipToPadding="false" to your ViewPager (or use ConstraintLayout and similar method), switch the order of the toolbar and view pager

or

Change it to a FrameLayout, reorder the views so that the ViewPager is first and then put android:layout_marginTop="@dimen/sizeOfToolBarAndTabsWithoutShadow" where the dimen is the set size of the toolbar & tabs (without shadow). You might want to do this, because I seem to remember some visual artefacts with some scrolling views and clipToPadding

Why?

Because the size of the AppBarLayout view includes your shadow, so any basic view group (LinearLayout) won't know how to lay the next view (your viewpager) out so that the shadow slightly overlaps the content - which has to be drawn last, so that the top of the view pager doesn't cover the shadow