Spicy up your ViewPager (part 1): tune the scroll duration.

In the series of posts entitled “Spice up your ViewPager” I am going to walk thought some simple techniques on how to make your ViewPager prettier and more intuitive to use.

You can definitely influence your user perception of the app by controlling for example the transition from one page to the other.  If the horizontal scroll is too fast, then the user my not understand what is happening on the screen: why is he browsing from one information to the other, and how did the animation ever happened? On the flip side, if the horizontal scroll is too slow, then the user may get bored of such sluggish and unresponsive UI.

However, controlling the speed is not all. If you care about your user then you should make also the page transition itself as most natural and intuitive as possible. Doesn’t make sense to have a “Bounce” animation to go through the pages of a book. A “LinearOutSlowIn” is more appropriate for this context.

Duration and type of animation are the two topics that I am going to cover in the first two posts of this series.

Before starting with the code I suggest to have first an idea of what you are going to learn by trying the showcase app.

If you have given a try to the app, then you will have probably noticed that on the first row of widgets you can change the duration of the horizontal scroll. Try a few values to see the outcome on the view pager behaviour.

You can surely notice that some animations are more understandable at a certain speed, while they may be unclear when they are too quick.

Let’s see the code behind this “speed” control.

Implementation

First of all we need to extract the field “mScroller” from the ViewPager class  so that we can start making changes on it.

Field mScroller = ViewPager.class.getDeclaredField("mScroller");

Now that we have the scroller we could in theory extract the field “mDuration” from it and apply our own preferred value, but unfortunately that will not work. The ViewPager explicitly passes the duration to the “mScroller” when requesting to scroll according to some calculations that I am not going to explain here. As a matter of fact, our duration value will be ignored. So we need to work around this limitation.

We can create our own CustomScroller by extending the Scroller class, and then associate it to the ViewPager.

mScroller.setAccessible(true);
mScroller.set(mPager, new CustomScroller(duration));

In this way we can define our preferred duration in the CustomScroller and use it in the overridden method startScroll as shown below:

public class CustomScroller extends Scroller {

    private int mDuration;

    public CustomScroller(Context context, Interpolator interpolator, int duration) {
        super(context, interpolator);
        mDuration = duration;
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        // Ignore received duration, use fixed one instead
        super.startScroll(startX, startY, dx, dy, mDuration);
    }
}

That’s all!

You have now learned how to customise the speed of your ViewPager so that you can better adapt it to your context.

In the next post I am going to show how to further enhance the CustomScroller in order to use a different type animation than the default one. For now fell free to grab this code from my GitHub repository and start playing with it right away!