Open In App

How to make Heart Fill animation in Android

Last Updated : 16 Oct, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

AnimatedVectorDrawable class was introduced in API 21 and is used to animate Vector Drawables beautifully and easily. Using AnimatedVectorDrawable, one can:

  • Rotate, Scale, Translate VectorDrawables
  • Animate the VectorDrawable such as fill color etc.
  • Draw paths and do Path Morphing

An AnimatedVectorDrawable element has a VectorDrawable attribute, and one or more target element(s). The target element can specify its target by android:name attribute, and link the target with the proper ObjectAnimator or AnimatorSet by android:animation attribute.

Approach to draw Heart fill animation:

  1. Create a new heart.xml file in values directory and add the following vector drawable path data and path commands:

    heart.xml




    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <!-- geometry -->
        <string name="heart_empty_path">
            M32.95, 19 C31.036, 19 29.199, 19.8828338 28,
            21.2724796 C26.801, 19.8828338 24.964, 
            19 23.05, 19 C19.6565, 19 17, 21.6321526 17,
            24.9945504 C17, 29.1089918 20.74, 32.4713896 
            26.405, 37.5667575 L28, 39 L29.595, 37.5667575 C35.26,
            32.4713896 39, 29.1089918 39, 24.9945504 C39,
            21.6321526 36.3435, 19 32.95, 19 L32.95, 
            19 Z M28.1155, 35.9536785 L28, 36.0572207 L27.8845,
            35.9536785 C22.654, 31.2506812 19.2,
            28.1444142 19.2, 24.9945504 C19.2, 22.8201635 20.8555,
            21.1798365 23.05, 21.1798365 C24.744, 
            21.1798365 26.394, 22.2643052 26.9715, 23.7520436 
            L29.023, 23.7520436 C29.606, 22.2643052 31.256,
            21.1798365 32.95, 21.1798365 C35.1445, 
            21.1798365 36.8, 22.8201635 36.8,
            24.9945504 C36.8, 28.1444142 33.346,
            31.2506812 28.1155, 35.9536785 L28.1155,
            35.9536785 Z
        </string>
      
        <string name="heart_full_path">
            M28, 39 L26.405, 37.5667575 C20.74,
            32.4713896 17, 29.1089918 17, 
            24.9945504 C17, 21.6321526 19.6565,
            19 23.05, 19 C24.964, 19 26.801, 19.8828338 28,
            21.2724796 C29.199, 19.8828338 31.036, 19 32.95,
            19 C36.3435, 19 39, 21.6321526 39, 24.9945504 C39,
            29.1089918 35.26, 32.4713896 29.595,
            37.5667575 L28, 39 L28, 39 Z
        </string>
      
        <string name="heart_clip_hidden">
            M18 37 L38 37 L38 37 L18 37 Z
        </string>
      
        <string name="heart_clip_shown">
            M0 0 L56 0 L56 56 L0 56 Z
        </string>
    </resources>

    
    

  2. Now create a new Android Resource Directory. Right-click on res folder and select Android Resource Directory. Make sure to select resource type as animator.

    Animators can change the physical properties of the objects. This means that if you move a View to a new location, the touch coordinates will be mapped at the new location without any other intervention.

  3. Now create a new empty_heart.xml file in the animator directory. In this file, we mainly define the duration and animation type to the empty_heart.xml. This file is responsible for the animation when the user clicks on the filled heart icon.

    empty_heart.xml




    <?xml version="1.0" encoding="utf-8"?>
    <objectAnimator
        android:propertyName="pathData"
        android:valueFrom="@string/heart_clip_shown"
        android:valueTo="@string/heart_clip_hidden"
        android:duration="600"
        android:interpolator="@android:interpolator/fast_out_slow_in"
        android:valueType="pathType" />

    
    

  4. Now create a new fill_heart.xml file in animator directory. In this file, we mainly define the duration and animation type to the empty_heart.xml. This file is responsible for the animation when the user clicks on the empty heart icon.

    fill_heart.xml




    <?xml version="1.0" encoding="utf-8"?>
    <objectAnimator
        android:propertyName="pathData"
        android:valueFrom="@string/heart_clip_hidden"
        android:valueTo="@string/heart_clip_shown"
        android:duration="800"
        android:interpolator="@android:interpolator/fast_out_slow_in"
        android:valueType="pathType" />

    
    

  5. In the next two steps, we will be creating AnimatedVectorDrawable for both empty heart and filled heart.

  6. Now create a new avd_heart_empty.xml file in the drawable directory and the following code.

    avd_heart_empty.xml




    <?xml version="1.0" encoding="utf-8"?>
    <animated-vector
        android:drawable="@drawable/ic_heart">
      
        <target
            android:name="clip"
            android:animation="@animator/empty_heart" />
    </animated-vector>

    
    

  7. Now create a new avd_heart_fill.xml file in drawable directory and the following code.

    avd_heart_fill.xml




    <?xml version="1.0" encoding="utf-8"?>
    <animated-vector
        android:drawable="@drawable/ic_heart">
      
        <target
            android:name="clip"
            android:animation="@animator/fill_heart" />
      
    </animated-vector>

    
    

  8. In this step, we will define a static drawable object for vector graphics. Now create a new ic_heart.xml file in drawable directory and the following code.

    ic_heart.xml




    <?xml version="1.0" encoding="utf-8"?>
    <vector
        android:width="280dp"
        android:height="280dp"
        android:viewportWidth="56"
        android:viewportHeight="56">
      
        <path
            android:name="empty"
            android:pathData="@string/heart_empty_path"
            android:fillColor="#219806" />
      
        <clip-path
            android:name="clip"
            android:pathData="@string/heart_clip_hidden" />
      
        <path
            android:name="full"
            android:pathData="@string/heart_full_path"
            android:fillColor="#1A7A04" />
      
    </vector>

    
    

  9. Now add the following code in the MainActivity.java file.

    MainActivity.java




    package org.geeksforgeeks.fillheart;
      
    import android.app.Activity;
    import android.graphics.drawable.AnimatedVectorDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
      
    public class MainActivity extends Activity {
      
        private ImageView imageView;
        private AnimatedVectorDrawable emptyHeart;
        private AnimatedVectorDrawable fillHeart;
        private boolean full = false;
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView = findViewById(R.id.image_view);
            emptyHeart
                = (AnimatedVectorDrawable)
                    getDrawable(
                        R.drawable.avd_heart_empty);
            fillHeart
                = (AnimatedVectorDrawable)
                    getDrawable(
                        R.drawable.avd_heart_fill);
        }
      
        // This method help to animate our view.
        public void animate(View view)
        {
            AnimatedVectorDrawable drawable
                = full
                      ? emptyHeart
                      : fillHeart;
            imageView.setImageDrawable(drawable);
            drawable.start();
            full = !full;
        }
    }

    
    

  10. Now compile and run the Android app.

