7

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

What I mean is that in WhatsApp Android if you scroll any of the 3 main lists the toolbar doesn't move with the content, instead it has an independent animation axis, which is very smooth and doesn't push the content view. You can see if I move up or down just a little, the RecycleView isn't pushed by the Toolbar collapse animation, it moves independently:

enter image description here

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 a 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 the RecyclerView, if I stop midway the Toolbar is pushing the fragment up or down abruptly, instead of moving animated independently similar to WhatsApp: enter image description here

In this example it is even more extreme:

enter image description here

And if I don't add snap as a scroll flag, the toolbar stops midway or pushes the fragment as well, depending how far I scrolled.

app:layout_scrollFlags="scroll|snap|enterAlways"

Any way to accomplish that using CoordinatorLayout? If not, any pointers would be appreciated.

AlfredBaudisch
  • 760
  • 1
  • 11
  • 20
  • Did you ever find the answer to this problem? This has been bugging me recently. – Andrew Mar 26 '16 at 06:28
  • @Andrew I didn't worry about the issue anymore, ended up moving to finishing the whole app design first. But I'll take a look at it sometime later again. – AlfredBaudisch Mar 26 '16 at 12:54
  • nested scroll will work here....take this as reference https://github.com/chrisbanes/cheesesquare – GvSharma Jun 13 '16 at 06:28
  • You can find a solution here. http://stackoverflow.com/questions/33737589/how-to-make-recycler-view-not-scroll-when-appbar-snaps This works well for me. – Frosty Oct 14 '16 at 05:53
  • No mentioned solutions here work for me. Did anyone find an alternative solution? – treesoft Nov 19 '17 at 13:43

1 Answers1

0

Use NestedScrollView to achieve alike whatsapp,

<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>
Mani TheEmperor
  • 1