Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: AppBarLayout gradient background

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:

enter image description here

But on lollipop this is what is displayed:

weird upside down trapezoid in the background

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>
like image 957
neits Avatar asked Jun 23 '15 15:06

neits


1 Answers

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.

like image 101
DHuei Avatar answered Oct 19 '22 11:10

DHuei