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.
Twitter-like-animation1

Approach

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    implementation 'pub.hanks:smallbang:1.2.2'     

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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>

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <vector android:height="32dp" 
        android:viewportHeight="412.735"
        android:viewportWidth="412.735" 
        android:width="32dp" 
        <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>

    chevron_right

    
    

  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



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

        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>

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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>

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        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>

    chevron_right

    
    

  8. 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.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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();
                    }
                }
            });
        }
    }

    chevron_right

    
    

    1. Run as Emulator

      Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




      My Personal Notes arrow_drop_up


      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


      Article Tags :
      Practice Tags :


      2


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.