CollapsingToolbarLayout and hide toolbar while scrolling

Question

I am trying to create some combined layout using CoordinatorLayout and also CollapsingToolbarLayout.

In the first state, when we on the most top page, and didn't scrolled yet, I want the toolbar to expend as shown below (yes, i did it):

In the second state, when starting to scroll down, the image and toolbar should disappear, as shown below (only tab will show):

And in the last state once I am at some point in the list (but not the top of the list) I want to start scrolling up, once I start scrolling up I want the toolbar (and not the expended one with the image) to start whowing, as shown below (if didn't reaches the top of the list, the image will not show, only the toolbar):

I was able to achive the the first state, but the other 2 state are problematic, once toolbar is implemented inside CollapsingToolbarLayout, the flexability of what I can do with it outside of CollapsingToolbarLayout component is not clear. I can't make the toolbar hide, if I do so, then it will only be shown once I reaches the top.

Anyways, my current XML (showing below) is in state where the first picture is implemented, but once I start scrolling down, the toolbar stay at the top and do not hide. Note: I must tell the toolbar to stay "pin" because if I didn't then the information inside the toolbar disappear, and only an empty toolbar will show (that's for another post, but it still interesting to know why this happen?).

here is my current xml:

    <android.support.design.widget.CoordinatorLayout
    android:id="@+id/benefit_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_height="192dp"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"

                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"

                />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/black"
            app:tabIndicatorHeight="4dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/benefit_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayou

score 48 · Accepted Answer · edited Sep 14 '18 at 10:39

I have fixed the issue, just to clerify, I wanted my Toolbar to be able to expand with a paralex image once it reaches the top, but I also wanted the toolbar to disappear if scrolling down, and show itself again (without the paralex image) once I scroll up. the paralex image effect should only displayed if I reaches the top.

So basically the solution is, change the component CollapsingToolbarLayout with the following attribute:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

and also change toolbar component with the following attribute

android:minHeight="?attr/actionBarSize"

regarding my paralex effect image (which is my toolbar_search_container) I shouldn't add any layout_scrollFlags to it.

So why is it working? To understand it, you need to know what is enterAlwaysCollapsed, The enterAlwaysCollapsed effects views that added the minHeight attribute. this means, every child of CollapsingToolbarLayout which have minHeight will be effected by this attribute. So my toolbar will be effected.

enterAlwaysCollapsed attribute definition in simple words:

Assuming enterAlways is declared and you have specified a minHeight, you can also specify enterAlwaysCollapsed. When this setting is used, your view will only appear at this minimum height. Only when scrolling reaches to the top will the view expand to its full height..."

Well, isn't this exactly what we want? (do not answer this retorical question ;) )

One more thing to add, the parallax component (toolbar_search_container) is depends on the toolbar to expand, and because the toolbar will expand only when it reaches the top, then this is all just working great!

The new code is :

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/benefit_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

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

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_height="192dp"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"
                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                android:fitsSystemWindows="true"
                />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/black"
            app:tabIndicatorHeight="4dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/benefit_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayout>

Many thanks!!! I found this answer soooo hard, because it's hard to explain the problem to google. I've tried pretty much all possibilities but missed using ALL 3 attributes. Should let more people know the answer!! — Zijian Wang, Oct 24 '16 at 10:24
I did as you stated, but when I scroll up, my CollapsingToolbarLayout wont appear untill I scroll up to the top. Can you suggest anything? — Sermilion, Feb 11 '17 at 16:49
Hey Winter! Could you post your full xml here? Without the - Tags? Thank you!!! — romaneso, Apr 07 '17 at 16:01
I've been searching this for years now. Thank you, really. To make it more smooth add snap scrollFlags, and also app:contentScrim to change toolbar color when not fully expanded. — Dark Leonhart, Jul 25 '17 at 16:26

score 0 · Answer 2 · answered Oct 07 '20 at 21:03

0

Add this line of code to your CollapsingToolbarLayout

app:layout_scrollFlags="scroll|snap|enterAlways|enterAlwaysCollapsed"

answered Oct 07 '20 at 21:03

Kamal Panara

103
1
11

CollapsingToolbarLayout and hide toolbar while scrolling

2 Answers2

Linked