Posted on

Android Awesome Login Screen Animations pt2


android canvas animations

Designed by Freepik

Let’s continue implementing this stuff. I’m sure we all will learn a lot from it. We have scaling text, jumping buttons and make second switch button.

If you haven’t followed, that’s what we finished last time in this post.

android canvas animations

And that’s what we’ll get today

android canvas animations

Scaling Text

Text which moves from buttons to center I draw with canvas manually as well. One good method to point is this

And after that instead of usual top left metrics like we’re used to it will go from center of text which saves lot’s of extra code. Text size and color are all paint variables. And the rest is pretty obvious.

Bouncing Buttons

Here I have just one login and signup, but in original design there’s extra buttons for social logins which animated same way. It seems quite complex thing to animate, but fortunately it isn’t with interpolators. Check this post if you want to learn more about them.

So as for animating buttons we only need to write this animation, it’s just a linear animation

android canvas animations

Since we have our skeleton already, it was just a matter of adding extra animation on completion of sliding one and animating few values.

So to make it bounce you just set BounceInterpolator and that’s it, no other changes from your side.

But this default Android interpolator has a frequent bounce rate. I used custom one, thanks to this guy.

And here we got the core animations implemented, it was fun. If you want to learn about how I managed to copy design layout pretty well, check this post. I also slowed gif down up to 1% of its speed to understand animation. You can get source code here, it’s not fully functional, mostly a mock up. And don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends if you think they will benefit from it!