Understanding Android VectorDrawable and AnimatedVectorDrawable: Usage and Source Code Analysis

This article explores how Android handles SVG‑like vector graphics through the VectorDrawable format and how animations are added using AnimatedVectorDrawable . It begins by reviewing the limitations of full SVG support on Android and introduces the simplified XML schema used for vector assets.

1. VectorDrawable Basics

The root element is <vector> with attributes such as android:width , android:height , android:viewportWidth , and android:viewportHeight . Only three child tags are supported: <group> , <path> , and <clip-path> . The article lists the attributes defined in attrs.xml for each tag and explains how they map to SVG concepts (e.g., pathData ↔ SVG d ).

Examples of static vector files ( test1.xml , test2.xml , etc.) demonstrate how to draw basic shapes (triangle, square, circle, star) using android:pathData , set fill and stroke colors, and apply transformations via <group> attributes ( android:rotation , android:translateX , etc.).

Gradient fills are shown using the aapt:attr wrapper to embed a <gradient> definition for android:fillColor . The article also explains how to reference external gradient resources.

Clip paths are covered, emphasizing that the <clip-path> element must appear before the <path> it clips.

Importing SVG files is discussed: Android Studio’s Vector Asset tool can convert simple SVGs (containing only path elements) into VectorDrawable XML. Complex SVGs with other tags may require manual adjustments, such as replacing android:fillColor="transparent" with #00000000 to avoid compilation errors.

Using a vector drawable in a layout is demonstrated with an ImageView that references the vector XML via android:src . The image scales without loss of quality, confirming the benefits of vector assets.

2. Source Code Analysis of VectorDrawable

The article traces the creation path of a vector drawable: ImageView reads the src attribute, TypedArray.getDrawable loads the resource, Resources.loadDrawable delegates to DrawableInflater.inflateFromTag , which creates a VectorDrawable instance for the vector tag. The inflate method parses child elements, populating internal classes VGroup , VFullPath , and VClipPath via TypedArray extraction.

During rendering, ImageView.onDraw calls Drawable.draw , which for VectorDrawable ultimately invokes a native method nDraw to rasterize the vector onto the canvas.

3. AnimatedVectorDrawable

Android does not support SVG animation tags. Instead, AnimatedVectorDrawable combines a static VectorDrawable with property animations defined by ObjectAnimator or AnimatorSet . The allowed XML attributes are limited to android:drawable (the vector asset) and, for each <target> , android:name (the vector element to animate) and android:animation (the animator resource).

An example ( test8.xml ) animates a path’s pathData from a check‑mark shape to a cross shape while interpolating the stroke color from red to blue. The animation is started in code by retrieving the drawable from an ImageView and calling start() on the AnimatedVectorDrawable . Callback registration, reverse playback, and reset are also shown.

4. Source Code Analysis of AnimatedVectorDrawable

The inflation process is similar to VectorDrawable . When the animated-vector tag is encountered, DrawableInflater creates an AnimatedVectorDrawable instance. Its inflate method loads the referenced vector drawable, then parses each <target> element, retrieving the target name and loading the animator resource via AnimatorInflater.loadAnimator .

Only objectAnimator and set tags are supported. AnimatorInflater creates an ObjectAnimator , sets its PropertyValuesHolder (including a custom PathDataEvaluator for morphing paths), and assigns the appropriate interpolator.

The method updateAnimatorProperty binds the animator to the vector element by locating the target object (a VFullPath , VClipPath , or VGroup ) and retrieving the matching Property (e.g., VPath.PATH_DATA or VPath.STROKE_COLOR ). The animator’s PropertyValuesHolder is then linked to this property.

When AnimatedVectorDrawable.start() is called, an AnimatorSet (or the hardware‑accelerated VectorDrawableAnimatorRT ) is prepared. The animation frames are driven by Android’s Choreographer via the AnimationHandler . Each Vsync triggers AnimatorSet.doAnimationFrame , which pulses each active ObjectAnimator . The animator evaluates the current fraction, uses the PathDataEvaluator to interpolate between the start and end PathData , and finally calls VPath.setPathData to update the native path data. The updated vector is then rendered in the next canvas draw call.

5. Summary

VectorDrawable provides a lightweight, high‑performance way to use scalable graphics on Android, suitable for icons and simple UI elements. AnimatedVectorDrawable extends this with property‑based animations, enabling dynamic visual feedback without external libraries. Both formats keep resource size small while preserving crisp rendering across device densities.