Output:

Reference:



Similar Reads

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 c
3 min read
How to Make an Alert Dialog Fill Majority of the Screen Size in Android?
An Alert Dialog is a window that appears on the screen to give notifications to the user, make some decisions for the user, or enter some information from the user. An Alert Dialog is generally not full screen, but in this article, we'll be implementing something similar. Building an Alert Dialog:Title: This area gives title to the alert dialog Des
3 min read
Android Animation using Android Studio
In today's world which is filled with full of imagination and visualizations, there are some areas that are covered with the word animation. When this word will come to anyone’s mind they always create a picture of cartoons and some Disney world shows. As we already know that among kids, animation movies are very popular like Disney world, Doraemon
5 min read
Star Shower in Android using Android Property Animation
In this article, we are going to create a star shower using android property animation. We will create a slightly more involved animation, animating multiple properties on multiple objects. For this effect, a button click will result in the creation of a star with a random size, which will be added to the background container, just out of view of t
7 min read
Java Program to Print Alphabet Inverted Heart Pattern
Alphabet Inverted Heart Pattern consists of two parts. The upper part of the pattern is a triangle. The base of the pattern has two peaks and a gap between them. Hence, the desired pattern looks like as shown in the illustration. Illustration: A BBB CCCCC DDDDDDD EEEEEEEEE FFFFFFFFFFF GGGGGGGGGGGGG HHHHHHHHHHHHHHH IIIIIIIIIIIIIIIII JJJJJJJJJJJJJJJJ
4 min read
Flood Fill Algorithm Visualization in Android App
Given a 2D screen input[][] where each input[i][j] is an integer representing the color of that pixel, also given the location of a pixel (X, Y) and a color C, the task is to replace the color of the given pixel and all the adjacent same-colored pixels with the given color. Example: In MS-Paint, when we take the brush to a pixel and click, the colo
4 min read
Shimmer Animation in Android using Jetpack Compose
Prerequisites: Basic Knowledge of KotlinBasic knowledge of Jetpack Compose Shimmer Animation was created by Facebook to show the loading screen while images are fetched from the server. Now we see shimmer animation in lots of places. In this article, we will take a look at the implementation of shimmer animation using the all-new Jetpack Compose. A
5 min read
How to Add Fade and Shrink Animation in RecyclerView in Android?
In this article, we are going to show the fade and shrink animation in RecyclerView. When we move downward then the item at the top will be fading out and then it will shrink. In the output, we can see how it is happening. We will be implementing this Java programming language. [video mp4="https://media.geeksforgeeks.org/wp-content/uploads/20210403
3 min read
How to add TextSwitcher with animation in Android using Java
A TextSwitcher is used to animate a text on a screen. It is the child class of the ViewSwitcher class. It contains only one child of type TextView. In order to set animation on TextSwitcher we have to add animation tag or we can add programmatically. Here are the some usage of TextSwitcher: Changing numbers in a Date Picker Countdown of timer clock
2 min read
Create Floating Animation for RecyclerView Items in Android
In Android, a RecyclerView is a UI element that is used to display a type of layout items in the form of a list. This list is scrollable and each element of the list is clickable. You can find more information on creating RecyclerView in this article: RecyclerView in Android with Example. RecyclerView by default has no entry or exit animation. Howe
5 min read
Article Tags :
Practice Tags :