Quick Trick — Use Android’s Animated Vector Drawable as ProgressBar

Preview of https://cdn.hashnode.com/res/hashnode/image/upload/v1626534581837/LrhWiqKZ1.html editing animated vector drawable (AVD).

Android’s ProgressBar widget comes with lot of customization controls and flexibility to set custom animated drawable. However, setting AnimatedVectorDrawable is not one of the option.

So, this is a quick trick on how to use custom ImageView to create indeterminate progress indicator using Animated Vector Drawable (AVD).

class AvdLoadingProgressBar @JvmOverloads constructor*(
    *context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
*) *: AppCompatImageView*(*context, attrs, defStyleAttr*) {
    *private val avd = AnimatedVectorDrawableCompat.create*(*context, R.drawable.avd_anim*)*!!

    init *{
        *setImageDrawable*(*avd*)
        *avd.registerAnimationCallback*(*object : Animatable2Compat.AnimationCallback*() {
            *override fun onAnimationEnd*(*drawable: Drawable?*) {
                *post **{ **avd.start*() ***}
            ***}
        })
        *avd.start*()
    }
}*

import android.content.Context
import android.graphics.drawable.Drawable
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatImageView
import androidx.vectordrawable.graphics.drawable.Animatable2Compat
import androidx.vectordrawable.graphics.drawable.AnimatedVectorDrawableCompat

/**
 * Custom loading indicator using Animated vector drawable.
 *
 * ## External Resources
 * - https://medium.com/androiddevelopers/animation-jump-through-861f4f5b3de4
 * - https://gist.github.com/nickbutcher/97143b3240682e5c5851fe45b49fde93
 * - https://medium.com/androiddevelopers/re-animation-7869722af206
 * - https://gist.github.com/nickbutcher/b1806905c6bc0ef29f545fd580935bd3
 */
class AvdLoadingProgressBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {
    /*
     * NOTE: It can only return null if parsing error is found.
     * So, using `!!` operator should expose any issue with the AVD XML file in API 23 or lower.
     */
    private val avd = AnimatedVectorDrawableCompat.create(context, R.drawable.avd_anim_kijiji_loading)!!

