Create an Instagram/Twitter Heart Like Animation in Android

In this article, let’s learn how to create an Instagram/Twitter heart Like animation in android. Twitter’s Like animation is quite good and attractive. Suppose one wants to make an app like Twitter, Instagram, or Facebook where users can like posts there one can use this view. One can also use Leonids instead of this but it is very easy to use as compare to Leonids. This is an Animation Library and animations help to gain the attention of the user so it is best to learn it.

Approach

1. Add the support Library in build.gradle file and add dependency in the dependencies section.

   
   

   
   
   

   implementation 'pub.hanks:smallbang:1.2.2'

2. Create a new Android Resource Directory and for that right-click on res folder -> Android Resource Directory, make sure to select resource type as color.
3. Now create a new file text_selector.xml in color directory and add the following code. This file is used to select the TextColor based on the state of TextView.

   text_selector.xml

   
   

   
   
   

   <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:color="@color/colorPrimary"           android:state_selected="true"/>     <item android:color="#D6D6D6"/> </selector>

4. Now create a new file ic_heart.xml in drawable directory and add the following code or you can download the vector image from this Link and paste it in drawable folder.

   ic_heart.xml

   
   

   
   
   

   <vector android:height="32dp"      android:viewportHeight="412.735"     android:viewportWidth="412.735"      android:width="32dp"      xmlns:android="http://schemas.android.com/apk/res/android">     <path android:fillColor="#FF000000"       android:pathData="M295.706,35.522C295.706,35.522 295.706,           35.522 295.706,35.522c-34.43,-0.184 -67.161,14.937            -89.339,41.273c-22.039,-26.516 -54.861,-41.68 -89.339,           -41.273C52.395,35.522 0,87.917 0,152.55C0,263.31 193.306,           371.456 201.143,375.636c3.162,2.113 7.286,2.113 10.449,           0c7.837,-4.18 201.143,-110.759 201.143,-223.086C412.735,           87.917 360.339,35.522 295.706,35.522zM206.367,           354.738C176.065,336.975 20.898,242.412 20.898,152.55c0,           -53.091 43.039,-96.131 96.131,-96.131c32.512,-0.427            62.938,15.972 80.457,43.363c3.557, 4.905 10.418,5.998           15.323,2.44c0.937,-0.68 1.761,-1.503 2.44,           -2.44c29.055,-44.435 88.631,-56.903 133.066,-27.848c27.202,           17.787 43.575,48.114 43.521,80.615C391.837,243.456 236.669,           337.497 206.367,354.738z"/> </vector>

5. Now create a new file ic_heart_red.xml in drawable directory and add the following code or you can download the vector image from this Link and paste it in drawable folder.

   ic_heart_red.xml

   
   

   
   
   

   <vector xmlns:android="http://schemas.android.com/apk/res/android"     android:width="391.837dp"     android:height="391.837dp"     android:viewportWidth="391.837"     android:viewportHeight="391.837">   <path       android:pathData="M285.257,35.528c58.743,0.286 106.294,               47.836 106.58,106.58c0,107.624 -195.918,214.204              -195.918,214.204S0,248.165 0,142.108c0,              -58.862 47.717,-106.58 106.58,-106.58l0,0c36.032,              -0.281 69.718,17.842 89.339,48.065C215.674,53.517                249.273,35.441 285.257,35.528z"       android:fillColor="#D7443E"/> </vector>

6. Now create a new file heart_selector.xml in drawable and add the following code. This file is used to select the Image based on the state of ImageView.

   heart_selector.xml

   
   

   
   
   

   <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:drawable="@drawable/ic_heart_red"           android:state_selected="true"/>     <item android:drawable="@drawable/ic_heart"/> </selector>

7. Add the following code in activity_main.xml file. In this file we add a ImageView and a TextView as a childView to the SmallBangView layout. Add the heart_selector in src tag of imageView and text_Selector in textColor tag of TextView.

   activity_main.xml

   
   

   
   
   

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:gravity="center">        <xyz.hanks.library.bang.SmallBangView         android:layout_margin="20dp"         android:id="@+id/imageViewAnimation"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         >         <ImageView             android:id="@+id/imageView"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="center"             android:src="@drawable/heart_selector"            />        </xyz.hanks.library.bang.SmallBangView>        <xyz.hanks.library.bang.SmallBangView            android:id="@+id/textViewAnimation"         android:layout_width="match_parent"         android:layout_height="wrap_content">            <TextView             android:textColor="@color/text_selector"             android:textAlignment="center"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:text="GeeksForGeeks"             android:textSize="25sp"             android:textStyle="bold" />     </xyz.hanks.library.bang.SmallBangView> </LinearLayout>

8. Add the following code in MainActivity.java file. In this file we add OnClickListener to the ImageView and TextView which will invoked automatically whenever user taps on the view. If the state is true i.e. ImageView or textView is already selected we call setSelected to false otherwise call LikeAnimation on the view.

   MainActivity.java

   
   

   
   
   

   package org.neveropen.twitterLikeAnimaton;              import android.os.Bundle; import android.view.View; import androidx.annotation.Nullable; import androidx.appcompat.app.AppCompatActivity; import xyz.hanks.library.bang.SmallBangView;    public class MainActivity extends AppCompatActivity {        SmallBangView imageView,textView;        @Override     protected void onCreate(@Nullable Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);            textView = findViewById(R.id.textViewAnimation);         imageView = findViewById(R.id.imageViewAnimation);            textView.setOnClickListener(                  new View.OnClickListener() {             @Override             public void onClick(View v) {                 if (textView.isSelected()) {                     textView.setSelected(false);                 } else {                     // if not selected only                      // then show animation.                     textView.setSelected(true);                     textView.likeAnimation();                 }             }         });            imageView.setOnClickListener(                   new View.OnClickListener() {             @Override             public void onClick(View v) {                 if (imageView.isSelected()) {                     imageView.setSelected(false);                 } else {                     // if not selected only                      // then show animation.                     imageView.setSelected(true);                     imageView.likeAnimation();                 }             }         });     } }

Run as Emulator