Posted on

Android ViewPager PageTransformer


android viewpager pagetransformer

Designed by Freepik

Hi, it’s pretty easy to make cool ViewPager animations, but they look really awesome. We’ll look at the basics of how PageTransformer works and how to modify it to make great animations.

Basics

If you haven’t checked my post about animation types, definitely check that out this post. But the key here is just view translation. It moves views from its default position by the pixel offset that you set. For example, we have a screen of 1440 pixels and view that takes the whole screen. If we translate it to 1440 pixels, then it will be gone to the right, if 720 px, then it will be half gone to the right. That’s what happening in ViewPager, but with two fragments simultaneously.

Page Transformer

You need to extend ViewPager.PageTransformer, it has one method to implement – transformPage. And then set it for your pager. Following code in Kotlin

If you don’t add any code you’ll still have the default horizontal pages. And that’s what we’ll get after applying parallax effect.

android viewpager pagetransformer

But first let’s look at parameters that we get. View and float. View is a root element of our fragment, it’s not a fragment itself and float position if value of translating current page. Where 0 is centered (page in full screen) -1 is gone to the left and 1 is gone to the right. And you can two callbacks on swipe. For first page and second, with different page and position values

Find Right Fragment

We only need one method – setTranslationX. It takes pixel value, that’s why we need to get view width and then multiply by our value.

But first we need to find those image views. since we have our page reference, it’s not a problem to call findViewById, but if we have different fragments with different layouts you don’t wanna call find view in vain. Just like translate wrong with a wrong position value. You need to know exactly which fragment if currently being called with transformPage. You can do it by setting a tag for root element in your fragment in onCreateView

and then access it in transfromPage and handle different fragment respectfully.

In this case you’ll be calling findViewById on a right view and set translationX with a right position value.

Parallax Effect

And the actual parallax effect line is this

First we get a page width, becaue translation is a pixel value. Then checking for the right fragment we find a view with id and translate it to the opposite side of swiping. Which makes a parallax effect.

If you use this line, your image won’t be moving like this

android viewpager pagetransformer

 

Ok, that’s it for basics of PageTransformer, it’s easy to go from there. One more thing, you can optimize find view to make it only once per fragment and keep it as a field, but don’t forget to null it when fragment is left. Otherwise it will cause bugs.

You can get source code here, main branch in Java, kotlin in Kotlin. Don’t forget to subscribe, follow me on Facebook, Twitter, G+ and share with friends if you think this will benefit them!


  • Greg Funtera

    Thank you for sharing your knowledge in android development 😀

  • Abdul Qadir

    why did you used Kotlin for this tutorial ?

  • Andres Garcia

    Thanks, again, mate for an interesting Tutorial.
    One of the very few Blogs I’m eagerly waiting for new Tutorials to be honest !!
    Oh and indeed, if you use Koltin, please also provide a Java Version of the Code.
    I know you did for this one and thank you for that.
    Cheers (from New Zealand)

    • Thanks Andres! Appreciate that a lot! If you have any questions or topics you’d like to read about – feel free to tell me

      • Andres Garcia

        Sure !
        What about a tutorial for in App Card payment feature ?
        It’s quite a mess to understand at first and confusing because of Android Pay, in-app billing etc that are not related at all, but confusing.
        And also, there are very very few tutorials about it (as far as I know)