Posted on

Android Advanced Circular Reveal


Android Advanced Circular Reveal

Hi, in my previous post we looked at the basic reveal effect which we applied to view. Though it looks great and makes your app look fresh we still need a lot more to make a cool material look. In this post we’ll use the skills that we learned before and make more advanced view animations. We’ll animate views, scratch them, change their shapes to guide users and make our app look amazing.

Circular reveals are really awesome, but they are just a part of the whole thing. The idea is to change view shapes, go from one view to another like it’s just one view changing shapes. And what we’ll be doing today is a sign in button animation from here. When clicked it goes to circle, then after a while it reveals to the whole screen and new activity starts. I’m not going to implement the whole thing and not in exact way how it’s done there.

Android Advanced Circular Reveal

Shrink Button

Let’s start with shrinking the button when it’s clicked. There’s definitely more than one way to do that. You can use reverse circular reveal, but it wouldn’t look like in the prototype. Here it’s more like shrinking width till it becomes a circle. We can do it with Animated Vector Drawable or just with static drawable backgorund shape and animating view width. That’s what I think is  easier.

Button shape

Making this kind of shape is easy. The height of it as I assume is the same as Floating Action Button there, hence 56 dp. Width by your choice. And basically it’s a rectangle with rounded corners. Let’s create a drawable shape file called sign_in_btn.xml

Pretty straightforward, I have a FrameLayout for which I set this drawable as background and there’s a TextView inside of it.

Shrink Animation

I use ValueAnimator class over int with duration of 250 ms on each change of value I resize button width. That what it looks like

Final width is 56 dp in pixels and on each update we change buttons layout params and requestLayout to update layout.

Fade Out Text

Then at the same time we fade out text taking the same 250 ms. I think it’s a perfect animation time, not too slow and not too fast so that you can still enjoy it. When text is out we show up Progress Bar. Here’s the code for this part

 

Load Stuff

Since it’s just a demo, there’s nothing to load. I just wait for 2 seconds using postDelayed method of Handler class and show reveal animation.

Reveal

Now the coolest part, what we have in here is a smooth activity change and it looks awesome. I have a view of red color which takes the whole screen, that’s a view for reveal animation. If you’re not familiar with Circular Reveal animations, you can check my previous post about it and download this repo to try yourself.

After done loading I do three actions simultaneously: reveal button, fade out progress bar, start next activity

Since it was a button I had elevation of 4 dp on it to cast a slight shadow. We need to get rid of it before revealing because it needs to look like round button and reveal view are one single. I set reveal duration to 350 ms which found to be the best. Reveal starts from button position with its radius and ends 1.2 of max screen dimension size. In portrait it’s height of course. The reason I add 20 more percent than just the max dimension is to give it an overwhelming look. Like it’s not going to stop on the screen size and goes further.

Start Next Activity

I could start next activity when reveal animation is done, after 350 ms. But there’s a slight delay between calling startActivity method and displaying it. It would look like you reveal we button, the whole screen is red and after a while we see next activity.

That’s why I decided to start it in the middle of animation. Just after 100 ms since the start of it, when reveal animation takes 350 ms. But as your see it looks smooth and the most reveal animation is played anyway. Doesn’t matter if you skip some part of it. That’s the code behind it

 

Those three methods are called simultaneously after loading is done. And that’s it

Resources

Alright, that was some of the Advanced Android Circular Reveal stuff where we animated views in a gooey style. It was just a small piece of this prototype. I thinking about implementing the whole thing, I like it and feel like we all can learn a lot about Android development just by implementing this stuff. Plus it’s always great to get ideas from sites like Dribble and MaterialUp where designers post their great ideas. I could not possibly come up with such cool material design stuff. But using these resources you can get great ideas, choose what you like and do the stuff that you do the best – programming. And of course in the future coming more of the UI stuff like Activity Transitions and more.

 

 

If you want to test this stuff yourself – feel free to download this repo. Thanks for reading and if you like the stuff that I do – subscribe to email newsletter, I post three times per week. Subscribe to my YouTube channel and share it if you think somebody could benefit from this stuff!


  • Morayo

    Hi. I’m trying to use this with google sign in. I do not know where to place the code in my file and also I had some problems with the data binding stuff. I would be my immense pleasure if you could do an example of how to integrate it with google sign in in android studio. Thanks very much (^_^)