android view pager swipe animation

Question

I am trying to do some animation in the page swipe in view pager by overriding the transformPage() method, such that when I swipe from right to left the new page (page coming from the right side) should appear below the previous page as soon as the animation starts and then the previous page should slide to the left side over the new page. When I swipe from left to right the new page should directly slide over the previous page and covers it completely. But I am not able to achieve it. I have tried the following:-

if(position > 0 && position < 1)
{
    int pageWidth = page.getWidth();
    float translateValue = (-position * pageWidth);
    if(translateValue < pageWidth)
    {
        translationX = translateValue;
    }
    else
    {
        translationX = 0;
    }
}
else 
{
    alpha = 1;
    scale = 1;
    translationX = 0;
}

Please provide some suggestions. Thanks

Take a look at this library. github.com/ToxicBakery/ViewPagerTransforms — Arkar Aung
Not sure exactly the effect you are describing -- Something like this -- medium.com/@BashaChris/… — Tasos
A similar animation can be viewed in the Play Music app in Android 5.0 smartphones. On the play screen when you swipe from right to left the new page appears below the present page and for left to right swipe the new page appears/slides above/over the present page. — Tushar Karwa

Michał Hawryszko Michał Hawryszko · Accepted Answer · 2015-09-21T07:52:27

This should work like you want, you just have to put it in your PagerTransformer class:

private static final float MIN_SCALE_DEPTH = 0.75f;

 @Override
public void transformPage(View page, float position) {
    final float alpha;
    final float scale;
    final float translationX;


            if (position > 0 && position < 1) {
                alpha = (1 - position);
                scale = MIN_SCALE_DEPTH + (1 - MIN_SCALE_DEPTH) * (1 - Math.abs(position));
                translationX = (page.getWidth() * -position);
            } else {
                alpha = 1;
                scale = 1;
                translationX = 0;
            }

    page.setAlpha(alpha);
    page.setTranslationX(translationX);
    page.setScaleX(scale);
    page.setScaleY(scale);

android view pager swipe animation

1 Answers