Colored Tab Animated like Google Play Store

Daniele Orlando
ProAndroidDev
Published in
3 min readFeb 19, 2019

The new Play Store has a beautiful animation when you change the tab (Home, Games, Movies, Books…)

Here’s an example:

Google Play Store animation

But how can we reproduce this animation?

First, if we want to draw the CircularReveal under the statusbar, we need to disable it and make it translucent.

Now, the toolbar is drawed under the statusbar. So we need to set the margin top of our toolbar with the height of the statusbar to view it correctly.

Now the toolbar is placed with a tablayout below. But how create the Circular Reveal in the right way?

The trick is simple. We use 2 views in addition to toolbar. One for the background and one for the reveal. The two views has the exact dimension of the toolbar + tablayout.

Making the tablayout and the toolbar transparent, we can use the background view and the reveal view to animate properly without drawing over the text.

Create the Circular Reveal is very simple.

https://developer.android.com/reference/android/view/ViewAnimationUtils

The view is our reveal view, centerX and centerY are where we tap on tabs, startRadius is 0f and endRadius is the max dimension of the reveal view.
I put an extra of 1.2f just for being more comfortable.

The code below is very simple. Getting the first tab and adding a listener, we get the X and the Y of the tap.

Once we got the XY’s, we put some magic to animate all things 🧙‍♂️✨

This is the final result ❤❤

The full source code is available on my repository:

I added an extra bonus. The previous scenario works only when we select a tab with a single tap. But if I change the tab using a viewpager? It’s not correct to use a Circular Reveal in this case. So here’s what I did.

Thank you for using your precious time to reading this article.

Did you liked this tutorial?
Clap your 👏 to say “thanks!”, follow me and help others find this article.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Published in ProAndroidDev

The latest posts from Android Professionals and Google Developer Experts.

Responses (1)

Write a response