Creating an intro screen for your app using ViewPager and PageTransformer— Part 1

Part one in a two-part series.

Creating apps is not just about writing code. It’s also about creating something that users want to use and are comfortable using. Everyone should feel at home immediately upon launching the app.

Today, we’re talking intro screens.

The images above are taken from the official Google Drive app and show how their intro screen is interactive, easy to use and entertaining.

Here’s a video of it in action:

Google Drive intro screen with parallax effects

The background color fades as you swipe between pages and objects on the screen move in layers at different speeds. This is commonly referred to as parallax scrolling.

Question is: How did they do that?

The simple approach

Most Android developers know about the ViewPager and its ability to swipe between Fragments without much of a hassle when it comes to setting it up.

Therefore, let’s see what it looks like if I were to implement a simple intro screen naively using a ViewPager:

Our initial version of the intro screen

We’ve got a title, description, an image and a custom background color — but that’s about it. It’s really quite boring if you compare it to Google’s version.

So, how do we make it more interesting and fun? This is where the PageTransformer and a few nifty tricks come in play.

Adding a PageTransformer

Take a look at the video below. That’s the result of 10 minutes writing a custom PageTransformer and it shows you some of the things you can do with it.

The updated version with scrolling effects

In the video, you’ll see the title, description and image fade out as we swipe. Additionally, the description moves out of the frame and the image moves opposite of the scrolling direction.

Naturally, this is just a simple example of the things you can do.

Code samples

Below you’ll find everything you need to recreate the effects in the second video.

Be sure to read the comments in the code, especially the ones related to the PageTransformer.

The comments explain much of what’s going on in the code and go on to tell you how you can use the data provided by the PageTransformer to create an even better user experience.

The next post will go into greater detail on the PageTransformer.

More specifically, how you can improve performance, ensuring that your animations and effects run well on even older Android devices.

Here’s a hint: It’s somewhat related to my previous post on caching.

Taking it to the next step

Here are some ideas for you to take everything to the next step:

• Use bold colors and cartoon-like images
• Fade between background colors when swiping
• Make use of the various View properties, including alpha, elevation, scale, size, rotation and translation
• Create and use images with several layers to emphasize the effect
• Small animations when the page is selected (i.e. when position is zero)
• Don’t be afraid to play around