View translation in sliding a ViewPager

Question

I was reading an example on customizing ViewPager's sliding page animation that entails translating the page(View) to a certain amount. The example is from the docs. Specifically, it is about an implementation called ZoomOutPageTransformer that can be set on a ViewPager through setPageTransformer() to customize how the page slides(incorporating a zoom animation in it).

This is how the end result is supposed to look like:

Now, they describe how they are going to do it:

In your implementation of transformPage(), you can then create custom slide animations by determining which pages need to be transformed based on the position of the page on the screen, which is obtained from the position parameter of the transformPage() method.

The position parameter indicates where a given page is located relative to the center of the screen. It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0. When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5. Based on the position of the pages on the screen, you can create custom slide animations by setting page properties with methods such as setAlpha(), setTranslationX(), or setScaleY().

And this is the implementation of the PageTransformer that they have provided:

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

Problem:

I am unable to understand the statement,

view.setTranslationX(horzMargin - vertMargin / 2);

My understanding was that a value of 1.0 for position parameter equates to covering the screen width, i.e, w. So, if the center of a page has moved x units of position then the translation in terms of pixels/dp would be, w*x. But they are using some margin calculation for the translation amount calculation.

Can anyone explain how they have done this calculation and what would be wrong with my calculation?

View translation in sliding a ViewPager

4 Answers