Implement Twitter Heart button like animation in Android App

You may have seen several applications that use various ways to Like a particular thing (like any post, stories, product, etc.) with some beautiful animations, which make the app's UI more beautiful. This type of like animation effect varies from app to app and some developers use third-party libraries to add this animation while other developers make their custom-like animations according to the look and feel of their app.

The best animation is for Twitter where when you like a Tweet, the heart bursts and then color is filled into it, which is a very cool animation and in this article we will be implementing that.

What is LikeButton Library?

To add the above features to our app, we will be using an external library LikeButton, which is used to add beautiful Like animation buttons to our app.

We can see this like button animation in many apps like Twitter (when we like a particular tweet), Instagram (when we like a particular post, heart button), Flipkart(when we add a particular product to our wishlist ), and in other famous apps. So it will make your app more attractive and UI-friendly with minimal code. You can learn more about LikeButton on GitHub here.

So let's implement a simple LikeButton in our android app.

Attributes of LikeButton Library:

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project).

2. Choose "Empty Activity" from the project template window and click Next.

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 21: Android 5.0 (Lollipop)).

4. Next click on the Finish button after filling the above details.

5. Now, wait for the project to finish building.

Step 2: Adding the LikeButton dependency

To add the Like button with animation in our app, we have to implement the LikeButton in our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (project level, not in the module build.gradle file) section and add below code inside repositories as shown below.

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.1.3"
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        repositories {
            //adding the jitpack
            maven { url 'https://jitpack.io' }
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Next, go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

 //adding the like button library
    implementation 'com.github.jd-alexander:LikeButton:0.2.3'

Step 3: Modify activity_main.xml

Now, go to app -> res -> layout -> activity_main.xml, remove the default TextView and change the Layout to RelativeLayout and then add LinearLayout with orientation vertical and inside LinearLayout we add several LikeButton of different types as shown below:

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">

    <!-- Simple Linear layout with vertical orientation -->
    <LinearLayout
        android:orientation = "vertical"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">

        <!-- heart like button -->
         <com.like.LikeButton
            android:id = "@+id/likeButtonHeart"
            android:layout_gravity = "center"
            android:layout_marginStart = "16dp"
            android:layout_marginEnd = "15dp"
            android:layout_marginBottom = "8dp"
            android:layout_marginTop = "4dp"
            android:layout_width = "140dp"
            android:layout_height = "140dp"
            app:icon_type = "heart"
            app:circle_start_color = "#F1DD31"
            app:dots_primary_color = "#0E77CC"
            app:dots_secondary_color = "#FF1A4F"
            app:circle_end_color = "#12A518"
            app:icon_size = "40dp"
            app:liked = "false"
            app:anim_scale_factor = "2"
            app:is_enabled = "true" />

        <!-- Thumb like button -->
        <com.like.LikeButton
            android:id = "@+id/likeButtonThumb"
            android:layout_gravity = "center"
            android:layout_marginStart = "16dp"
            android:layout_marginEnd = "15dp"
            android:layout_marginBottom = "8dp"
            android:layout_marginTop = "4dp"
            android:layout_width = "140dp"
            android:layout_height = "140dp"
            app:icon_type = "thumb"
            app:circle_start_color = "#F60039"
            app:dots_primary_color = "#FFE711"
            app:dots_secondary_color = "#0A8DF6"
            app:circle_end_color = "#34B839"
            app:icon_size = "40dp"
            app:liked = "true"
            app:anim_scale_factor = "2"
            app:is_enabled = "true" />

        <!-- Star like button -->
        <com.like.LikeButton
            android:id = "@+id/likeButtonStar"
            android:layout_gravity = "center"
            android:layout_marginStart = "16dp"
            android:layout_marginEnd = "15dp"
            android:layout_marginBottom = "8dp"
            android:layout_marginTop = "4dp"
            android:layout_width = "140dp"
            android:layout_height = "140dp"
            app:icon_type = "star"
            app:circle_start_color = "#FF5722"
            app:dots_primary_color = "#010E57"
            app:dots_secondary_color = "#00BCD4"
            app:circle_end_color = "#FF0909"
            app:icon_size = "40dp"
            app:liked = "false"
            app:anim_scale_factor = "2"
            app:is_enabled = "true" />

        <!-- Custom like button -->
        <com.like.LikeButton
            app:like_drawable = "@drawable/custom_liked"
            app:unlike_drawable = "@drawable/custom_unliked"
            android:id = "@+id/likeButtonCustom"
            android:layout_gravity = "center"
            android:layout_marginStart = "16dp"
            android:layout_marginEnd = "15dp"
            android:layout_marginBottom = "8dp"
            android:layout_marginTop = "4dp"
            android:layout_width = "140dp"
            android:layout_height = "140dp"
            app:icon_type = "star"
            app:circle_start_color = "#E69508"
            app:dots_primary_color = "#21B8F3"
            app:dots_secondary_color = "#4CAF84"
            app:circle_end_color = "#FF096B"
            app:icon_size = "40dp"
            app:liked = "false"
            app:anim_scale_factor = "2"
            app:is_enabled = "true" />

    </LinearLayout>

</RelativeLayout>

Note: We have added the 2 image for cusom like button in the app -> res ->drawable as custom_liked.png and custom_unliked.png. You can use any image of your choice to your project.

Step 4: MainActivity.java file

Now, open the MainActivity.java file and import some basic classes as shown below:

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

import android.widget.Toast;
//like button library
import com.like.LikeButton;
import com.like.OnLikeListener;

Next, we create the object of LikeButton class inside MainActivity class as shown below:

//creating object of LikeButton
private LikeButton likeButtonHeart,likeButtonThumb,likeButtonStar,likeButtonCustom;

Now, inside the onCreate method, we initialize the LikeButton as shown below

//initializing the LikeButton objects
likeButtonHeart = (LikeButton)findViewById(R.id.likeButtonHeart);
likeButtonThumb = (LikeButton)findViewById(R.id.likeButtonThumb);
likeButtonStar = (LikeButton)findViewById(R.id.likeButtonStar);
likeButtonCustom = (LikeButton)findViewById(R.id.likeButtonCustom);

Now, we create OnLikeListener for likeButtonHeart, likeButtonThumb, likeButtonStar, likeButtonCustom and inside @Override public void liked(LikeButton likeButton) we will show a toast message when user liked and inside the @Override public void unLiked( LikeButton likeButton) we show a toast message when user dislike anything, as shown below.

 //like Button Heart OnLikeListener
        likeButtonHeart.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Heart : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Heart : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );

        //like Button Thumb OnLikeListener
        likeButtonThumb.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Thumb  : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Thumb : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );


        //like Button Star OnLikeListener
        likeButtonStar.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Star : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Star : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );

        //like Button Custom OnLikeListener
        likeButtonCustom.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Now Music is On : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Now Music is Off : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );

