I really like the way Instagram handles ‘liking’ in their applications. As far as I remember, they’ve always had this double click tap this to like double-tap-to-like—plus-amazing-animation thing going for them and I like everything about it. It’s easy and delightful!
So, how does one go about implementing this in an Android application? The key is using an ObjectAnimator and some nifty Interpolation. Let us go over it!
For this to work, we need a view that listens for double-tap events. This can be any view. For brevity, I use will be using a RelativeLayout. As a starting point, the project should have one activity and its associated layout file.
Alright. So, that’s a good starting point. Now, let’s start with the implementation. First off, we need to create a drawable asset for the outer circular rings around the heart (see: above).
We also require an image of a heart. I prefer using a vector asset for this (‘cuz vectors are awesome!).
Once, these resources are added, we need to add them to our layout file. Add the following snippet to the end of activity_main.xml (inside the root element).
Now, we need to attach the View and ImageView we just added to our Java code.
Next, let us define some helpful constants to make our code cleaner.
Finally, the most important bit: the methods which will handle the animation. These go inside the class.
That wraps up the animation side of things. We now need to instantiate a GestureDetector which will help us detect those double taps on our RelativeLayout (or any other View for that matter).
For starters, let us define a GestureDetector object and instantiate it inside onCreate(). The constructor for the GestureDetector object takes two arguments: the context and a GestureListener. Now, since this is just an example, I created the GestureListner class as a public class within the same Java file.
Just one more thing to do now. We need to call our GestureDetector’s onTouchEvent method everytime the RelativeLayout is touched.
That’s it! If you want, you can checkout the GitHub repo as well!