Create an Instagram/Twitter Heart Like Animation in Android

23 Feb, 2021
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.
Add the support Library in build.gradle file and add dependency in the dependencies section.implementation 'pub.hanks:smallbang:1.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.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.xmltext_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>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.xmlic_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>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.xmlic_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>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.xmlheart_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>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.xmlactivity_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>Add the following code in MainActivity.java file. In this file we add OnClickListner 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.javaMainActivity.javapackage org.geeksforgeeks.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 EmulatorVideo Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20200723022557/Record_2020-07-23-02-24-23_69fa71ed7e998de6cab47c8740bea3c11.mp400:0000:0000:11Use Up/Down Arrow keys to increase or decrease volume.My Personal Notes
arrow_drop_upSave
Add the support Library in build.gradle file and add dependency in the dependencies section.implementation 'pub.hanks:smallbang:1.2.2'     
implementation 'pub.hanks:smallbang:1.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.
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.xmltext_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>
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>
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.xmlic_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>
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>
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.xmlic_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>
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>
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.xmlheart_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>
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>
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.xmlactivity_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>
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>
Add the following code in MainActivity.java file. In this file we add OnClickListner 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.javaMainActivity.javapackage org.geeksforgeeks.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();                }            }        });    }}
MainActivity.java
package org.geeksforgeeks.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 EmulatorVideo Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20200723022557/Record_2020-07-23-02-24-23_69fa71ed7e998de6cab47c8740bea3c11.mp400:0000:0000:11Use Up/Down Arrow keys to increase or decrease volume.My Personal Notes
arrow_drop_upSave
Android-Animation
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Broadcast Receiver in Android With Example
Content Providers in Android with Example
Navigation Drawer in Android
Android RecyclerView in Kotlin
How to Post Data to API using Retrofit in Android?
Arrays in Java
Object Oriented Programming (OOPs) Concept in Java
Reverse a string in Java
Split() String method in Java with examples
Interfaces in Java