Skip to content

Clock Spin Transformation

Dipanshu Kumar edited this page Mar 14, 2018 · 4 revisions

Hello guys here i will tell you how you can apply Clock Spin Transformation on Viewpager.

Clock Spin

First you have to implement ViewPager.PageTransformer in your class then check for position value, if position < -1 or position > 1 then set Alpha to 0 otherwise for position <= 0 you code for page which is currently visible to you and for position <= 1 you code for the page which is going to be visible to you.

public class Clock_SpinTransformation implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {

        page.setTranslationX(-position * page.getWidth());

        if (Math.abs(position) <= 0.5) {
            page.setVisibility(View.VISIBLE);
            page.setScaleX(1 - Math.abs(position));
            page.setScaleY(1 - Math.abs(position));
        } else if (Math.abs(position) > 0.5) {
            page.setVisibility(View.GONE);
        }


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

        }
        else if (position <= 0) {   // [-1,0]
            page.setAlpha(1);
            page.setRotation(360 * Math.abs(position));

        }
        else if (position <= 1) {   // (0,1]
            page.setAlpha(1);
            page.setRotation(-360 * Math.abs(position));

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

        }


    }
}

Now creating object of your transformation class

Clock_SpinTransformation clockSpinTransformation = new Clock_SpinTransformation();

After doing this you just set your transformation to view pager

ViewPager viewPager.setPageTransformer(true, clockSpinTransformation);