Posted on

Android Cool Pop Up Animations


Android Cool Animations
Designed by Freepik

Hey there, today I want apply principles we learned in this post about circular reveal and go further by making cool material looking animations. What we’re going to implement is this awesome prototype. What I like in here for us to learn is FAB curve animation and its icon moving to the bottom of the screen and then backwards animation. If you’re excited about this then let’s get started!

Curve FAB reveal into pop up/another activity is cool itself, but what excites me here even more, besides beautiful design, is a great flow! I you follow me, then you probably read this cool blog post about making the app flow. It was another implementation of Anton Aheichanka’s prototype. Don’t know about you, but it wasn’t enough for me definitely. I want to make more of stuff like this! That’s the result I got, it’s a filter popup, the stuff inside is doesn’t matter for us now, check here for better understanding of the pop up purpose

Android Cool Animations

Main Steps

First of all, let’s break down the main animations we want to learn in here. First in Curve FAB translation with pop up circular reveal. We’ve covered the circular reveal basics in here. It pretty simple to use. Then it gets us to the second and the one I like in here: reusing FAB icon for the bottom actions list. The icon literally flies around the screen like crazy! Looks cool, you should definitively download the GitHub repo and try yourself. It looks so smooth and fluent. When reaching the center point FAB icon moved down and then horizontally to its final position. And cancel X button moves the same distance simultaneously which makes it looks easier to understand. Showing up top tabs and fading in bottom action bar.

When confirmed filters we collapse pop up with circular reveal which makes sense, because that’s the way it appeared on the screen. Very good practice. If you have any shared element transitions going back without one would look like something’s not right. Now look at thing thinking process: after you applied filters, FAB icon’s gonna be cancel X. And we have X in out bottom action bar, that’s why we not just hide bottom bar and show up FAB. It’s like a [email protected] dance in here! Amazing. If there’s one lesson from this post I want you to bring with you – keep connection between objects on the screen, not just show/hide them.

FAB curve

Ok, that’s a pretty trivial thing to animate. One thing to consider: your views can move only inside the parent’s boundaries. Pretty obvious, though sometimes you want it to move outside. It can’t though. If you read my previous post about Animation Types, then you probably feel pretty confident about the different ways to animate this FAB. I’m going to use Property Animations. Would be very nice to use ViewPropertyAnimator for this curve, but I decided to stick with ValueAnimator. And for creating this curve just gonna use simple math.

Look at those linear path and parabolic curve. The only thing different is Y coordinates, which means that we keep X linear and tweak Y coordinates with y = x * x to get a curve.

Android Custom View Animations     Andorid Animating Custom Views

Reveal, Fade In, Scale Up

I think you already know how to implement circular reveal, if not, check this post. The very basics, but understanding that you can animate anything. Bottom red sheet is simply overlaying popup and we animate its alpha from 0 to 1. Don’t forget that it has to be a distinct view, you don’t want to fade in action buttons, just the background. Then we scale up top tabs view from 0 to 1. Just set its pivot to bottom point so that is goes from there, not center

 Icons All Over The Screen

That’s the funniest part of this app ever! Once again, to fly around the screen your view’s root layout needs to take all that space. Since FAB is the first nested level, we’re golden. And of course it’s better not to create extra views for jumping icon, just remove FAB’s background and move it anywhere you want

setBackgroundTintList is the only way to get rid of FAB’s default background. All other methods do nothing, check their overriden implementations. First we animate Y position, then X. When reached the position at the bottom action bar I just remove FAB, there’s no need to mess the whole design logic just because of the animating icons. Just have static buttons as you would expect there.

Animate Back

Finally, when you applied your filters FAB is gonna be with cancel X icon. And that’s two reasons we have this X animating with a curve to center and backwards circular reveal. One – because we showed pop up with a reveal. Second – because after that animating X icon anywhere else would be stupid.

Same equation, just tweaked little bit different, I won’t put it in here. Now one more last thing. If you noticed, the red bottom bar shrinks into circle and moves exactly to the center where it meets X icon and merges into a FAB. Shrinking it is no big deal, but to animate its corner radius you need to have this drawable resource.

Why gradient inside, you might say? It’s that ShapeDrawable class doen’t have setCornerRadius public method, GradientDrawable has though.

50 dp will make a circle when width and height are the same, hence FAB. Just hide this view and show up FAB back at that position.

 

Alright, I just covered the most interesting stuff from this app. But I do recommend you check this repo for source code. Don’t to follow me of Facebook, G+ or Twitter.  If you like the stuff I’m writing about. And share with friends if you think they will find it benefiting!


  • Zorawar Sachdev

    Awesome work, Ihor!

    • Ihor Klimov

      Thanks, Zorawar!

    • Thanks, Zorawar!