How to make a gradient shape stay behind CollapsingToolbarLayout title

Question

I've been playing around with Chris Bane's Cheesesquare example application regarding Collapsing Toolbar Layout and I'm having trouble adding a gradient behind the title on a collapsing toolbar so the title remains readable even if the backdrop is bright.

I've seen one solution here on stackoverflow that deals with this in a way.

That solution places the gradient "attached" to the image itself instead of the bottom of the Collapsing toolbar. What will happen is, as you scroll down, that gradient will disappear with the image as it parallaxes out of sight. I want to make the gradient follow the toolbar as it collapses (and keep the parallax effect).

This short video should make the issue 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 very welcome!

Answer 1

Silly me, I came back to the issue and found a solution. @whaleswallace made me realize CollapsingToolBarLayout extends FrameLayout itself (so you don't need to wrap the image and gradient view in one) so it was a matter of adding 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/>

The image will be "parallaxing" in and out and the gradient will keep anchored to the bottom of the 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>