All posts
Android

How to Create Fancy Screen Transitions Used in Walkthrough in Android Google Drive App

Sebastian Staszynski

Sebastian Staszynski

Google Drive App Walkthrough

drive

Recently I found a great introduction screen in Google Drive App visible above. I really like Google color transition between screens. It was my inspiration to create this cool color transition by myself!

Using ViewPager for Screen Slides

I started searching about screen transition in Android Framework and I found this: Using ViewPager for Screen Slides. So the easiest way to create screen transition effects is to use ViewPager and PageTransformer. I will focus on PageTransformer through this post.

PageTransformer

PageTransformer is simple Interface that has single method transformPage(View page, float position). This method is triggered every time the screen position changed. It provides reference to the root View of the page and value which represents visible fraction of that page.

position value provides information about page fraction:

So we have everything to create this beautiful color effect !!!

Default transition:

default

Getting current page index:

Because we get the same view in onViewCreated(...) and transformPage(...), I used View.setTag(Object), View.getTag() to save current ViewPager index. With this simple utility I created BasePageTransformer class which adds abstract transformPage(View page, int pageIndex, float position) method. It will help me with color transition later.

Color Transition

color

I found blendColors(int color1, int color2, float ratio) in SlidingTabStrip class written by google. It basically blends two color with specific ratio – exactly what we want.

I think that the code is really straightforward, find neighbour pages indexes, get appropriate colors, blend them with proper ratio, set background color with new color.

 

Other transitions

I was playing with transformation a little longer, the results you can see below.

Enjoy playing with transformations !!!!

Cube Transformer
cube

Text Switch Transformer
text_switch

Rotation Transformer

rotation

Up Transformer
up

Newsletter

The post is created by Droids On Roids Team Member.
We would love to take care of your business.

Leave comment