InstaMaterial concept (part 5) - Like action effects
This post is part of a series of posts showing Android implementation of INSTAGRAM with Material Design concept. Today we’ll create like effects in feed items which are presented between the 20th and 27th second of the concept video.
This is the final effect described in today’s post (for both Android Lollipop and pre-21 versions):
Like the feed item
Based on the concept video, in our project we have two ways for liking feed item - like by heart button and by click on photo (actually I’m pretty sure that it should work after double click, just like in the real Instagram app, but let it be small exercise for you to implement double-click handler 😄).
As usual we have to update and add some resources used in our project. Today we have to add a bunch of hearts:
(starting from left: heart for likes counter, heart for liked button, heart for photo like animation).
Let’s start from the simplest effect. Like counter should be updated with in/out animation (old value goes up, while the new one comes from down). This is how it looks in practice:
Looks familiar? That’s right - this is the same effect like in send comments button described in third post of series.
This time we’ll use TextSwitcher - ViewGroup class which helps to animate between labels composed from a couple of TextViews. For our needs we’ll use two of them (we’ll animate between them with updated text value by calling
First of all let’s update our
item_feed.xml layout by adding like counter to the bottom panel:
And here is the visual preview from Android Studio for added view:
TextSwitcher used in our code will animate between its two child TextViews. We don’t have to worry about hiding them - it’s made automatically.
android:outAnimation values are used for transition between previous and next child.
0dp for better performance
LinearLayout which wraps our likes counter uses
layout_weight="1" (keep in mind that its parent is also the
LinearLayout). When only one child of
LinearLayout uses weight value it will absorb all the remaining space in parent (like in our case - look on the screenshot above). By using
layout_width="0dp" (or height in vertical oriented LinearLayouts) we made a little perfromance improvement because our view doesn’t have to measure its own size first.
Now let’s add some code to our
FeedAdapter. The only worth mentioning code is
updateLikesCounter() method (here is the full commit with all changes):
This method is used for updating likes counter in two ways:
- with animation (for dynamic update - while user performs like action) - it uses
- without animation (used by
onBindViewHolder()for setting current likes count for feed item) - uses
TextSwitcher.setCurrentText()- this method update currently showed TextView’s text.
Also, as you probably noticed, we are using Quantity Strings for proper handling words with quantity. Here you can find more details about using Plurals in Android.
Button like animation
Now we’ll focus on like button animation. Its behavior is a little bit fancier than on concept video and looks like on the screenshot below:
Bundling multiple animations
This effect is composed from multiple animations bundled in one set. That’s why we cannot use
ViewPropertyAnimator like we did before. Fortunately there is a simple way to play multiple animations which are depends on each other. Thanks to AnimatorSet we can bundle animations together and play them simultaneously, sequentially or in the mixed way. It’s described wider there: Choreographing Multiple Animations
Our like button effect is composed from 3 animations:
- 360 degree rotation - played at the beginning of our animations set
- Bounce animation - composed from two animations played together (
scaleYanimations), fired right after rotation finishes.
Here is the full source code of method which is responsible for setting like button image (in animated and static way, like in likes counter):
In lines 25 and 26 we compose our final animation.
This time we used
ObjectAnimator which can animate properties of target object. We can use
argb values to animate and use every property of object which has setter which accepts selected type of value. So in our case using
ObjectAnimator.ofFloat() method with
rotation value animates rotation by calling
setRotation(Float f) method.
Here is full commit which adds like button animation.
Photo like animation
A little bit more complex is photo like animation. This time we animate values of two different objects (but still in one
- Circle background below animated heart (scaling up and fading out)
- Heart icon (scalling up and down).
The effect looks like below:
And here is the source code for this animation:
Again we used
AnimatorSet (composition in lines 40-41).
And that’s all for today, thanks for reading! 😄
Full source code of described project is available on Github repository.
Author: Miroslaw Stanek