How to create Android ViewPager swipe overshoot/bounce animation?

Issue

How can I create an animation similar to the stock android launcher animation applied to apps when you change homescreen pages.

Here’s a gif: https://i.stack.imgur.com/Zh7qE.gif

As the page swipes, the icons slightly overshoot their mark, and settle back to the center. I don’t see how I can do that with a PageTransformer and I can’t find any resources to point me in the right direction.

Solution

I once created a one-time bounce animation:

val pixels = binding.pager.width / 8
ValueAnimator.ofInt(0, pixels).apply {
    duration = 200L
    interpolator = DecelerateInterpolator()
    repeatCount = 3
    repeatMode = ValueAnimator.REVERSE
    addUpdateListener {
        binding.pager.scrollX = it.animatedValue as Int
    }
}.start()

Use ofInt(0, pixels) for bouncing left or ofInt(0, -pixels) to bouncing right.

In my code I used a dragging distance of 1/8 of the view pager.
Feel free to choose how much you want to bounce:
val pixels = PIXELS_TO_DRAG

Finally, the repeatCount determines how many bounces – use 3 for 2 bounces, 5 for 3 bounces, 7 for 4 bounces etc.

You can fire this animation each time a pager transition end and tweak the parameters to get the desired behavior.

Enjoy,
Hope it helps 🙂

Answered By – Shlomi Katriel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published