Make Cool Transition Effects with PageTransformer in Android

INTRODUCTION:

Design implementations in Android moved so far with the introduction of design support library. PageTransformer is a great add-on on what we can do with the conventional ViewPager.
With PageTransformer, we can modify the page slide animations and create awesome slide effects!
In this article, I will be discussing the use of Page Transformer to get transition effects in Android.we will be animating the page sliding effects in the view pager. I’ll use the code from my previous article but you can use your own code of view pager.

Step by Step guide to using Page Transformer:

• PageTransformer is the interface that we have to implement and then supply it to the view pager. According to Android’s official documentation, it has only one single method transform page(). 
• Custom slide animation with transform page() determines which page need to be transformed, based on the position of the page on the screen. obtained by the position parameter of transform page().
• The position Parameter indicates the location of the page relative to the center of the screen. Position parameter changes dynamically as the user scrolls through the page.
• When the page fills the whole screen then the position value is 0, if it is swiped to right and is off screen then its position is 1, and to the left, it is -1.
• Based on the position of the page on the screen we will make custom slide animations by setting page properties with methods such as,setAlpha()setTranslationX() or setScaleY().
• We will create different classes for different transitions and you can apply the transition effect by calling setPageTransformer() method to your view pager.

ViewPager mPager = (ViewPager) findViewById( R.id.pager );
...
mPager.setPageTransformer( true, new ZoomOutPageTransformer() );

We will cover the following transition effects with page transformer in this article:

1. Zoom out page transformer
2. Depth page transformer
3. Zoom in page transformer
4. Cube in page transformer
5. Cube out page transformer
6. Flip Horizontal Page Transformer
7. Flip vertical Page Transformer
8. Foreground to background page transformer
9. Background to foreground page transformer
10. Rotate up page transformer
11. Rotate down page transformer
12. Tablet page transformer

• Until now, without any page transformer the view pager’s slide looks simple like in the gif below:

1- Zoom out page transformer

• This page transformer shrinks and fades pages when scrolling between adjacent pages. As a page gets closer to the center, it grows back to its normal size and fades in.

Result gif:

Now, create a java class and name it ZooomOutPageTransformer, then paste the below code in it.

ZoomOutPageTransformer.java

package com.codes29.introscreen;

import android.support.v4.view.ViewPager;
import android.view.View;

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

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

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

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

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

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

2- Depth page transformer

• This page transformer uses the default slide animation for sliding pages to the left while using a “depth” animation for sliding pages to the right.
• This depth animation fades the page out and scales it down linearly.

Result gif:

Now, Create a java class and name it DepthPageTransformer, then paste the below code in it.

DepthPageTransformer.java

package com.codes29.introscreen;

import android.support.v4.view.ViewPager;
import android.view.View;

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

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

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

        } else if ( position <= 0 ) { // [-1,0]
            // Use the default slide transition when moving to the left page
            page.setAlpha( 1 );
            page.setTranslationX( 0 );
            page.setScaleX( 1 );
            page.setScaleY( 1 );

        } else if ( position <= 1 ) { // (0,1]
            // Fade the page out.
            page.setAlpha( 1 - position );

            // Counteract the default slide transition
            page.setTranslationX( pageWidth * -position );

            // Scale the page down ( between MIN_SCALE and 1 )
            float scaleFactor = MIN_SCALE
                    + ( 1 - MIN_SCALE ) * ( 1 - Math.abs( position ) );
            page.setScaleX( scaleFactor );
            page.setScaleY( scaleFactor );

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

3- Zoom In Page Transformer

• This page transformer shrinks pages when scrolling between adjacent pages.
• As a page gets closer to the center, it grows back to its normal size and as it goes away from the center it shrinks.

Result gif:

Now, Create a java class and name it ZoomInPageTransformer, then paste the below code in it.

ZoomInPageTransformer.java

package com.codes29.introscreen.transformers;
import android.support.v4.view.ViewPager;
import android.view.View;

public class ZoomInTransformer implements ViewPager.PageTransformer {

    public static final float MAX_ROTATION = 90.0f;

    @Override
    public void transformPage( View page, float pos ) {
        final float scale = pos < 0 ? pos + 1f : Math.abs( 1f - pos );
        page.setScaleX( scale );
        page.setScaleY( scale );
        page.setPivotX( page.getWidth() * 0.5f );
        page.setPivotY( page.getHeight() * 0.5f );
        page.setAlpha( pos < -1f || pos > 1f ? 0f : 1f - (scale - 1f) );
    }
}

4- cube in Page Transformer

• This page transformer curves the pages when scrolling between adjacent pages.
• As a page is scrolled away from the screen a cube-like turning effect is created in which the corner is turned inside.
• Hence, it is named as a cube in page transformer.

Result gif:

Now, Create a java class and name it CubeInPageTransformer, then paste the below code in it.

CubeInPageTransformer.java

package com.codes29.introscreen.transformers;

import android.support.v4.view.ViewPager;
import android.view.View;

public class CubeInPageTransformer implements ViewPager.PageTransformer {

    @Override
    public void transformPage( View page, float position ) {
        // Rotate the fragment on the left or right edge
        page.setPivotX( position > 0 ? 0 : page.getWidth() );
        page.setPivotY( 0 );
        page.setRotationY( -90f * position );
    }
}

5- Cube out Page Transformer

• This page transformer curves the pages similar to the cube in page transformer but corner is turned outside and the page shrinks the corner of the page that is away from the center.
• Hence, it is named as cube out page transformer.

Result gif:

Now, Create a java class and name it CubeOutPageTransformer, then paste the below code in it.

CubeOutPageTransformer.java

package com.codes29.introscreen.transformers;

import android.support.v4.view.ViewPager;
import android.view.View;

public class CubeOutPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage( View page, float pos ) {
        page.setPivotX( pos < 0f ? page.getWidth() : 0f );
        page.setPivotY( page.getHeight() * 0.5f );
        page.setRotationY( 90f * pos );
    }
}

