Check and cross animation with vector drawable and path commands

The following are steps for creating a check/tick and cross animation using vector drawable and path commands. The animation of the check and cross can be used for success or failure scenarios.

Create a vector drawable for drawing the check, vector_path_check.xml

Create a vector drawable for drawing the cross, vector_path_cross.xml

Create a animated-vector drawable for animating the check, animated_vector_check.xml

Create a animated-vector drawable for animating the cross, animated_vector_cross.xml

Using the above vector drawable and animated-vector drawable. The layout file activity_main.xml

The MainActivity.java

import android.graphics.drawable.Animatable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView checkView;
    private ImageView crossView;

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

        checkView = (ImageView) findViewById(R.id.check);
        crossView = (ImageView) findViewById(R.id.cross);


        checkView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Animatable) checkView.getDrawable()).start();
            }
        });

        crossView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Animatable) crossView.getDrawable()).start();
            }
        });
    }

}

This vector command means starting at point 6,10 then draw a line to the point which is obtained by increase x by 4 and y by 4.5, and the thrid command l0,0 means stay at the current position.

M6,10 l4,4.5 l0,0

This vector command, the frist two commands M6,10 l4,4.5 is the same as the above, the third means draw line to the point which is obtained by increase x by 9 and decrease y by -8

M6,10 l4,4.5 l9,-8

Android Path command basics

• In a 24 by 24 space, the origin 0,0 is at the top left corner, going right will increase the x value, going down will increase the y value.
• Mx,y means start at x,y
• lx,y means draw a line from the current coordinate to the position specified by x,y
• The lower case lx,y means move from the current coordinate by x and y and draw the line
• The upper case Lx,y means move from the origin 0,0
• C x1,y1 x2,y2 x,y means draw a cubic bezier curve to (x,y) using control points (x1,y1) and (x2,y2)
• Z Close the path by drawing a line back to the beginning of the current subpath.

Complete example in Github
Reference:
https://medium.com/@ali.muzaffar/understanding-vectordrawable-pathdata-commands-in-android-d56a6054610e
http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html#drawing-paths