Android: AppBarLayout gradient background

Question

I tried implementing a toolbar with gradient background (from black to transparent). The toolbar is inside an AppBarLayout, which is inside a CoordinatorLayour, because I want the Toolbar to slide off the screen when scrolling the screen (hance the scroll|enterAlways scroll flags). This works perfectly fine for pre-lollipop versions and looks like this:

But on lollipop this is what is displayed:

I tried other combinations of backgrounds on the toolbar and appbarlayout to get the toolbar to have the gradient background, but everything produces the same result. I tried searching for similar problems and found none.

<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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient">

        <android.support.v7.widget.Toolbar
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:background="@android:color/transparent"
            app:layout_scrollFlags="scroll|enterAlways">

            ...

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Answer 1

AppBarLayout forces an elevation. Since the toolbar is inside AppBarLayout and the toolbar is transparent, the side and bottom shadow of AppBarLayout became obvious.

Include app:elevation="0dp" inside your AppBarLayout. Hope it helps.

Answer 2

Put Toolbar and TabLayout inside the LinearLayout and set background attributes for LinearLayout as below code. It's worked and I used this code for my app.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:theme="@style/AppTheme.AppBarOverlay">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/appbar_bg">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:background="@android:color/transparent"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

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

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

    </LinearLayout>

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