How to make the gradient shape stay behind CollapsingToolbarLayout title

Question

I played with the Chris Bane Cheesesquare sample application regarding minimizing the toolbar layout, and I had problems adding a gradient behind the title on the minimized toolbar so that the title remains legible even if the background is bright.

I saw one solution, https://stackoverflow.com/a/3/320816/ which is related to this.

This solution places the gradient “attached” to the image itself, and not to the bottom of the Minimize panel. What happens when you scroll down, this gradient will disappear with the image as it parallaxes out of sight. I want the gradient to follow the toolbar when it collapses (and retains the parallax effect).

This short video should make the problem clear: https://vid.me/J225

activity_contact_detail.xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    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="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/woman"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:layout_gravity="bottom"
                android:background="@drawable/backdrop_bg"/>
        </FrameLayout>


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

...

<View
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="@drawable/backdrop_bg"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"/>

backdrop_bg.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#0000"
        android:startColor="#303F9F"
        android:type="linear"/>
    <corners android:radius="0dp"/>
</shape>

Any help is greatly appreciated!

Answer 1

, . @whaleswallace , CollapsingToolBarLayout FrameLayout ( ), android: layout_gravity = "center_horizontal | bottom to the gradient view:

<android.support.design.widget.CollapsingToolbarLayout
        ....>

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="72dp"
                android:background="@drawable/backdrop_bg"
                android:layout_gravity="center_horizontal|bottom"/>

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

"", AppBarLayout.

Answer 2

<?xml version="1.0" encoding="utf-8"?>enter code here

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/btn_pri_action">

    <android.support.design.widget.AppBarLayout android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout   `     `    
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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


                <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax" />
                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/backdrop_bg"/>
            </FrameLayout>


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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_action_share_white"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>



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


</RelativeLayout>