Basic AnimatedVectorDrawable

suggest change

An AnimatedVectorDrawable requires at least 3 components:

The following creates a triangle that transitions its color from black to red.

The VectorDrawable, filename: triangle_vector_drawable.xml

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

    <path
        android:name="triangle"
        android:fillColor="@android:color/black"
        android:pathData="M0,24 l12,-24 l12,24 z"/>

</vector>

The objectAnimator, filename: color_change_animator.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="fillColor"
    android:duration="2000"
    android:repeatCount="infinite"
    android:valueFrom="@android:color/black"
    android:valueTo="@android:color/holo_red_light"/>

The AnimatedVectorDrawable, filename: triangle_animated_vector.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/triangle_vector_drawable">

    <target
        android:animation="@animator/color_change_animator"
        android:name="triangle"/>

</animated-vector>

Note that the <target> specifies android:name="triangle" which matches the <path> in the VectorDrawable. A VectorDrawable may contain multiple elements and the android:name property is used to define which element is being targeted.

Result:

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:



Table Of Contents