Posted on

Android Circular Reveal Basics


Android making app look material

Hey guys, today we’re gonna continue to make our app look awesome as much as your imagination can go! And one of the cool things that I love and super exited about is Circular Reveal. This color switch is just so amazing and beautiful I want to put it everywhere. So let’s make our apps look better with Circular Reveal!

What it is

All animations in apps meant to guide user and help him to understand what’s going on in the app. They drag his attention to what we want him to look at, saving him time and help him make decisions faster. And Circular reveal is exactly here for that purpose. By no means app animations are meant just for aesthetic purpose. Otherwise there would be coolful cartoonish background on every app instead of blank white and bunch of animations everywhere where we can put them!  Here’s an example circular reveal

Android Circular reveal

 

Use cases

Let’s think where we can put it. It’s perfect for some big changes in layout like changing Activity, showing popups. Circle kinda leads to look at the whole picture of the revealed piece of the screen. On Play Store for example they use it when changing tabs. I like Circular Reveal animation starting from Floating Action Button most of all. But we’re just going to do what they have at Play Store with tabs for beginning.

That’s what I came up with

Android Circular Reveal

How it’s done

Circular Reveal does exactly what it sound like, it reveals the view. For example you have a blue square and Reveal animation would animate this view appearing from the point you tell it. Middle of the view, corners, etc. You set starting circle radius and end radius. Google suggests to set end radius to half diagonal of the rectangle in this tutorial. Although I find it better to use the max dimension of rectangle * 1.2. If you use half the diagonal and click in the middle of the view, if look fine, but clicking in corners would make a weird and glitch looking animation. It would reveal until some part and stop and then show up the whole view. Like part of the frames were dropped/ not full animation. Here’s an example

Android Circular Reveal

As you see clicking in the middle looks totally fine, but from corners it stops at the curtain level. Just compare to the first square example. Yeah, it’s a 10fps gif, which looks glitchy by itself, I’ll be putting better rate gifs in the future. And the code behind it is pretty simple

I get max dimension of the rectangle as for end radius and just to make it more overwhelming I add some extra by * 1.2.By the way you just set onTouchEventListener for the view, that’s where you call reveal from.  You can play around with that, it’s really fun. I’d say animations are the coolest thing to work with.

The key thing

But there’s one thing about Circular Reveal. It animates the bitmap of the view, it doesn’t draw a layer on top of your view, that’s why you don’t provide the reveal color to it. Again it does exactly what it sound like – reveals the view. So having a blue square and calling reveal method would look like that  – square is gone and appears from a circle. There’s no background during animation. That’s why implementing reveal has two key things

View

That’s your actual view, you setup onTouchEventListener on it, set its color, etc.

Reveal Overlay

That’s the view that overlays your view, its invisible from start. It has the dimensions of your view. On this view you call reveal animation. The view underneath is just for handling touch events and displaying stable color. That’s how it works: we have a blue square and invisible view on top. When you click on blue one it sets reveal view color (teal), makes it visible and starts animation. By the end of animation set blue square color to teal and hide reveal view. That’s it.

XML code is pretty obvious, so let’s just look at Java code

The first part is the same from before, what’s new in here is handling when animation is done. I keep in memory what current color is selected and based on that set colors for reveal view and base view.

Animate Status Bar

Now when you understand the principle of using the API you can see how it can be done for anything else. The coolest thing comes when it’s done from one object to another like from FAB to rectangle. And let’s continue with TabLayout.

For this approach we will need not 2, but 3 views. Two for color and one – Toolbar for overlay text on top. And if you want to reveal effect touch status bar as well, then we need to draw our view under it. Disable actionBar and make status bar translucent in style.xml

Don’t forget to check if you have any fitsSystemWindows attribute enabled on your layout. You don’t need that, it won’t draw the content under the status bar. Now just draw a base view with the height of status bar + toolbar. Since status bar is translucent it will be darker and toolbar with margin top of status bar height. You can look at the second gif in here to see what it would look like. The whole status bar, toolbar and tabs is just one view and a reveal view on top of it. 

TabLayout

Seems pretty obvious – you listen for touch events on tabs, play animation. The problem in here is that tabLayout.getTabAt() returns Tab class which is not a Android View child. And there’s no touch event handling in it. The simplest solution here is to use tabLayout.getTabAt(i).setCustomView() and passing an XML layout or a View. Then we can get it by tabLayout.getTabAt().getCustomView() and setOnTouchEventListener on it.

There’s an extra code for changing toolbar color when you swipe ViewPager, but I don’t want to include it in here since it’s not so relevant. And I also had an issue that custom view received only MotionEvent down, but I need to handle UP, since tab changed on action up.

All of that you can find in this repository!

Hope you find it as exiting as I do! Don’t forget to subscribe to receive the latest updates!