    init {
        setImageDrawable(avd)
        avd.registerAnimationCallback(object : Animatable2Compat.AnimationCallback() {
            override fun onAnimationEnd(drawable: Drawable?) {
                post { avd.start() }
            }
        })
        avd.start()
    }
}

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="204dp"
            android:height="33dp"
            android:viewportWidth="204"
            android:viewportHeight="33">
            <group android:name="group">
                <path
                    android:name="a"
                    android:pathData="M 33 17 C 33 25.83 25.83 33 17 33 C 8.17 33 1 25.83 1 17 C 1 8.17 8.17 1 17 1 C 25.83 1 33 8.17 33 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_2">
                <path
                    android:name="b"
                    android:pathData="M 75.59 17 C 75.59 25.83 68.42 33 59.59 33 C 50.76 33 43.59 25.83 43.59 17 C 43.59 8.17 50.76 1 59.59 1 C 68.42 1 75.59 8.17 75.59 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_4">
                <path
                    android:name="c"
                    android:pathData="M 118.28 17 C 118.28 25.83 111.11 33 102.28 33 C 93.45 33 86.28 25.83 86.28 17 C 86.28 8.17 93.45 1 102.28 1 C 111.11 1 118.28 8.17 118.28 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_6">
                <path
                    android:name="d"
                    android:pathData="M 160.78 17 C 160.78 25.83 153.61 33 144.78 33 C 135.95 33 128.78 25.83 128.78 17 C 128.78 8.17 135.95 1 144.78 1 C 153.61 1 160.78 8.17 160.78 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_8">
                <path
                    android:name="e"
                    android:pathData="M 203.78 17 C 203.78 25.83 196.61 33 187.78 33 C 178.95 33 171.78 25.83 171.78 17 C 171.78 8.17 178.95 1 187.78 1 C 196.61 1 203.78 8.17 203.78 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="a">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="52"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#f8aa17"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="650"
                    android:duration="100"
                    android:valueFrom="#f8aa17"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="b">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="173"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#f1454f"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="750"
                    android:duration="100"
                    android:valueFrom="#f1454f"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="c">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="300"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#2681db"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="850"
                    android:duration="100"
                    android:valueFrom="#2681db"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="d">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="424"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#37a864"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="950"
                    android:duration="100"
                    android:valueFrom="#37a864"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="e">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="550"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#9b44ad"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="1050"
                    android:duration="100"
                    android:valueFrom="#9b44ad"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="204dp"
            android:height="33dp"
            android:viewportWidth="204"
            android:viewportHeight="33">
            <group android:name="group">
                <path
                    android:name="a"
                    android:pathData="M 33 17 C 33 25.83 25.83 33 17 33 C 8.17 33 1 25.83 1 17 C 1 8.17 8.17 1 17 1 C 25.83 1 33 8.17 33 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_2">
                <path
                    android:name="b"
                    android:pathData="M 75.59 17 C 75.59 25.83 68.42 33 59.59 33 C 50.76 33 43.59 25.83 43.59 17 C 43.59 8.17 50.76 1 59.59 1 C 68.42 1 75.59 8.17 75.59 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_4">
                <path
                    android:name="c"
                    android:pathData="M 118.28 17 C 118.28 25.83 111.11 33 102.28 33 C 93.45 33 86.28 25.83 86.28 17 C 86.28 8.17 93.45 1 102.28 1 C 111.11 1 118.28 8.17 118.28 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_6">
                <path
                    android:name="d"
                    android:pathData="M 160.78 17 C 160.78 25.83 153.61 33 144.78 33 C 135.95 33 128.78 25.83 128.78 17 C 128.78 8.17 135.95 1 144.78 1 C 153.61 1 160.78 8.17 160.78 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
            <group android:name="group_8">
                <path
                    android:name="e"
                    android:pathData="M 203.78 17 C 203.78 25.83 196.61 33 187.78 33 C 178.95 33 171.78 25.83 171.78 17 C 171.78 8.17 178.95 1 187.78 1 C 196.61 1 203.78 8.17 203.78 17 Z"
                    android:fillColor="#373373"
                    android:strokeWidth="1"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="a">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="52"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#f8aa17"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="650"
                    android:duration="100"
                    android:valueFrom="#f8aa17"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="b">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="173"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#f1454f"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="750"
                    android:duration="100"
                    android:valueFrom="#f1454f"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="c">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="300"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#2681db"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="850"
                    android:duration="100"
                    android:valueFrom="#2681db"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="d">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="424"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#37a864"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="950"
                    android:duration="100"
                    android:valueFrom="#37a864"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="e">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="550"
                    android:duration="100"
                    android:valueFrom="#373373"
                    android:valueTo="#9b44ad"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="1050"
                    android:duration="100"
                    android:valueFrom="#9b44ad"
                    android:valueTo="#373373"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

NOTE: The idea of repeated indefinite AVD is heavily borrowed from Nick Butcher’s medium article on AVD. I highly recommend you read them to know more tips and ticks with AVD.

That’s it. You can now use this in your layout as usual view and show it when data is loading from network or any long running async request is happening.

*<*androidx.constraintlayout.widget.ConstraintLayout>

  <dev.hossain.avdprogress.AvdLoadingProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/avd_anim_kijiji_loading" />

</androidx.constraintlayout.widget.ConstraintLayout>

Here is preview of the AVD in https://shapeshifter.design/

Further reading

Animation: Jump-through *Recently a call for help caught my eye; asking how to implement a fancy ‘getting location’ animation on Android:*medium.com Re-animation *In a previous article, I described a technique for creating vector animations on Android:*medium.com