CollapsingToolbarLayout image to persist when scrolling to top like the Play Store app

Question

I have a CollapsingToolbarLayout with an image and text in it. Below is the layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/Root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        custom:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_image_height"
        android:fitsSystemWindows="true"
        android:background="@color/red"
        custom:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            style="@style/HmatchWmatch"
            custom:contentScrim="@color/red"
            custom:statusBarScrim="@color/primary_dark"
            custom:expandedTitleTextAppearance="@android:color/transparent"
            android:fitsSystemWindows="true"
            custom:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                style="@style/HmatchWmatch"
                android:fitsSystemWindows="true"
                custom:layout_collapseMode="parallax"
                custom:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/toolbar_iv"
                    style="@style/HmatchWmatch"
                    android:scaleType="centerCrop"
                    tools:ignore="ContentDescription"/>

                <TextView
                    android:id="@+id/toolbar_title"
                    style="@style/TextLarge.Pad"
                    android:layout_width="match_parent"
                    android:layout_alignParentBottom="true"
                    android:paddingBottom="@dimen/vpad"
                    android:background="@drawable/appbar_title_bg"
                    android:textColor="@android:color/white"
                    android:maxLines="2"/>

                <TextView
                    android:id="@+id/toolbar_dm"
                    style="@style/TextSmall.Pad"
                    android:layout_width="match_parent"
                    android:layout_above="@id/toolbar_title"
                    android:paddingTop="@dimen/vpad"
                    android:background="@drawable/appbar_dm_bg"
                    android:textColor="@android:color/white"
                    android:maxLines="2"/>
            </RelativeLayout>

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar"/>

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

    <fragment
        android:id="@+id/fragment"
        android:name="com.Fragment"
        style="@style/HmatchWmatch"
        custom:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <Button
        android:id="@+id/sign_button"
        style="@style/TextMedium"
        android:layout_width="match_parent"
        android:text="@string/sign_button_text"
        android:textColor="@android:color/white"/>

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

And below is the layout for the toolbar:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/change_red"
    custom:layout_scrollFlags="scroll|enterAlways"
    custom:layout_collapseMode="pin"
    tools:ignore="Overdraw"/>

When scrolling up, the image disappears and it becomes the toolbar which is pinned at the top. What I want to achieve is like in the Play Store app, when scrolling up in a particular app, the image disappears when scrolled up and the toolbar appears in the screen when scrolled down again. How can I achieve that in my case?

My problem is that I want the Appbar to scroll off the screen completely when scrolled up and when scrolling down again, the toolbar should appear.

Answer 1

I have tried various method but I don't think nothing helped to implement the exact way of Play Store animation and design (using design library)! Out of all the following matches almost similar. This is almost similar to what @MicheleLacorte suggested in comment!

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="idoandroid.scroll.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:fitsSystemWindows="true"
               android:scaleType="centerCrop"
               android:src="@drawable/background"
               app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?android:attr/actionBarSize"
               app:layout_collapseMode="pin"
               app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <include layout="@layout/content_scrolling"/>

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

In case if you want the exact same implementation then you have to look into some third party libraries! Just giving the link for some of third party libs in case if you are interested!