ViewPager // Animate with PageTransformer

I was recently working on an onboarding flow using ViewPager, which resulted in a pretty basic / boring experience. I wanted to enhance the user's experience with a few animations as I've seen this done in other apps and concept designs.

ViewPager can implement a useful interface, ViewPager.PageTransformer, which exposes a single method, transformPage(). This lets you create some great slide animations depending on the position of the page on the screen (e.g. Zoom-out & Depth page transformer).

The position parameter indicates where a given page is located relative to the center of the screen. It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0. When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5. Based on the position of the pages on the screen, you can create custom slide animations by setting page properties with methods such as setAlpha(),setTranslationX(), or setScaleY().

With that in mind, I was looking to animate the individual elements within the page, rather than the page itself. The transformPage() method provides us with the position value and the page view. By transforming the views within the page view, we can create some interesting transitions. 

I put together a sample app with a few example sets:

  1. List of Settings (Transition X animations)
  2. User Profile Card (Transition X animations)
  3. Feature Set (Scale X, Scale Y, Alpha animations)

Code Samples

Once the basic ViewPager is setup, I created a class that implements ViewPager.PageTransformer. From here we can override the transformPage() method, look for the different page positions, find the views we'd like to transform and apply the desired transforming effect on the view (e.g. setTranslationX(), setScaleY(), setAlpha(), etc.). 

Then we simply set setPageTransformer() on the ViewPager.

By applying a few simple animations to your views, you can really enhance the look and feel of your onboarding or general user experience.

All the code is provided on my GitHub page.

designNick Millwardviewpager, animation, onboarding, pagetransformer1 Comment