Using combination of Object Animator, Circular Reveal and Alpha Animation

Fork me on GitHub

I like user interfaces, and for that very reason, I like going through UI mockups on Dribbble. The problem with most of the designs are that, they have too much animations, or they cannot be implemented programmatically in an easy manner. I found this post by Mathias Adam, which seemed to have right combinations of animations. So I took my laptop out and coded it. The entire codebase is on GitHub. Optionally you could download the APK from here.

Material Card Animation by Mathias Adam

BUILDING THE USER INTERFACE (UI)

The UI is made up of four basic views

The parent layout is a CardView, which has ImageView on top, TextView's on the bottom and a FAB button in between. Clicking on the FAB button produces Translate Animation followed by Circular Reveal animation.

LAYOUT IN EASY STEPS

Layout is pretty simple, and is the same as what I did in my previous blog post. So I will not be covering how to setup the layout in detail. You may go through my previous post for more in depth information on coding the layout.

Inside the CardView, I'm using RelativeLayout. ImageView is placed on the top, TextView's at the bottom, and finally the FAB Button, in between the ImageView and TextView.

FAB Button Layout

ANIMATIONS TAKE THE STAGE

A combination of three animations are used in this project, which happens sequentially one after the other.

Translate Animation

In the 3 step process, translate animation comes up first. Here I want to translate the FAB Button into the center of the ImageView.

Translate Animation characteristics

where x is the distance to tanslate to the left (to the center). The value of x is calculated by

x = imageView.getWidth() / 2;
x = x - ((16 * pixelDensity) + (28 * pixelDensity))
// where pixelDensity is to translate dp into pixels

y is just half the vertical distance of the ImageView, which can easily be computed by

y = imageView.getHeight() / 2;
Circular Reveal

Soon after FAB translation, circular reveal comes into action. Unlike my previous blog post (where I have to find hypotenuse since the reveal animation starts from the corner), this time, it's simple to create the animation. Just follow the instructions given by Android Documentation, and you are good to go.

Alpha Animation

Finally after circular reveal, slowly fade in the buttons, to give the entire UI a welcoming feel. This is the easiest of the three, since there are no complex algorithm or logic required.

The easiest way to implement alpha animation is by creating an xml file and saving it in anim folder. The xml for fade-in animation is.

And that for fade-out animation is

Once the above two files are stored in anim folder, the next part is to get these files loaded in the java code. For this call the loadAnimation(Context context, int resourceId) method of AnimationUtils which will return a Animation object. With the respective view call the startAnimation() method, with the above Animation object as argument.

These animations happen one after the other, thanks to AnimatorListener class, which has onAnimationEnd(Animator animator) method, which can be overridden to perform the desired action.

For example, if in our case, once translation animation is completed, circular reveal animation starts. The below gist does the job

SEE MATERIAL CARD ANIMATION IN ACTION

Dribbble design by Mathias Adam
Download APK
GitHub