How to make Check/Tick and Cross animations in Android

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 Tick Cross animation:

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

    tick_cross.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="UTF-8"?>
    <resources>
      
       <!-- geometry -->
       <integer name="viewport_width">24</integer>
       <integer name="viewport_height">24</integer>
       <integer name="viewport_center_x">12</integer>
       <integer name="viewport_center_y">12</integer>
       <string name="path_tick">M4.8, 13.4 L9, 
                                17.6 M10.4, 
                                16.2 L19.6, 7
       </string>
       <string name="path_cross">M6.4, 6.4 L17.6, 
                                17.6 M6.4, 
                                17.6 L17.6, 6.4
       </string>
       <integer name="stroke_width">2</integer>
      
       <!-- names -->
       <string name="tick">tick</string>
       <string name="cross">cross</string>
       <string name="groupTickCross">groupTickCross</string>
      
       <!-- drawing -->
       <color name="stroke_color">#999</color>
    </resources>

    chevron_right

    
    

  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 cross_to_tick.xml file in the animator directory. In this file, we mainly define the duration and animation type to the cross_to_tick.xml. This file is responsible for the conversion of the cross to tick when the user clicks on the cross icon.

    cross_to_tick.xml



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  4. Now create a new tick_to_cross.xml file in animator directory. In this file, we mainly define the duration and animation type to the tick_to_cross.xml. This file is responsible for the conversion of the tick to cross when the user clicks on the tick icon.

    tick_to_cross.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  5. Now create a new rotate_cross_to_tick.xml file in animator directory. In this file, we mainly define the duration and animation type to the tick_to_cross.xml. This file is responsible for the rotation when the user clicks on the cross icon.

    rotate_cross_to_tick.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <objectAnimator
        android:propertyName="rotation"
        android:valueFrom="-180"
        android:valueTo="0"
        android:duration="500"
        android:interpolator="@android:interpolator/fast_out_slow_in" />

    chevron_right

    
    

  6. Now create a new rotate_tick_to_cross.xml file in animator directory. In this file, we mainly define the duration and animation type to the tick_to_cross.xml. This file is responsible for the rotation when the user clicks on the tick icon.

    rotate_cross_to_tick.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <objectAnimator
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="180"
        android:duration="500"
        android:interpolator="@android:interpolator/fast_out_slow_in" />

    chevron_right

    
    

  7. In the next two steps we will be creating AnimatedVectorDrawable for both cross_to_tick and tick_to_cross.

  8. Now create a new avd_cross_to_tick.xml file in the drawable directory and the following code.

    avd_cross_to_tick.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <animated-vector
        android:drawable="@drawable/ic_cross">
      
        <target
            android:name="@string/cross"
            android:animation="@animator/cross_to_tick" />
      
        <target
            android:name="@string/groupTickCross"
            android:animation="@animator/rotate_cross_to_tick" />
      
    </animated-vector>

    chevron_right

    
    

  9. Now create a new avd_tick_to_cross.xml file in the drawable directory and the following code.

    avd_tick_to_cross.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <animated-vector
        android:drawable="@drawable/ic_tick">
      
        <target
            android:name="@string/tick"
            android:animation="@animator/tick_to_cross" />
      
      
        <target
            android:name="@string/groupTickCross"
            android:animation="@animator/rotate_tick_to_cross" />
      
    </animated-vector>

    chevron_right

    
    

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

    ic_tick.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
            android:width="120dp"
            android:height="120dp"
            android:viewportWidth="@integer/viewport_width"
            android:viewportHeight="@integer/viewport_height">
      
        <group
            android:name="@string/groupTickCross"
            android:pivotX="@integer/viewport_center_x"
            android:pivotY="@integer/viewport_center_y">
      
            <path
                android:name="@string/tick"
                android:pathData="@string/path_tick"
                android:strokeWidth="@integer/stroke_width"
                android:strokeLineCap="square"
                android:strokeColor="@color/stroke_color"/>
        </group>
    </vector>

    chevron_right

    
    

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

    ic_cross.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
            android:width="120dp"
            android:height="120dp"
            android:viewportWidth="@integer/viewport_width"
            android:viewportHeight="@integer/viewport_height">
      
        <group
            android:name="@string/groupTickCross"
            android:pivotX="@integer/viewport_center_x"
            android:pivotY="@integer/viewport_center_y">
      
            <path
                android:name="@string/cross"
                android:pathData="@string/path_cross"
                android:strokeWidth="@integer/stroke_width"
                android:strokeLineCap="square"
                android:strokeColor="@color/stroke_color"/>
      
        </group>
      
    </vector>

    chevron_right

    
    

  12. Now add the following code in the activity_main.xml file.

    activity_main.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:onClick="animate"
        tools:context=".MainActivity">
      
        <ImageView
            android:id="@+id/tick_cross"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_tick" />
      
    </FrameLayout>

    chevron_right

    
    

  13. Now add the following code in the MainActivity.xml file.

    MainActivity.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package org.geeksforgeeks.tickcross;
      
    import androidx.appcompat.app.AppCompatActivity;
      
    import android.graphics.drawable.AnimatedVectorDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
      
    public class MainActivity extends AppCompatActivity {
      
        private ImageView tickCross;
        private AnimatedVectorDrawable tickToCross;
        private AnimatedVectorDrawable crossToTick;
        private boolean tick = true;
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            tickCross = findViewById(R.id.tick_cross);
      
            tickToCross = (AnimatedVectorDrawable)
                getDrawable(
                    R.drawable.avd_tick_to_cross);
      
            crossToTick = (AnimatedVectorDrawable)
                getDrawable(
                    R.drawable.avd_cross_to_tick);
        }
        // This method help to animate our view.
        public void animate(View view)
        {
            AnimatedVectorDrawable drawable
                = tick
                      ? tickToCross
                      : crossToTick;
            tickCross.setImageDrawable(drawable);
            drawable.start();
            tick = !tick;
        }
    }

    chevron_right

    
    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced 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.