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

Dmide · Answer 1 · 2019-03-25T09:00:42.147

Customisation of CoordinatorLayout behaviour is hard. You want the orange bar to appear immediately but ImageView only after the content is scrolled to the top, but these views belong to one parent CollapsingToolbarLayout and both get either the behaviour you have now or the opposite with enterAlwaysCollapsed flag. I see no way to separate the behaviour for these views without messing with CoordinatorLayout/CollapsingToolbarLayout Java API.

If simpler behaviour is not an option and noone here points out a simple solution, I suggest trying a relatively new MotionLayout instead of dancing with CollapsingToolbarLayout internals, you will save yourself a lot of time in the end. It will be a little harder at start but it provides clear ways for customisation. Here's a very good article that shows how to build a UX similar to CoordinatorLayout but using MotionLayout. And the second part of this article with some additional customisations.

score 5 · Accepted Answer · answered Mar 25 '19 at 09:04

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>

Jack · Answer 3 · 2019-03-27T04:05:11.180

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.

it works for me! enterAlwaysCollapsed is just what i need – Andy Jul 24 '20 at 21:08 — Andy, Jul 24 '20 at 21:08

score 0 · Answer 4 · answered Mar 25 '19 at 06:09

I think you can manage that from your code ,I have tried that by simply detecting behavior of layout

 app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

        if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
        {
            //  Collapsed


        }
        else
        {
            //Expanded


        }
    }
});

score 0 · Answer 5 · answered Mar 25 '19 at 07:19

Try this @Mark.I got the scroll you showed in the Video

<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/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

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

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

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        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>
</android.support.design.widget.CoordinatorLayout>

The image still appears immediately when you start scrolling up again. It should only show up when the user is back at the top. — Mark Buikema, Mar 25 '19 at 08:37
So you want the image to be hidden when the user scrolls up? @MarkBuikema — Brahma Datta, Mar 25 '19 at 08:56
Yes, the image should be hidden until the user has scrolled all the way to the top — Mark Buikema, Mar 25 '19 at 08:57
I have made the feature the same as the video. The image won't appear until the top view completely visible to the user. After it is visible then image view will appear. Or am I missing something?@MarkBuikema.I can record the feature if you want? — Brahma Datta, Mar 25 '19 at 09:18
I have answered my own question, check it out. The image should not appear until the list is at the top. — Mark Buikema, Mar 25 '19 at 09:54

CollapsingToolbarLayout expand only when at the top

5 Answers5

Linked