Toolbar with alpha gradient in Android

1

How a gradient can be applied to the Toolbar but only when it is extended if it belongs within a CollapsingToolbarLayout .

That is, I have a Toolbar that below it an image is displayed, which expands to the Statusbar and I want to highlight the controls that are shown above the image, the guide of Google Material Design style says you should use a gradient, dark to transparent.

    
asked by Webserveis 15.03.2017 в 20:29
source

1 answer

0

I have solved by overlaying the gradient on top of the image using a RelativeLayout

Before

After

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        app:titleEnabled="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/image_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:background="@drawable/about_background_header"
                android:contentDescription="@string/desc_empty"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/scrim_top_linear" />

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Resource for gradient scrim_top_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
        android:type="linear"
        android:centerX="40%"
        android:startColor="#99000000"
        android:centerColor="#00474747"
        android:endColor="#00000000"
        android:angle="270"/>
</shape>
    
answered by 16.03.2017 / 09:54
source