How to Create Fancy Screen Transitions Used in Walkthrough in Android Google Drive App
Sebastian Staszynski
Google Drive App Walkthrough
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!
Drive Your Product to Success – Free Guide for Digital Product Owners
Even the best team can’t deliver a successful product without proper guidance. If you own a digital product, our Ebook will be a perfect resource for mastering the fundamentals of successful product delivery.
GET FREE EBOOKUsing 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:
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
| 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
Text Switch Transformer
Rotation Transformer
Up Transformer
Sebastian Staszynski
Build a mobile app with experts with 12 years of experience
Our experts help with the whole process from idea to app release
Build a mobile app with experts with 12 years of experience
Our experts help with the whole process from idea to app release
