Tools for creating AnimatedVectorDrawable

This question is old. My answer may help future readers.

It is very simple to create animations like the one shown by the questioner. We ourselves can create the animations like the one shown. First, create a VectorDrawable. Eg below:

my_vector_drawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="800dp"
        android:height="800dp"
        android:viewportWidth="800.0"
        android:viewportHeight="800.0">

    <path
        android:name="a_circle"
        android:pathData="M  250   200
        q   -86     02    -140     57.5
        t   -57    135.5
        q   -03     93      67    156
        q    59     52     135     50
        q    71    -02     132    -54
        q    66    -56      66   -146
        q    00    -80     -45   -129
        q   -68    -72    -158    -70   "

        android:strokeLineCap="round"
        android:strokeColor="#f00f"
        android:fillColor="#00000000"
        android:trimPathEnd="0"
        android:strokeWidth="32"/>



</vector>

my_animated_vector_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:drawable="@drawable/my_vector_drawable">

    <target
        android:name="a_circle"
        android:animation="@animator/my_animation"/>

</animated-vector>

my_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="trimPathEnd"
        android:duration="1000"
        android:valueFrom="0"
        android:valueTo="1"
        android:repeatCount="0"
        android:repeatMode="restart"/>
</set>

The first file contains the picture data. The third file contains the animation data. The second file links the first and the second.

You can create the three blank files. Copy and paste the contents given above into your files.

You place the first two files in the drawable folder. The third you place in "animator" folder. Both of those folders find the place in the res folder.

You may create a layout file with an ImageView in it. You may give the AnimatedVectorDrawable file as the drawable (android:src="my_animated_vector_drawable").

In your activity set content view to the layout. Also, inflate the ImageView.

(myImage=((ImageView)findViewById(R.id.yourimageview name);
myImage.getDrawable.start():

Then see the fun. You can have several targets in the AnimatedVectorDrawable file. You can have several ObjectAnimators in the animation file under set...

The animation shown in your question is path morphing. Even path morphing example is there in the documentation which is also simple. I leave it to you to experiment.

You could use Airbnb's lottie library. It makes shipping animated design paths in After Effects to Animated Vector Drawables suitable for android. I think it would be the best solution if you have a decent skill in animating vector paths in After Effects because of the flexibility.

Here's a video that describes the full process of conversion and rendering https://www.youtube.com/watch?v=vs6GOlgUSc8

Airbnb's Lottie Library

Some Animated Icons designed using Lottie.

Animated Icons being used in Layouts

Found two awesome sites. AndroidIconAnimator, this is a web-based tool for creating AnimatedVectorDrawables. And Shapeshifter, good control over how to morph paths.

UPDATE 07-09-2017

Both tools are now merged into one really good solution. It took me sometime to understand how to use it, but once you see it, it is a very capable tool

Shapeshifter.design

Thanks 2 Roman Nurik & Alex Lockwood.