Wednesday, May 11, 2016

How to make your ViewPager give a sneak peak at the next page

Simply add a scroll animation like so:

final long DRAG_HINT_ANIMATION_DURATION_IN = 500;
final long DRAG_HINT_ANIMATION_DURATION_OUT = 250;

ObjectAnimator scrollIn = ObjectAnimator.ofInt(viewPager, "scrollX", 200);
scrollIn.setDuration(DRAG_HINT_ANIMATION_DURATION_IN);
scrollIn.setInterpolator(new AccelerateDecelerateInterpolator());
ObjectAnimator scrollOut = ObjectAnimator.ofInt(viewPager, "scrollX", 0);
scrollOut.setDuration(DRAG_HINT_ANIMATION_DURATION_OUT);
scrollOut.setInterpolator(new AccelerateDecelerateInterpolator());

AnimatorSet set = new AnimatorSet();
set.playSequentially(scrollIn, scrollOut);
set.start();

This will scroll your viewpager by 200 pixels in 500ms. and then scroll it back in 250ms.
I'm currently using an easing interpolator (AccelerateDecelerateInterpolator)
It accelerates to the normal speed and then decelerates before reaching the end of the animation.
Of course any of these parameters are yours to modify.
Enjoy !