iOS like over scroll effect on Android
I have quickly put together a simple solution based on a CoordinatorLayout.Behavior
. It's not perfect, you can maybe spend some time fine tuning it a bit, but it's not bad. Anyway the result should look something like this:
As a small side note before I start with the answer: I strongly recommend that you use the NestedScrollView
from the support library instead of a normal ScrollView
. They are identical in any way, but the NestedScrollView
implements correct nested scrolling behaviour on lower API levels.
Anyway let's start with my answer: The solution I came up with would work with any scrollable container, be it a ScrollView
, ListView
or RecyclerView
and you don't need to subclass any Views
to implement it.
First you need to add Google's Design Support Library to your project if you aren't already using it:
compile 'com.android.support:design:25.0.1'
Remember that if you aren't targeting API level 25 (which you should by the way) then you need to include the newest version for your API level (eg. compile 'com.android.support:design:24.2.0'
for API level 24).
Whatever scrollable container you are using needs to wrapped in a CoordinatorLayout
in your layout. In my example I am using a NestedScrollView
:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- content -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The CoordinatorLayout
allows you to assign a Behavior
to its direct child views. In this case we are going to assign a Behavior
to the NestedScrollView
which is going implement the overscroll bounce effect.
Let's just take a look at the code of the Behavior
:
public class OverScrollBounceBehavior extends CoordinatorLayout.Behavior<View> {
private int mOverScrollY;
public OverScrollBounceBehavior() {
}
public OverScrollBounceBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
mOverScrollY = 0;
return true;
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
if (dyUnconsumed == 0) {
return;
}
mOverScrollY -= dyUnconsumed;
final ViewGroup group = (ViewGroup) target;
final int count = group.getChildCount();
for (int i = 0; i < count; i++) {
final View view = group.getChildAt(i);
view.setTranslationY(mOverScrollY);
}
}
@Override
public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target) {
final ViewGroup group = (ViewGroup) target;
final int count = group.getChildCount();
for (int i = 0; i < count; i++) {
final View view = group.getChildAt(i);
ViewCompat.animate(view).translationY(0).start();
}
}
}
Explaining what a Behavior
is and how they work is beyond the scope of this answer so I am just going to quickly explain what the above code does. The Behavior
intercepts all scroll events that happen in the direct children of the CoordinatorLayout
. In the onStartNestedScroll()
method we return true
since we are interested in any scroll events. In onNestedScroll()
we look at the dyUnconsumed
parameter which tells us how much of the vertical scroll was not consumed by the scrolling container (in other words overscroll) and then translate the children of the scrolling container by that amount. Since we are just getting delta values we need to sum up all of them in the mOverscrollY
variable. onStopNestedScroll()
is called when the scrolling event stops. This is when we animate all children of the scrolling container back to their original position.
To assign the Behavior
to the NestedScrollView
we need to use the layout_behavior
xml attribute and pass in the full class name of the Behavior
we want to use. In my example the above class is in the package com.github.wrdlbrnft.testapp
so I have to set com.github.wrdlbrnft.testapp.OverScrollBounceBehavior
as value. layout_behavior
is a custom attribute of the CoordinatorLayout
so we need to prefix it with the correct namespace:
<?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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.github.wrdlbrnft.testapp.OverScrollBounceBehavior">
<!-- content -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Notice the namespace I added on the CoordinatorLayout
and the app:layout_behavior
attribute I added on the NestedScrollView
.
And that is all you have to do! While this answer turned out to be longer than I intended I skipped over some of the basics concering the CoordinatorLayout
and Behaviors
. So if you are unfamiliar with these or have any other further questions feel free to ask.
Thanks to Xaver Kapeller, I have written my solution with overriding fling and little additions, using kotlin and androidx
Add coordinator dependency
implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"
Create a new class that extends CoordinatorLayout.Behavior
import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.view.ViewGroup
import android.view.animation.AccelerateDecelerateInterpolator
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.ViewCompat
class OverScrollBehavior(context: Context, attributeSet: AttributeSet)
: CoordinatorLayout.Behavior<View>() {
companion object {
private const val OVER_SCROLL_AREA = 4
}
private var overScrollY = 0
override fun onStartNestedScroll(
coordinatorLayout: CoordinatorLayout,
child: View,
directTargetChild: View,
target: View,
axes: Int,
type: Int
): Boolean {
overScrollY = 0
return true
}
override fun onNestedScroll(
coordinatorLayout: CoordinatorLayout,
child: View,
target: View,
dxConsumed: Int,
dyConsumed: Int,
dxUnconsumed: Int,
dyUnconsumed: Int,
type: Int,
consumed: IntArray
) {
if (dyUnconsumed == 0) {
return
}
overScrollY -= (dyUnconsumed/OVER_SCROLL_AREA)
val group = target as ViewGroup
val count = group.childCount
for (i in 0 until count) {
val view = group.getChildAt(i)
view.translationY = overScrollY.toFloat()
}
}
override fun onStopNestedScroll(
coordinatorLayout: CoordinatorLayout,
child: View,
target: View,
type: Int
) {
// Smooth animate to 0 when the user stops scrolling
moveToDefPosition(target)
}
override fun onNestedPreFling(
coordinatorLayout: CoordinatorLayout,
child: View,
target: View,
velocityX: Float,
velocityY: Float
): Boolean {
// Scroll view by inertia when current position equals to 0
if (overScrollY == 0) {
return false
}
// Smooth animate to 0 when user fling view
moveToDefPosition(target)
return true
}
private fun moveToDefPosition(target: View) {
val group = target as ViewGroup
val count = group.childCount
for (i in 0 until count) {
val view = group.getChildAt(i)
ViewCompat.animate(view)
.translationY(0f)
.setInterpolator(AccelerateDecelerateInterpolator())
.start()
}
}
}
Create XML file with CoordinatorLayout and NestedScrollView
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.core.widget.NestedScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior=".OverScrollBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="center"
android:padding="10dp"
android:text="@string/Lorem"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And don't forget to add
app:layout_behavior=".OverScrollBehavior" // Or your file name
field to your NestedScrollView XML markup
If you want to use library then this Bouncy is the best library which is the best match with your requirement.