Android: Listview's bounce to scrollview

Question

Any way of adding ListView's bounce effect to regular scrollview? By bounce I mean the rubber band like effect when you hit the bottom of the list.

Enterprising

Answer 1

By the looks of things in the ScrollView API you should be able to override the onOverScrolled() method if you create a custom view that extends the ScrollView class. After doing a quick Google search I came across this link and it looks as if this is what you are trying to do... I do believe this method was added in Android 2.3.1 though so you will be limited to devices running that.

Vying

Answer 2

Add effect bounce to listview in android

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

public class BounceListView extends ListView
{
    private static final int MAX_Y_OVERSCROLL_DISTANCE = 200;

    private Context mContext;
    private int mMaxYOverscrollDistance;

    public BounceListView(Context context) 
    {
        super(context);
        mContext = context;
        initBounceListView();
    }

    public BounceListView(Context context, AttributeSet attrs) 
    {
        super(context, attrs);
        mContext = context;
        initBounceListView();
    }

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

    private void initBounceListView()
    {
        //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

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

to

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

Forestay

Thanks for your solution. But this only works when overflow happened. – Hypophosphate

Does not working as I want. ListView is stretching, but it hasn't rubber effect - scrolling is locked when I let go the ListView. – Rouvin

overScrollBy doesn't triger on 2.3 =/ – Paddy

@ThienNguyen fortunally (for me), that was what I was looking for. Thanks for the tip. – Caoutchouc

It is a bad practice to set the height of a list view to wrap_content https://mcmap.net/q/903393/-height-of-listview-fills-the-whole-screen-although-set-as-wrap_content – Tensimeter

nice solution but there is a small bug which is some times when i release my finger up the list view stack on its place any idea how to fix this? – Manfred

Also see this answer https://mcmap.net/q/473549/-how-to-create-bouncable-scrollview-in-android , we can improve behavior of bounce effect. – Zwinglian

Answer 3

I found the best implementation of BounceListView (under LGPL license). Here it is: https://github.com/Larphoid/android-Overscroll-ListView

Rouvin

this BounceListView class does seem to work well, however, when items first load you are unable to see them. You have to scroll on the listview for the items to display. You have solution for that? – Deckert

Answer 4

You probably have a customized Samsung device. You should know that the bounce effect is not the default behavior of the Android OS, it's something introduced by Samsung (and it's poorly implemented as well, they should've made the ScrollView behave the same). Overscroll support was introduced in Android 2.3, and the default behavior is not bouncing, instead it's a glow of light with the intensity directly proportional to the scroll speed / "force". And it works everywhere (listviews, scrollviews, webviews, etc).

In conclusion, you should not worry about this. There's no simple argument that you can pass to ScrollView to make it overscroll like that. And going through all the trouble of extending the ScrollView class is not worth it, IMO. Just rely on the default behavior.

If Samsung wants to mess with their users and give them an inconsistent UI, then so be it.

Twit

@RaphMclee I used a both a Samsung device and the vanilla emulators for development, and I was able to observe these differences. However, note that this is an old post, it might not be relevant to the current generation of Samsung devices. – Twit

ok, so you have no link to documentations or so. You got this info from your experience with different devices. Thx for the info. – Zigzagger

Answer 5

For those who want to implement the bounce effect on ListView.

Howto

one way to add this effect is using addHeaderView and addFooterView in ListView, and their padding(topPadding for header view, and bottomPadding for footer view) are set to 0 for the first time, then we override the onTouchEvent, and change the padding according to the moving distance.

Implementation

Sample Code

Notes

The idea is borrowed from android-pulltorefresh, since bouncing effect are more simple than pull-to-refresh, so the code is shorter too. ^_^

Hope this will help someone..

Determinative

Answer 6

For anyone looking for the bounce effect on NestedScrollView, I have made a library: https://github.com/Valkriaine/Bouncy

Usage:

In your app module build.gradle:

   dependencies {
        implementation 'com.factor:bouncy:1.8'

        // if you want BouncyRecyclerView too, add implementation for recyclerview
        implementation 'androidx.recyclerview:recyclerview:1.1.0'

   }

And use BouncyNestedScrollView as a normal NestedScrollView:

<com.factor.bouncy.BouncyNestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fling_animation_size=".7"
        app:overscroll_animation_size=".7">

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

    </LinearLayout>

</com.factor.bouncy.BouncyNestedScrollView>

fling_animation_size specifies the magnitude of overscroll effect for fling, default is 0.5 if no value is given.

overscroll_animation_size specifies the magnitude of overscroll effect for drag, default is 0.5 if no value is given.

Strongly suggest to keep both values lower than 5.

BouncyNestedScrollView was modified based on the source code of NestedScrollView, so technically it should work with all existing customization options of NestedScrollView.

Unflinching