How to create bouncable scrollview in android?

Question

How to create a bounce ScrollView in Android like iPhone?

Zomba

Answer 1

Add effect bounce to scrollview in android

Step 1: Create new file BounceScrollView in package com.base.view

public class BounceScrollView extends ScrollView
{
    private static final int MAX_Y_OVERSCROLL_DISTANCE = 200;

    private Context mContext;
    private int mMaxYOverscrollDistance;

    public BounceScrollView(Context context) 
    {
        super(context);
        mContext = context;
        initBounceScrollView();
    }

    public BounceScrollView(Context context, AttributeSet attrs) 
    {
        super(context, attrs);
        mContext = context;
        initBounceScrollView();
    }

    public BounceScrollView(Context context, AttributeSet attrs, int defStyle) 
    {
        super(context, attrs, defStyle);
        mContext = context;
        initBounceScrollView();
    }

    private void initBounceScrollView()
    {
        //get the density of the screen and do some maths with it on the max overscroll distance
        //variable so that you get similar behaviors no matter what the screen size

        final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
            final float density = metrics.density;

        mMaxYOverscrollDistance = (int) (density * MAX_Y_OVERSCROLL_DISTANCE);
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) 
    { 
        //This is where the magic happens, we have replaced the incoming maxOverScrollY with our own custom variable mMaxYOverscrollDistance; 
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, mMaxYOverscrollDistance, isTouchEvent);  
    }

}

Step 2: At your layout, please change

<ScrollView 
   android:id="@+id/list"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
/>

to

<com.base.view.BounceScrollView 
   android:id="@+id/list"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
/>

Yoder

hi, thanks for the solution, works great for me. Please update your code, u have a little mistake in: initBounceListView() should be initBounceScrollView() ;) – Chekhov

@Thien Thank you for the solution.Do you know how we add header and footer in this bouncescrollview? – Langlois

Is there any way to have bounce effect if content inside scroll view less than scroll view height? – Amati

is it possible for listview?? – Beadroll

@ArturMovsesyan use android:overScrollMode="always" setting for ScrollView – Hotchpotch

How to achieve bounce effect when scrollview is scrolled programmatically with fullScroll(View.FOCUS_DOWN); – Aparri

But this is not smooth when scrolling slowly. It strucks while pulling on top or bottom at some point when slowly done. – Pratt

@Shadow, I am facing the same issue, let me know if you get rid out from that. – Atalya

badly.. same me too facing the issue while pulling top or bottom it gets strucked.. couldn't get solution.. – Pratt

Answer 2

I have improved version of this answer: https://mcmap.net/q/473549/-how-to-create-bouncable-scrollview-in-android . So my version is (example for HorizontalScrollView):

public class HorizontalOverScrollView extends HorizontalScrollView {
    private static final int WIDTH_DEVIDER_OVERSCROLL_DISTANCE = 3;

    private TimeInterpolator mInterpolator;
    private int mMaxOverscrollDistance;
    private int mAnimTime;
    private long mStartTime;

    /**
     * Instantiates {@link HorizontalOverScrollView} object.
     */
    public HorizontalOverScrollView(final Context context) {
        super(context);
        init();
    }

    /**
     * Instantiates {@link HorizontalOverScrollView} object.
     */
    public HorizontalOverScrollView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /**
     * Instantiates {@link HorizontalOverScrollView} object.
     */
    public HorizontalOverScrollView(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        final int widthPixels = getContext().getResources().getDisplayMetrics().widthPixels;
        mMaxOverscrollDistance = widthPixels / WIDTH_DEVIDER_OVERSCROLL_DISTANCE;
        mAnimTime = getContext().getResources().getInteger(android.R.integer.config_mediumAnimTime);
        mInterpolator = new DecelerateInterpolator();
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        int overScrollDistance = mMaxOverscrollDistance;
        if (isTouchEvent) {
            mStartTime = AnimationUtils.currentAnimationTimeMillis();
        } else {
            final long elapsedTime = AnimationUtils.currentAnimationTimeMillis() - mStartTime;
            float interpolation = mInterpolator.getInterpolation((float) elapsedTime / mAnimTime);
            interpolation = interpolation > 1 ? 1 : interpolation;
            overScrollDistance -= overScrollDistance * interpolation;
            overScrollDistance = overScrollDistance < 0 ? 0 : overScrollDistance;
        }

        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, overScrollDistance, maxOverScrollY, isTouchEvent);
    }
}

Newmarket

Answer 3

It's called overscroll in Android.
See http://developer.android.com/reference/android/widget/OverScroller.html and (for example) http://developer.android.com/reference/android/widget/ListView.html#setOverscrollFooter(android.graphics.drawable.Drawable)

It's only available from API level 9 onward.
However, Samsung devices do seem to support overscroll natively in Android 2.2

Criticize

Android 2.2 is API level 8 - do you mean 2.1? – Dosage

Valid remark: should have read "API level 9"; I've edited accordingly – Criticize

Answer 4

Just use OverScrollDecoratorHelper

ScrollView scrollView = (ScrollView) findViewById(R.id.scroll_view);
OverScrollDecoratorHelper.setUpOverScroll(scrollView);

HorizontalScrollView horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontal_scroll_view);
OverScrollDecoratorHelper.setUpOverScroll(horizontalScrollView);

https://github.com/EverythingMe/overscroll-decor

Brochure

it works great except that it ignores layers and the elements in the ScrollView overlap everything else – Dovelike