6- Flip Horizontal Page Transformer

• This page transformer turns the pages vertically straight at the center of the screen when swiped and as the swipe goes beyond the center of the screen, the next page comes into the view.
• This transition creates a horizontal flip effect.
• Hence, it is named as flip horizontal page transformer.

Result gif:

Now, Create a java class and name it FlipHorizontalPageTransformer, then paste the below code in it.

FlipHorizontalPageTransformer.java

package com.codes29.introscreen.transformers;

import android.support.v4.view.ViewPager;
import android.view.View;

public class FlipHorizontalPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage( View page, float pos ) {
        final float rotation = 180f * pos;

        page.setAlpha( rotation > 90f || rotation < -90f ? 0 : 1 );
        page.setPivotX( page.getWidth() * 0.5f );
        page.setPivotY( page.getHeight() * 0.5f );
        page.setRotationY( rotation );
    }
}

7- Flip Vertical Page Transformer

• This page transformer turns the pages horizontally at the center of the screen when swiped and as the swipe goes beyond the center of the screen, the next page comes into the view.
• This transition creates a vertical flip effect.
• Hence, it is named as flip vertical page transformer.

Result gif:

Now, Create a java class and name it FlipHorizontalPageTransformer, then paste the below code in it.

FlipVerticalPageTransformer.java

package com.codes29.introscreen.transformers;

import android.support.v4.view.ViewPager;
import android.view.View;

public class FlipVerticalPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage( View page, float pos ) {
        final float rotation = -180f * pos;

        page.setAlpha( rotation > 90f || rotation < -90f ? 0f : 1f );
        page.setPivotX( page.getWidth() * 0.5f );
        page.setPivotY( page.getHeight() * 0.5f );
        page.setRotationX( rotation );
    }
}

8- Foreground to Background Page Transformer

• This page transformer shrinks the pages as the screen is swiped. Gradually the size of the page decreases and gradually the page disappears.
• It gives the effect that the page is transformed from foreground to background.

Result gif:

Now, Create a java class and name it ForegroundToBackgroundPageTransformer, then paste the below code in it.

ForegroundToBackgroundPageTransformer.java

package com.codes29.introscreen.transformers;
import android.support.v4.view.ViewPager;
import android.view.View;
import static java.lang.Math.min;

public class ForegroundToBackgroundPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage( View page, float pos ) {
        final float height = page.getHeight();
        final float width = page.getWidth();
        final float scale = min( pos > 0 ? 1f : Math.abs(1f + pos), 1f );

        page.setScaleX( scale );
        page.setScaleY( scale );
        page.setPivotX( width * 0.5f );
        page.setPivotY( height * 0.5f );
        page.setTranslationX( pos > 0 ? width * pos : -width * pos * 0.25f );
    }
}

9- Background to Foreground Page Transformer

• Swiping the screen expands the pages in this page transformer. Gradually the size of the page increases and the page appears on the view.
• This transition creates an effect of the page appearing from the background.

Result gif:

Now, Create a java class and name it BackgroundToForegroundPageTransformer, then paste the below code in it.

BackgroundToForegroundPageTransformer.java

package com.codes29.introscreen.transformers;

import android.support.v4.view.ViewPager;
import android.view.View;
import static java.lang.Math.min;

public class BackgroundToForegroundPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage( View page, float pos ) {
        final float height = page.getHeight();
        final float width = page.getWidth();
        final float scale = min( pos < 0 ? 1f : Math.abs(1f - pos), 1f );

        page.setScaleX( scale );
        page.setScaleY( scale );
        page.setPivotX( width * 0.5f );
        page.setPivotY( height * 0.5f );
        page.setTranslationX( pos < 0 ? width * pos : -width * pos * 0.25f );
    }
}

