Search code examples
androidandroid-coordinatorlayoutandroid-appbarlayout

fling with AppBarLayout and ViewPager(recycler view)


PIC1

enter image description here

Area1 is an AppBarLayout, ViewPager(recycler view) is below the AppBarLayout.

When I touch the Area2 to scroll up slowly or quickly, it works fine. But When I touch Area1 to scroll up quickly, sometimes, the view scroll up then scroll down automatically.

support:26.0.2(26.1.0/ 27.0.2)

here's my layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        app:elevation="0dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:text="TEST"
            android:textColor="@android:color/holo_orange_dark"
            android:textSize="64sp"
            app:layout_scrollFlags="scroll|enterAlways"/>
        <!--category-->
        <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:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

I use support 23.4.0 instead of 26.0.2, the layouts scroll fine.


Solution

  • This is only happening when AppBar is scrolled/flung while the NestedScrollView(or RecyclerView) has not yet finish flinging.

    Solution: Extend AppBar's default Behavior and block the call for AppBar.Behavior's onNestedPreScroll() and onNestedScroll() when AppBar is touched while NestedScroll hasn't stopped yet.

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int type) {
        if (type == TYPE_FLING) {
            isFlinging = true;
        }
        if (!shouldBlockNestedScroll) {
            super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
        }
    }
    
    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {
        if (!shouldBlockNestedScroll) {
            super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);
        }
    }
    

    then use it on the layout:

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        ...
        app:layout_behavior="com.mypackage.NoBounceBehavior"/>
    

    Reference for full code: https://gist.github.com/ampatron/9d56ea401094f67196f407f82f14551a