Written By:
onlyklohan
15 minute read
AndroidLike AnimationHowTo

Implement Twitter Heart button like animation in Android App

Posted in Programming   LAST UPDATED: JUNE 24, 2021

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:

XML Attributes Java Function Description
app:icon_type setIcon( IconType currentIconType ) Use to set the Icon Type ( heart , thumb or star )
app:icon_size

setIconSizePx( int iconSize )

or

setIconSizeDp( int iconSize )

Use to set the Icon size of the LikeButton
app:like_drawable

setLikeDrawable( Drawable likeDrawable )

or

setLikeDrawableRes( int resId)

Use to set the custom like drawable
app:unlike_drawable

setUnlikeDrawable( Drawable unLikeDrawable)

or

setUnlikeDrawableRes( int resId)

Use to set the custom unLike drawable
app:circle_start_color setCircleStartColorRes( int resId) Use to set the circle start color
app:circle_end_color setCircleEndColorRes( int resId) Use to set the circle end color
app:dots_secondary_color

setExplodingDotColorsInt( int primaryColor , int secondaryColor )

or

setExplodingDotColorsRes( int primaryColor , int secondaryColor )

Use to set the secondary dots color
app:dots_primary_color

setExplodingDotColorsInt( int primaryColor , int secondaryColor )

or

setExplodingDotColorsRes( int primaryColor , int secondaryColor )

Use to set the primary dots color
app:anim_scale_factor setAnimationScaleFactor( float animationScaleFactor ) Use to set the animation scale factor

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.

Twitter heart animation android

When we click on different likeButton.

Twitter heart animation android

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.


IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS