当使用协调器布局滚动我的recyclerview时，如何提供自动隐藏/显示工具栏？

Question

This is my layout file

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.moskart.mosfake.activity.MainActivity">

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

       <android.support.design.widget.AppBarLayout
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           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:minHeight="?attr/actionBarSize"
               android:fitsSystemWindows="true"
               app:contentScrim="?attr/colorPrimary"
               app:layout_scrollFlags="scroll|enterAlways"
               >

               <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                   xmlns:local="http://schemas.android.com/apk/res-auto"
                   android:id="@+id/toolbar"
                   android:layout_width="match_parent"
                   android:layout_height="?attr/actionBarSize"
                   android:minHeight="?attr/actionBarSize"
                   android:background="?attr/colorPrimary"
                   local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                   local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                   app:layout_collapseMode="pin"
                   />
           </android.support.design.widget.CollapsingToolbarLayout>

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


       <FrameLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
           >

           <FrameLayout
               android:id="@+id/fragment_placeholder"
               android:layout_width="match_parent"
               android:layout_height="match_parent">
           </FrameLayout>

           <View
               android:layout_width="match_parent"
               android:layout_height="5dp"
               android:background="@drawable/toolbar_dropshadow" />

       </FrameLayout>


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

   <android.support.design.widget.NavigationView
       android:id="@+id/navigation"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:headerLayout="@layout/navigation_drawer_header"
       app:itemIconTint="@color/navItemIconTintColor"
       app:itemTextColor="@color/navItemTextColor"
       app:menu="@menu/menu_navigation_drawer" />

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

I set app:layout_scrollFlags for my CollapsingToolbarLayout to scroll|enterAlways and expected that toolbar will work like in gapps (eg Google Play or Google Magazine) with auto-hide/show like on this sample:

Google Magazine

But I only got scrolling toolbar that does not retract automatically, but only if user completely scrolled it himself. See sample: my app

Here is my fragment with recyclerview, which I replace with fragment_placeholder

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.moskart.mosfake.fragment.CategorySelectionFragment"
    >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/card_horizontal_margin"
        android:paddingRight="@dimen/card_horizontal_margin"
        />

</LinearLayout>

Thanks for advice!

Answer 1

You should measure if the bottom and top offset of the AppBarLayout is offset for more than the half the the height of the AppBarLayout and user has released the scroll. When this condition is fulfilled just start animating the translationY of the Toolbar or the offsetting of the AppBarLayout .

This could be achieved with custom CoordinatorLayout.Behavor or with inheriting existing AppBarLayout.Behaviour and tweaking it to do so.

Answer 2

i think you want to do like this

take a look of this library

https://github.com/ksoichiro/Android-ObservableScrollView

here is the example about how to implement it

https://snow.dog/blog/material-design-flexible-space-header-with-image/

Answer 3

You need to use NestedScrollView

<android.support.v4.widget.NestedScrollView ...>
<LinearLayout ...>
    //Your Code Here
</LinearLayout>

Check this Example