Medium Clap Animation in Android

Medium Clap Animation in Android

Medium clap animation is one of the most intriguing animations I’ve come across so far, so I decided to recreate it as it would be challenging and fun at the same time. So go ahead and create a fresh new Android Studio Project.

Getting started

Before we actually begin with our animation, let us understand the layout first.

So the Coordinator Layout which is the parent layout has two children

• FrameLayout
• ImageView

The FrameLayout further has a FloatingActionButton (simply for a circular view) and a TextView (for displaying the clap count).

The ImageView (other child of Coordinator Layout) is used for displaying the clap image on which the user clicks and animation begins.

Both the children have attribute layout_gravity set to center (simply to bring them to the center of the layout or screen). It should be noted that the alpha attribute of the FrameLayout is set to 0f since the layout is invisible before the start of animation.

This is what the layout should look like 👇

UI of our layout

Only the clap icon (Image View) should be visible and the frame layout should be invisible (alpha : 0f)

Breaking down the Animation

The animation can be thought of as 3 sub animations combined together.

Animation 1 (Rise)

This animation simply shows the expansion or scaling up or rise of the frame layout (which holds the circle and the clap count)

Rise (Animation 1)

Animation 2 (Shrink)

Animation 2 simply shows the shrinkage or scaling down of the frame layout after animation 1 is over.

Shrink (Animation 2)

Animation 3 (Fade)

This animation simply fades away the frame layout along with some upward movement (translationY). This animation can be called immediately after the previous animation (shrink) or after many more claps.

Fade (Animation 3)

Now that we’ve seen proper breakdown of the animation, let’s put it in code.

Code

The basic idea is to animate the frame layout on click of the clap image.

Let’s proceed with the code in the same order the way we broke down our animation i.e. rise, shrink and fade.

1. Rise

The rise animation is simply combination of effects like translationY, alpha and scaling.

We should start by setting up an onClickListener on the clap image inside which will reside out animation code. To create the rise animation, we need to translate our frame layout by certain amount along Y axis (upwards), scale it evenly (by same amount) along X and Y axis to a relatively bigger size and make its opacity maximum by the end of animation. The below code shows us how to achieve that.

2. Shrink

The shrink animation is simply scaling of the frame layout back to its original size (1f). This can done using scaleX(), scaleY().

The shrink animation is followed by the rise animation, that means that we have to start the shrink animation at the end of rise animation. We will be using a method withEndAction(Runnable r) to attach our shrink animation as an ending action to rise animation.

Lets give our project a run and see what the animation so far looks like.

Animation so far

Oops!!! That is not what we wanted

Here is the catch! The frame layout (enclosing the circle and clap count) doesn’t always have to translate upwards in the rise animation. In the actual animation, it translates upwards only on the first clap and for all the subsequent claps the rise animation proceeds without the translation effect yet holding the scaling (expanding) effect.

Moreover, there is slight variation in the scaling effect and the duration in which the animation(rise) is completed after the first clap. The nature of animation still remains the same, only the value by which they animate changes slightly. If you look closely in the actual medium animation, the circle scales up slightly more and also takes less time to complete the animation after the first clap.

So we need to use a flag to ensure that the translation effect in rise is shown only on the first clap. So go ahead and create a boolean in your activity just like below and set it to false initially.

private boolean firstClapCompleted = false;                 

We need to set this variable as true after the first clap. We can achieve this by setting up an AnimatorListener on our rise animation. So update your existing code like the snippet shown below

Lets give it a run now

Rise and Shrink combined

Yeah!!! That looks proper now

We are almost done with our animation, only thing remaining is the fade animation which comes after both animations rise and shrink have been completed and none of them is re-playing again which also marks the end of the entire clap animation 😃

3. Fade

As we know for fade animation to begin, it has to be called after the shrink animation and more importantly we have to make sure that no other rise animation or shrink animation is running at the same time. We shall need two more boolean variables for the same.

private boolean riseAnimationRunning = false;                 private boolean shrinkAnimationRunning = false;

Update the variable riseAnimationRunning in the Animator Listener we set had set up for rise animation. Just like this

@Override
public void onAnimationStart(Animator animation) {
       riseAnimationRunning = true;
}

@Override
public void onAnimationEnd(Animator animation) {
       riseAnimationRunning = false;
       firstClapCompleted = true;
}

We also need to keep track of shrink animation so for that set up another AnimatorListener on our shrink animation and update the flag shrinkAnimationRunning inside the listener just as we did for rise animation,

//Shrink Animation (Inside withEndAction() of rise animation)
clapCountLayout
       .animate()
       .setDuration(60)
       .scaleX(1f)
       .scaleY(1f)
       .alpha(1)
       .setListener(new Animator.AnimatorListener() {
              @Override
              public void onAnimationStart(Animator animation) {
                     shrinkAnimationRunning = true;
              }
              
              @Override
              public void onAnimationEnd(Animator animation) {
                     shrinkAnimationRunning = false;
              }
              
              @Override
              public void onAnimationCancel(Animator animation) {
              
              }
              
              @Override
              public void onAnimationRepeat(Animator animation) {
              
              }
       })
       .start();

We are just one step away from what we want to achieve 👏 👏 👏

Finally, the fade animation is simply fading the frame layout as it translates which can be achieved through the following snippet. As the fade animation is called after the shrink animation, we should call withEndAction(Runnable r) on shrink animation to attach fade as an ending action of shrink.

Above snippet must be inside runnable of shrink animation

And that’s it. Let’s give it a run

Final Animation

Hooray!!! 🏆 🏆

The animation is finally completed. We can obviously go ahead and reset the position of the frame layout after the fade animation for a consistent experience. You can give it a try yourself or refer to my gihub repo:

usman18/Medium-Clap-Animation

Now this is just my first thought breakdown of animation into code, I am pretty sure there are much better ways of implementing the same into code. The focus of the article is more on how to breakdown animations (visually or in your mind) and then get started with code (which again may have multiple implementations).

Thank you for reading my article. Leave a few claps if you really enjoyed it. I’ll be creating more of this. If you have any animations or UI in your mind, feel free to comment below.

Let’s become friends

• Twitter
• LinkedIn
• Github