Animated Vector Drawable trimPathEnd example

This example shows a trimPathEnd animation while drawing a ✔️ Check mark. It will create a simple check mark path that draws itself smoothly using trimPathEnd.

1. Create the vector drawable (res/drawable/check_mark.xml)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="64dp"
    android:height="64dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:name="checkPath"
        android:pathData="M2,12 L9,19 L22,5"
        android:strokeColor="#4CAF50"
        android:strokeWidth="2"
        android:strokeLineCap="round"
        android:strokeLineJoin="round"
        android:trimPathStart="0"
        android:trimPathEnd="0" />
</vector>

This vector drawable path starts from (x, y) point (2, 12), draws line to point (9, 19), and draws another line to point (22, 5), thus drawing a check mark whose color is green, and stroke width is 2.

Here trimPathStart and trimPathEnd are set to 0. Since trimPathEnd is 0, the path will not be visible in the beginning. As we animate it to 1, the full stroke will appear (it will draw itself).

2. Create trimPath animation (res/animator/trim_path_anim.xml)

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="trimPathEnd"
    android:valueFrom="0"
    android:valueTo="1"
    android:duration="1500"
    android:valueType="floatType"
    android:interpolator="@android:interpolator/accelerate_decelerate" />

Above code will animated the trimPathEnd from 0 to 1 in 1.5 seconds. Thus, the check mark path will go from completely invisible to completely visible.

To repeat the animation infinitely, add following code: android:repeatCount=”infinite”

3. Create an Animated Vector (res/drawable/animated_check.xml)

This is an animated vector for the drawable check_mark.xml. It’s target is “checkPath” in check_mark.xml, and it applies the trimPathEnd animation from trim_path_anim.xml to the target.

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/check_mark">
    <target
        android:name="checkPath"
        android:animation="@animator/trim_path_anim" />
</animated-vector>

4. Use in Activity

Put following codes in onCreate.

• It loads the drawable (animated_check.xml, which is an Animated Vector) into the ImageView.
• Then retrieves the actual drawable object being displayed.
• Ensures it’s animatable and then begins the animation.

// Set the image resource of imageview3 to a drawable (can be animated or static)
binding.imageview3.setImageResource(R.drawable.animated_check);
// Get the currently assigned drawable from imageview3
Drawable drawable = binding.imageview3.getDrawable();
// Check if the drawable supports animation (e.g. AnimatedVectorDrawable, AnimationDrawable, etc.)
if (drawable instanceof Animatable) {
    // If it is animatable, start the animation
    ((Animatable) drawable).start();
}

trimPath animations

• trimPathEnd animation from 0 to 1 will draw the path from beginning to end.
• trimPathEnd animation from 1 to 0 will erase the path from end to beginning.
• trimPathStart animation from 0 to 1 will erase the path from beginning to end.
• trimPathStart animation from 1 to 0 will draw the path from end to beginning.