10- Rotate Up Page Transformer

Swiping away or in the screen creates an effect of upwards rotation in the transition of the pages.

Result gif:

Now, Create a java class and name it RotateUpPageTransformer, then paste the below code in it.

RotateUpPageTransformer.java

package com.codes29.introscreen.transformers;

import android.support.v4.view.ViewPager;
import android.view.View;

public class RotateUpPageTransformer implements ViewPager.PageTransformer {
    private static final float ROTATION = -15f;

    @Override
    public void transformPage( View page, float pos ) {
        final float width = page.getWidth();
        final float height = page.getHeight();
        final float rotation = ROTATION * pos * -1.25f;

        page.setPivotX( width * 0.5f );
        page.setPivotY( height );
        page.setRotation( rotation );

    }
}

11- Rotate Down Page Transformer

Swiping away or in the screen creates an effect of downwards rotation in the transition of the pages.

Result gif:

Now, Create a java class and name it RotateUpPageTransformer, then paste the below code in it.

RotateDownPageTransformer.java

package com.codes29.introscreen.transformers;

import android.support.v4.view.ViewPager;
import android.view.View;

public class RotateDownPageTransformer implements ViewPager.PageTransformer {
    private static final float ROTATION = -15f;

    @Override
    public void transformPage( View page, float position ) {
        final float width = page.getWidth();
        final float rotation = ROTATION * position;

        page.setPivotX( width * 0.5f );
        page.setPivotY( 0f );
        page.setTranslationX( 0f );
        page.setRotation( rotation );
    }
}

12- Tablet Page Transformer

Swiping on the screen with this transformer, it creates this effect:

Result gif:

Now, Create a java class and name it TabletPageTransformer, then paste the below code in it.

TabletPageTransformer.java

package com.codes29.introscreen.transformers;

import android.graphics.Camera;
import android.graphics.Matrix;
import android.support.v4.view.ViewPager;
import android.view.View;

public class TabletPageTransformer implements ViewPager.PageTransformer {

    private static final Matrix MATRIX_OFFSET = new Matrix();
    private static final Camera CAMERA_OFFSET = new Camera();
    private static final float[] TEMP_FLOAT_OFFSET = new float[2];

    @Override
    public void transformPage( View page, float pos ) {
        final float rotation = ( pos < 0 ? 30f : -30f ) * Math.abs( pos );

        page.setTranslationX( getOffsetX( rotation, page.getWidth(), page.getHeight() ) );
        page.setPivotX( page.getWidth() * 0.5f );
        page.setPivotY( 0 );
        page.setRotationY( rotation );
    }

    private float getOffsetX( float rotation, int width, int height ) {
        MATRIX_OFFSET.reset();
        CAMERA_OFFSET.save();
        CAMERA_OFFSET.rotateY( Math.abs( rotation ));
        CAMERA_OFFSET.getMatrix( MATRIX_OFFSET );
        CAMERA_OFFSET.restore();

        MATRIX_OFFSET.preTranslate( -width * 0.5f, -height * 0.5f );
        MATRIX_OFFSET.postTranslate( width * 0.5f, height * 0.5f );
        TEMP_FLOAT_OFFSET[ 0 ] = width;
        TEMP_FLOAT_OFFSET[ 1 ] = height;
        MATRIX_OFFSET.mapPoints(TEMP_FLOAT_OFFSET);
        return ( width - TEMP_FLOAT_OFFSET[0] ) * ( rotation > 0.0f ? 1.0f : -1.0f );

    }
}

CONCLUSION:

With this, we come to an end of the tutorial on “How to make awesome transition effects using PageTransformer in Android?”
In this article, you have seen the various transition effects that you can create using the page transformer. The introduction page transformer saved the life of developers by easing the implementation process of the various animation effects that you can introduce to the slides of the pages in the view pager. Just with a single method ie; transform page() you can create a variety of transitions that may fit your need.

I hope you this article boosts up your knowledge and yes all the transform page classes above are standalone and you can use it as it is as per your need.
However, suggestions or queries are always welcome, so, do write in the comment section.

Thank You for Learning!!!

• About
• Latest Posts

Rahul Huria

Web Scraping Expert at Loginworks Softwares

A tech junkie and writer can describe me the best 😀. I love and live with technology running through my blood. After creating my first scraping program, I was sure that is my call, and I've dedicated 4 years of studying about it. I love to help others who want to learn more about any kind of web scraping. Feel free to get in touch in case you want to know too!

Latest posts by Rahul Huria (see all)

• LinkedIn Scraper | LinkedIn Data Extractor Software Tool - February 22, 2021
• Is Web Scraping Legal? - February 15, 2021
• What Is Data Scraping? - February 10, 2021