CollapsingToolbarLayout like PlayStore app

Question

I am trying to have the same behavior as the PlayStore app in terms of scrolling. Here is the gif of what I want to achieve https://giphy.com/gifs/MymB51M84gpdS.

What I have is the following:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/height"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            style="@style/match"
            android:minHeight="0dp"
            android:fitsSystemWindows="true"
          app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

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

                <ImageView
                    style="@style/match"
                    android:scaleType="centerCrop"
                    tools:ignore="ContentDescription"/>

                <TextView
                    android:id="@+id/tv"
                    style="@style/matchwrap"
                    android:layout_alignParentBottom="true"/>

                <TextView
                    style="@style/matchwrap"
                    android:layout_above="@id/tv"
                    android:maxLines="2"/>
            </RelativeLayout>

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

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

    <android.support.v4.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        style="@style/match">

    <LinearLayout style="@style/match"/>
</android.support.v4.widget.NestedScrollView>

<FrameLayout>
<Button/>
</FrameLayout>

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

How do I achieve the PlayStore like scrolling behavior?

EDIT: My question is more about when the screen is being pulled down, the ToolBar appears and then the image is shown. I want my behavior to match that.

score 0 · Answer 1 · edited May 23 '17 at 12:26

Similiar question: collapsing toolbar layout like google play store

There is an ImageView with parallax collapseMode and of course, they pinned the Toolbar but after collapsing the CollapsingToolbarLayout, Toolbar is going to be hide.

Something like this:

<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:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/seffafCollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

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

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

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

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

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

Result:

If you notice the PlayStore, when pulling down, the toolbar appears and when pulled more, the image then appears. I want more like that. Sorry my question was not clear. its edited now. — Intern, Feb 17 '16 at 18:26
Did you see this answer from above link i've put? : http://stackoverflow.com/a/34652303/4409113 — ʍѳђઽ૯ท, Feb 17 '16 at 19:35

CollapsingToolbarLayout like PlayStore app

1 Answers1

Linked