Signup/Sign In
LAST UPDATED: SEPTEMBER 1, 2021

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:

    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.

    You may also like:

    K S Lohan is an accomplished author and expert in technical writing on Android language and develop android App. He is highly skilled at communicating complex programming concepts in a clear and concise manner.
    IF YOU LIKE IT, THEN SHARE IT
    Advertisement

    RELATED POSTS