Backwards compatible PageTransformer

Question

I'm trying to animate items in a ViewPager and the PageTransformer fits the bill. I want it to be backwards compatible to Android 2.2 so am using the support v4 library. However...

As property animation is only supported as of Android 3.0 and forward, setting a PageTransformer on a > ViewPager on earlier platform versions will be ignored.

so PageTransformer won't work on older versions

I'm using Jake Wharton's NineOldAndroids library so I could use that API, but I'm not sure how to do animation for a ViewPager.

How could I do this?

Halfon

Answer 1

You need to implement the PageTransformer using the AnimatorProxy wrapper to set the transformation properties on the views.

Then the tough part is that the ViewPager will ignore the PageTransformer in lower API versions. So you need to modify the ViewPager itself to use the PageTransformer.

I have a forked version of the support library on GitHub which allows this as well as using NineOldAndroids animators for custom fragment transitions. Use the animator-transition branch. It is a maven project so you can build it from the v4 subdirectory.

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

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

        AnimatorProxy proxy = AnimatorProxy.wrap(view);

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            proxy.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) {
                proxy.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                proxy.setTranslationX(-horzMargin + vertMargin / 2);
            }

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

            // Fade the page relative to its size.
            proxy.setAlpha(MIN_ALPHA +
                (scaleFactor - MIN_SCALE) /
                (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            proxy.setAlpha(0);
        }
    }
}

Lorislorita

Very nice! The next problem is that I actually want to animate the (position+1) page as my ViewPager shows three items and the middle item is the one which I want to be selected. I don't think I can use the PageTransformer can I? I think I'm going to have to animate them manually in the onPageSelected method. What do you think? – Halfon

I'm not sure exactly what you mean. The transformations are always on 2 views, in your case either view 1+2 or 2+3. Only two are on screen at once. You can perform any transformation on both visible views. Also you might wanna check out JazzyViewPager which has some built-in transitions. It also uses NineOldAndroids. github.com/jfeinstein10/JazzyViewPager – Lorislorita

@Lorislorita Is there any other way to get .jar file which is provided with the above source? If it is possible please upload the jar file. – Malvoisie

I don't know how to upload a file in relation to an answer. I'd be happy to email it to you. – Lorislorita

Answer 2

As @mark.kedzierski said copied the ViewPager class from here and removed the if statement for the version (check below) and called it TransformableViewPager

public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) {
    if (Build.VERSION.SDK_INT >= 11) {
        final boolean hasTransformer = transformer != null;
        final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
        mPageTransformer = transformer;
        setChildrenDrawingOrderEnabledCompat(hasTransformer);
        if (hasTransformer) {
            mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
        } else {
            mDrawingOrder = DRAW_ORDER_DEFAULT;
        }
        if (needsPopulate) populate();
    }
}

I also had to change all PageTransformer to ViewPager.PageTransformer. Then did the transformations in a custom PageTranformer like this,

if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
    // > 11 version
    view.setAlpha(0);
}
else
{
    // Nine Old Androids version
    ViewHelper.setAlpha(view, 0);
 }

Ithink proxy can also be used so you don't have to write the version check.This worked even for 2.2

Adduct