Android Animation Example with Animated Vector Drawable and SVG File

If you want to add several animations in your android app, you can use Animated Vector Drawable. There are some advantages in comparison with old properties. ShapeShifter is a tool that makes it easier to create icon animation from the SVG file to Animated Vector Drawable file. Let’s say, you make check icon with circle more impressive. Firstly, you find the icon or you can create own icon in ShapeShifter’s beta version. In this example, we have 2 paths.

TIPS: If your icon that you want to animate is separated and not connect to each other, you must use the path as much as the number of your separated piece. Otherwise, your pieces try to connect and undesirable lines appear.

One of them is the outer circle and get its the path;

M 1.661 12 C 1.661 6.319 6.29 1.714 12.001 1.714 C 17.709 1.714 22.34 6.319 22.34 12 C 22.34 17.681 17.709 22.286 12.001 22.286 C 6.29 22.286 1.661 17.681 1.661 12 Z

One of them is inner check and get its path;

M 4.821 11.456 L 9.643 17.25 L 18.643 6.643

So we created 2 paths in the same vector because we have 2 separate pieces. Then we add trimPathEnd animation that duration is 1500 ms and fromValue 0 to toValue 1 both of them.

As a result, our animation looks like;

Then we export it as Animated Vector Drawable and we have an XML file now. We put it in the /res/drawable folder and called it check_icon_animation.xml

Now, we add a click action to button and our animated is triggered when we click this button.

Button btn_check;
ImageView iv_animation;

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

  btn_check = (Button) findViewById(R.id.btn_check);
  iv_animation = (ImageView) findViewById(R.id.iv_animation);

  btn_check.setOnClickListener(new View.OnClickListener() {
    
    @Override
    public void onClick(View view) {
         //set animation xml to imageview as resource iv_animation.setImageResource(R.drawable.check_icon_animation); 
      iv_animation.setVisibility(View.VISIBLE); //make it visible
      ((Animatable) iv_animation.getDrawable()).start(); //start animation
    }
  });
}

The result is shown below and the source code is available here