How to hide toolbar after minimizing while recyclerView scrolls down

Question

How to hide the toolbar after minimizing while scrolling the recyclerView, show the toolbar when scrolling through the recyclerView and expand the CollapsingToolbarLayout at the end of the list? Now the CollapsingToolbarLayout just collapses, and the toolbar shows the entire scroll time.

<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 just fine. Tested and works 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 can change the behavior of the toolbar. You can provide scroll behavior by changing layout_scrollFlags.

 app:layout_scrollFlags="scroll|enterAlways" 

Remove the pin and make this change in the toolbar and it will work!

Answer 3

• Add android:fitsSystemWindows="true" to CoordinatorLayout .
• Remove app:layout_scrollFlags="scroll|enterAlwaysCollapsed" from the 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 the scroll flags:

 app:layout_scrollFlags="scroll|enterAllwaysCollapsed" 

this combination of flags will disappear from the toolbar when scrolling down. And CollapsingToolbarLayout will fully expand when you go to the top of the list.

And there is no need to remove app:layout_collapseMode="pin" from the Toolbar , because the collapseMode flags should determine the behavior and placement of views inside the CollapsingToolbarLayout and will not affect the actual collapse and extension of the CollapsingToolbarLayout .