Using combination of Object Animator, Circular Reveal and Alpha Animation05 Sep 2015
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.
BUILDING THE USER INTERFACE (UI)
The UI is made up of four basic views
- FAB button
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.
ANIMATIONS TAKE THE STAGE
A combination of three animations are used in this project, which happens sequentially one after the other.
- Translate Animation
- Circular Reveal
- Alpha 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.
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;
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.
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