The complete code of the MainActivity.java is shown below:

package com.studytonight.project;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

import android.widget.Toast;
//like button library
import com.like.LikeButton;
import com.like.OnLikeListener;

public class MainActivity extends AppCompatActivity {

    //creating object of LikeButton
    private LikeButton likeButtonHeart,likeButtonThumb,likeButtonStar,likeButtonCustom;

    @Override
    protected void onCreate(  Bundle savedInstanceState  ) {
        super.onCreate(  savedInstanceState  );
        setContentView(  R.layout.activity_main  );

        //initializing the LikeButton objects
        likeButtonHeart =( LikeButton )findViewById( R.id.likeButtonHeart );
        likeButtonThumb =( LikeButton )findViewById( R.id.likeButtonThumb );
        likeButtonStar =( LikeButton )findViewById( R.id.likeButtonStar );
        likeButtonCustom =( LikeButton )findViewById( R.id.likeButtonCustom );

        //like Button Heart OnLikeListener
        likeButtonHeart.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Heart : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Heart : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );

        //like Button Thumb OnLikeListener
        likeButtonThumb.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Thumb  : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Thumb : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );

        //like Button Star OnLikeListener
        likeButtonStar.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Star : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Star : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );

        //like Button Custom OnLikeListener
        likeButtonCustom.setOnLikeListener( new OnLikeListener(  ) {
            @Override
            public void liked( LikeButton likeButton ) {
                //sowing simple Toast when liked
                Toast.makeText( MainActivity.this, " Liked Now Music is On : )", Toast.LENGTH_SHORT ).show(  );
            }

            @Override
            public void unLiked( LikeButton likeButton ) {
                //sowing simple Toast when unLiked
                Toast.makeText( MainActivity.this, " UnLiked Now Music is Off : )", Toast.LENGTH_SHORT ).show(  );

            }
        } );

    }
}

Now, our app is ready, below is the output of the app.

Output:

In the below snapshots, you can see how LikeButton will look in the android application.

When the app is opened for the first time: We can see that the heart and start likeButton is not liked and thumb and custom LikeButton is enabled.

When we click on different likeButton.

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating a beautiful like button with cool animation using LikeButton in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

You may also like:

• How to Create Circle Image View using CardView in Android App

• Implement Audio Visualizer in Android App

• Alert Dialog Using SweetAlert Dialog in Android App

• Gradient Drawable in Android - Create Gradient Backgrounds