How to minimize an AppBarLayout animation without clicking on content similar to WhatsApp Android?

Question

How to minimize a toolbar independently when scrolling a RecyclerView in a ViewPager fragment without a collapse effect affecting the ViewPager?

What I mean is that in WhatsApp Android, if you scroll through any of the 3 main lists, the toolbar does not move with the content, instead it has an independent axis of animation, which is very smooth and does not advance the presentation of the content, you You can see if I am moving up or down a bit, RecycleView is not pushed by the toolbar animation, it moves independently:

I have the following hierarchy in the MainActivity layout:

<CoordinatorLayout> <AppBarLayout> <Toolbar/> <TabLayout/> </AppBarLayout> <ViewPager> <!-- Fragments with RecyclerView --> </ViewPager> </CoordinatorLayout> 

activity_main.xml

  <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|snap|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> </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.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:clickable="true" app:layout_behavior="ScrollingFABBehavior" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout> 

And the content of the fragment is a RecyclerView:

 <FrameLayout 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" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context="fragments.ConversationsFragment"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent"/> </FrameLayout> 

But when I scroll through the RecyclerView, if I stop halfway, the toolbar pushes the fragment up or down sharply, instead of animating independently, like WhatsApp:

In this example, this is even more extreme:

And if I don’t add the anchor as a scroll flag, the toolbar stops halfway or pushes the fragment, depending on how far I scroll.

 app:layout_scrollFlags="scroll|snap|enterAlways" 

Any way to achieve this using CoordinatorLayout? If not, any pointers will be appreciated.

Answer 1

Use NestedScrollView to achieve the same whatsapp value.

 <android.support.v4.widget.NestedScrollView android:id="@+id/scroll" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v4.widget.NestedScrollView>