How to hide toolbar after collapsing while recyclerView scrolling down

Question

How to hide toolbar after collapsing while recyclerView scrolling down, show toolbar when recyclerView scrolling up, and expand CollapsingToolbarLayout at the end of list? Now CollapsingToolbarLayout just collapse, and toolbar is showing all time when scrolling.

<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:id="@+id/coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".screens.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:minHeight="@dimen/actionBarHeight"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleTextAppearance="@style/TransparentText"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/toolbar_image"
                android:layout_width="match_parent"
                android:layout_height="180dp"
                android:adjustViewBounds="true"
                android:background="#229944"
                android:contentDescription="@null"
                android:scaleType="fitCenter"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/actionBarHeight"
                android:minHeight="@dimen/actionBarHeight"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:layout_scrollFlags="scroll" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Answer 1

This should work perfectly. Tested and working in API 17

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/careers_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".activity.CareersActivity"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:id="@+id/background"
                android:layout_width="match_parent"
                android:layout_height="256dp"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:src="@drawable/placeholder"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"
                android:fitsSystemWindows="true"
                app:titleTextColor="@color/main_color_white"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"/>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@android:color/white"
            app:tabIndicatorHeight="4dp"
            app:tabMode="fixed"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Answer 2

You may want to change the behaviour of the Toolbar. You can provide scroll behaviour by changing layout_scrollFlags.

app:layout_scrollFlags="scroll|enterAlways"

Remove pin and make this change in your Toolbar and it would work!

Answer 3

• Add android:fitsSystemWindows="true" in CoordinatorLayout .
• Remove app:layout_scrollFlags="scroll|enterAlwaysCollapsed" from Toolbar .

• Move TabLayout inside CollapsingToolbarLayout .

   <android.support.design.widget.AppBarLayout android:id="@+id/appbarlayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:minHeight="@dimen/actionBarHeight" app:contentScrim="@color/colorPrimary" app:expandedTitleTextAppearance="@style/TransparentText" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/toolbar_image" android:layout_width="match_parent" android:layout_height="180dp" android:adjustViewBounds="true" android:background="#229944" android:contentDescription="@null" android:scaleType="fitCenter"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="@dimen/actionBarHeight" android:minHeight="@dimen/actionBarHeight" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" app:layout_scrollFlags="scroll" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> 

Answer 4

For CollapsingToolbarLayout use scroll flags:

app:layout_scrollFlags="scroll|enterAllwaysCollapsed"

this flag combination will disappear toolbar while scrolling down. And CollapsingToolbarLayout will expand fully when you scroll to top of the list.

And no need to remove app:layout_collapseMode="pin" from Toolbar , because collapseMode flags are to define behavior and placement of views inside CollapsingToolbarLayout and will not effect actual collapsing and expansion of CollapsingToolbarLayout .