Custom animation for viewpager

Question

I'm working with viewPager and fragments and now I'm trying to get a custom animation, the zoom-out page transformation to be precisely.

But I'm getting a few errors. I'll put the errors in comment with the code snippet.

class MainActivity

import android.support.v4.app.FragmentManager;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);/** Getting a reference to the ViewPager defined the layout file */
        ViewPager pager = (ViewPager) findViewById(R.id.pager);

        /** Getting fragment manager */
        FragmentManager fm = getSupportFragmentManager();

        /** Instantiating FragmentPagerAdapter */
        MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(fm);

        /** Setting the pagerAdapter to the pager object */
        pager.setAdapter(pagerAdapter);

        // **ERROR:The method setPageTransformer(boolean, ViewPager.PageTransformer) in the type ViewPager is not applicable for the arguments (boolean, ZoomOutPageTransformer)**
        pager.setPageTransformer(true, new ZoomOutPageTransformer());
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

Class ZoomOutPageTransformer

import android.view.View;
    // **ERROR on 'ViewPager.PageTransformer --> ViewPager cannot be resolved to a type **
    public class ZoomOutPageTransformer implements ViewPager.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();

            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);
            }
        }
    }

Solution 1

I've solved the problem:

1. Download the latest Android SDK
2. Browse to android-sdk-windows\extras\android\support\v4
3. Copy android-support-v4.jar to your libs folder in your project
4. Clean your project
5. Run your code

This worked for me, downloading the support library through ecplise gave me this errors. This fixed the problem for me

Solution 2

@mXX is almost right. But for those how still has problem (like me) I need to add a point to his procedure.

You need to update your Android Support Library package. But if you have it now you need to uninstall it first then install it again in order to get new one.

If you have IntellijIdea:

1. Open SDK Manager window from "Tools/Android/SDK Manager"
2. Find Exteras folder then check Android support library. If its status is installed click "Delete 1 package..." in order to delete it.
3. Check this package and click on install button.
4. Navigate to \extras\android\support\v4 then copy android-support-v4.jar and paste it into your Libs folder.
5. Idea should recompile the project automatically, however if it didn't do that then you should recompile it manually by click on "Build/Rebuild Project"

That's it ;)

Solution 3

For anyone still stuck on this the current support v4 issue not importing the v4 ViewPager interface: it does not require the static ViewPager class instance. Just implement PageTransformer. The PageTransformer interface is already wrapped inside with ViewPager.

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();

        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);
        }
    }
}