Category: Android, Blog, Development • 7 October 2015

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

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

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!

Complete source code can be found on Droids On Roids Github

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:

1
2
3
4
5
6
7
8
9
10
11
if (position < -1) { // [-Infinity,-1)
    // This page is way off-screen to the left.
} else if (position < 0) { // [-1,0)
    // Left visible page fraction
} else if (position == 0) {
    // One page centered
} else if (position > 0 && position <= 1) { // (0, 1]
    // Right visible page fraction
} else { // (1, Infinity]
   // This page is way off-screen to the right.
}

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

Default transition:

default

Getting current page index:

1
2
3
4
5
6
7
8
9
10
@Override
public void onViewCreated(final View view, final Bundle savedInstanceState) {
    final int position = getArguments().getInt(ARG_POSITION);
    final String text = MainActivity.Content.values()[position].getText();
 
    view.setTag(position); // saving index
 
    final TextView contentTextView = (TextView) view.findViewById(R.id.contentTextView);
    contentTextView.setText(text);
}

1
2
3
4
5
@Override
public void transformPage(final View page, final float position) {
    final int pageIndex = (Integer) page.getTag(); // reading index
    transformPage(page, pageIndex, position);
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public class ColorTransformer extends BasePageTransformer {
 
    private static int blendColors(int color1, int color2, float ratio) {
        final float inverseRation = 1f - ratio;
        float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);
        float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);
        float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);
        return Color.rgb((int) r, (int) g, (int) b);
    }
 
    @SuppressWarnings("UnnecessaryLocalVariable")
    @Override
    public void transformPage(final View page, final int pageIndex, final float position) {
 
        if (inRange(position)) { // [-1, 1]
            if (isRightPage(position)) { //(0, 1]
 
                final int leftIndex = pageIndex - 1;
                final int rightIndex = pageIndex;
 
                final int leftColor = MainActivity.Content.values()[leftIndex].getColor();
                final int rightColor = MainActivity.Content.values()[rightIndex].getColor();
 
                final int composedColor = blendColors(leftColor, rightColor, position);
                page.setBackgroundColor(composedColor);
 
            } else if (isLeftPage(position)) { //[-1, 0)
 
                final int leftIndex = pageIndex;
                final int rightIndex = leftIndex + 1;
 
                final int leftColor = MainActivity.Content.values()[leftIndex].getColor();
                final int rightColor = MainActivity.Content.values()[rightIndex].getColor();
 
                final int composedColor = blendColors(leftColor, rightColor, 1 - Math.abs(position));
                page.setBackgroundColor(composedColor);
 
            } else { // position == 0
                page.setBackgroundColor(MainActivity.Content.values()[pageIndex].getColor());
            }
        } else { //(-Infinity, -1) or (1, + Infinity)
            page.setBackgroundColor(MainActivity.Content.values()[pageIndex].getColor());
        }
    }
}

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.

Every transformation source code can be found on Droids On Roids Github.

Enjoy playing with transformations !!!!

Cube Transformer
cube

Text Switch Transformer
text_switch

Rotation Transformer

rotation

Up Transformer
up

Complete source code can be found on Droids On Roids Github

LinkedIn

Sebastian Staszynski

Android Developer at DroidOnRoids, Experienced in Embedded Software Testing, Labview Polish Champion, Android hobbist, "If you do what you love, you'll never work a day in your life."