Smooth ImageView scroll in CoordinatorLayout

Question

I have a problem with smooth scrolling in CoordinatorLayout in my app.

I trying to achieve this: http://wstaw.org/m/2015/10/02/google-scroll.gif

but my best result is: http://wstaw.org/m/2015/10/02/my-scroll.gif

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:isScrollContainer="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="@dimen/detail_image_height"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <RelativeLayout
            android:id="@+id/relativeLayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:background="?attr/colorPrimary"
            android:minHeight="80dp">

            (...)

        </RelativeLayout>

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            (...)

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

What am I doing wrong? Thanks in advance.

check it i have found one nice library http://stackoverflow.com/a/34947835/4395114 — Mansukh Ahir, Jan 22 '16 at 13:37

score 1 · Answer 1 · edited May 23 '17 at 10:29

I was not able to completely fix this behavior, but I did find something that helped with scrolling up. It's based on this answer in an SO thread about flinging with CoordinatorLayout. First, create a class that extends AppBarLayout.Behavior.

/**
 * This "fixes" the weird scroll behavior with CoordinatorLayouts with NestedScrollViews when scrolling up.
 * This is based on https://stackoverflow.com/questions/30923889/flinging-with-recyclerview-appbarlayout
 */
@SuppressWarnings("unused")
public class CoordinatorFlingBehavior extends AppBarLayout.Behavior {
    private static final String TAG = "CoordinatorFling";

    public CoordinatorFlingBehavior() {
    }

    public CoordinatorFlingBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, float velocityX, float velocityY, boolean consumed) {
        // Passing false for consumed will make the AppBarLayout fling everything and pull down the expandable stuff
        if (target instanceof NestedScrollView && velocityY < 0) {
            final NestedScrollView scrollView = (NestedScrollView) target;
            int scrollY = scrollView.getScrollY();

            // Note the ! in front
            consumed = !(scrollY < target.getContext().getResources().getDimensionPixelSize(R.dimen.flingThreshold) // if below threshold, fling
                || isScrollingUpFast(scrollY, velocityY)); // Or if moving quickly, fling

            Log.v(TAG, "onNestedFling: scrollY = " + scrollY + ", velocityY = " + velocityY + ", flinging = " + !consumed);
        }
        return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
    }

    /**
     * This uses the log of the velocity because constants make it too easy to uncouple the CoordinatorLayout - the AppBarLayout and the NestedScrollView - when scrollPosition is small.
     *
     * @param scrollPosition - of the NestedScrollView target
     * @param velocityY      - Y velocity. Should be negative, because scrolling up is negative. However, a positive value won't crash this method.
     * @return true if scrolling up fast
     */
    private boolean isScrollingUpFast(int scrollPosition, float velocityY) {
        float positiveVelocityY = Math.abs(velocityY);

        double calculation = scrollPosition * Math.log(positiveVelocityY);

        return positiveVelocityY > calculation;
    }

}

Then, add the following line to your AppBarLayout's xml block (replacing companyname and packages with whatever you use):

    app:layout_behavior="com.companyname.packages.CoordinatorFlingBehavior"

What value did you use in R.dimen.flingThreshold? – Julio_oa Feb 17 '16 at 18:48 — Julio_oa, Feb 17 '16 at 18:48

Smooth ImageView scroll in CoordinatorLayout

1 Answers1