CollapsingToolbarLayout expand only when at the top

Question

I have some problems with AppBarLayout and CollapsingToolbarLayout. This is what currently happens:

https://www.youtube.com/watch?v=z4yD8rmjSjU

The downwards scrolling motion is exactly what I want. However when I scroll up again, the orange bar should appear immediately (which it does), but I want the ImageView to start appearing only when the user has scrolled to the very top. Can anyone help me to achieve this effect?

This is my layout xml:

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

    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">

        <TextView
                android:text="ImageView"
                android:textSize="20sp"
                android:textColor="@android:color/white"
                android:gravity="center"
                android:layout_marginTop="56dp"
                android:layout_width="match_parent"
                android:layout_height="145dp"
                app:layout_collapseMode="parallax"
                android:background="#444"/>

        <TextView
                android:text="Top bar"
                android:textColor="@android:color/white"
                android:gravity="center_vertical"
                android:paddingStart="16dp"
                android:paddingEnd="16dp"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:background="#ff8000"
                app:layout_collapseMode="pin"/>

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

    <TextView
            android:text="Bottom bar"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:layout_width="match_parent"
            android:textColor="@android:color/black"
            android:layout_height="50dp"
            android:background="#ddd"
            app:layout_scrollFlags="enterAlways"/>


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

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

Answer 1

I ended up moving the orange bar out of the CollapsingToolbarLayout and setting an OnOffsetChangedListener that changes the translationY of the top bar on the AppBarLayout.

Setting the OnOffsetChangedListener:

app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->

    topbar.translationY = Math.min(image.height.toFloat(),  - offset.toFloat())

})

Layout:

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:id="@+id/topbar"
            app:elevation="8dp"
            android:elevation="8dp"
            android:background="#ff8000"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Top bar"
            android:textColor="@android:color/white"
            app:layout_scrollFlags="scroll|enterAlways" />

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

        <TextView
                android:layout_width="match_parent"
                android:layout_height="145dp"
                android:background="#444"
                android:gravity="center"
                android:text="ImageView"
                android:textColor="@android:color/white"
                android:textSize="20sp"
                app:layout_collapseMode="parallax" />


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

    <TextView
            android:id="@+id/bottombar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:elevation="8dp"
            android:elevation="8dp"
            android:background="#ddd"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Bottom bar"
            android:textColor="@android:color/black"
            app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>

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

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

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

Answer 2

There are lots of effects on the scrolling behavior that can be achieved by setting different layout_scrollFlags. In your case, I think the flag you want is enterAlwaysCollapsed. Add the flag along with enterAlways instead of replacing all the flags.

scroll will make the toolbar scroll like the rest of the content, enterAlways will make the toolbar AND the rest of the CollapsingToolbarLayout to pop back immediately after scroll up, whereas enterAlwaysCollapsed only expands the CollapsingToolbarLayout after the page is scrolled all the way to the top.

Here's the effect that enterAlwaysCollapsed achieves.