Posted on

Android Awesome Login Screen Animations pt1


 

android login animation

Designed by Freepik

I saw this design, thought it’s relatively challenging yet possible to implement. I like to implement some designs as a good exercise for skills and problem solving. So let’s get started!

 

First of all we need to break animation down. There’s side sliding input views, angular reveal button, scaling text and jumping buttons. We’re going to focus now on sliding animation and button reveal.

Side Sliding

I like to find the easiest way possible to implement things and this one is pretty easy to do with moving pivot to bottom and rotating whole layout. Those input fields are in LinearLayout which takes the whole screen. Here’s Java code

android login animation

Triangle Reveal

Ok, first one was simple and perfectly would be to just set background color for that layout, but in that design there’s two lines: one from top of button, another from bottom. Plus it slides to the right and there’s a round side which makes it quite complex animation.

And the only way possible is to implement it with Canvas animation. If you’re not familiar with those, check this post as a good introduction and this post for Android animation types, to understand why there’s so many different way to animate stuff.

We’re going to draw Path since it’s a complex shape. Let’s see what kind of input do we have. Obviously, animation goes from 0 to 90 degrees, so let’s use this as core input. We know angle and width, only thing unknown is position at a time. And without any memory of school geometry using this site to draw triangles from angles and this to figure which formula needed I figured it’s tangent.

android login animation

The core function here is tan and since it takes angle in radians I use value animation from 0 to PI/2 (90°). Values in comments are approximate, just to understand the behavior. Invalidate() triggers onDraw method and we reset path on each frame.

Full Reveal

Ok, that was a triangle, but what about full reveal? Now three’s 4 points, but it’s better to still think of it as a triangle, not polygon

android login animation

Line DG is our top of the screen. I like to visualize things, looking at this image you can tell that angle DGA is same as CBA. Also we can get DA length using our previous code. And with this site again using match-n-try method I figured it’s cotangent function that we need

height variable is height of view, which is CD length here and y is CA on the graph. That’s updated code

android awesome login screen animations

Button

Before it was just animation reveal from right bottom corner, let’s add some sliding effect from button. Which means that we need to animate two values simultaneously: angle and x position. I like to do this with top value animation from 0 to 1 float and use animated value to get current value from it.

And using same principles as before, added bottom reveal

android awesome login screen animations

Animating round part of button I implemented with squeezing a circle. Perfectly to do it with bezier curve, don’t know how to draw initial perfect half circle with it yet. That’s what I got today

android awesome login screen animations

 

It will look even better when there will be scaling text, jumping buttons and the rest which I’m going to implement in the next part. You can get current source code here and don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends if you think they will benefit from it!