VectorDrawable and AnimatedVectorDrawable
<group> tag allows the scaling, rotation, and position of one or more elements of a
VectorDrawable to be adjusted:
The example code above contains three identical
<path> tags, all describing black squares. The first square is unadjusted. The second square is wrapped in a
<group> tag which moves it and rotates it by 45°. The third square is wrapped in a
<group> tag which moves it and stretches it horizontally by 50%. The result is as follows:
<group> tag can contain multiple
<clip-path> tags. It can even contain another
AnimatedVectorDrawable requires at least 3 components:
VectorDrawablewhich will be manipulated
objectAnimatorwhich defines what property to change and how
AnimatedVectorDrawableitself which connects the
VectorDrawableto create the animation
The following creates a triangle that transitions its color from black to red.
Note that the
android:name="triangle" which matches the
<path> in the
VectorDrawable may contain multiple elements and the
android:name property is used to define which element is being targeted.
VectorDrawable should consist of at least one
<path> tag defining a shape
This would produce a black triangle:
<clip-path> defines a shape which acts as a window, only allowing parts of a
<path> to show if they are within the
<clip-path> shape and cutting off the rest.
In this case the
<path> produces a black triangle, but the
<clip-path> defines a smaller square shape, only allowing part of the triangle to show through:
Using SVG stroke makes it easier to create a Vector drawable with unified stroke length, as per Material Design guidelines:
Consistent stroke weights are key to unifying the overall system icon family. Maintain a 2dp width for all stroke instances, including curves, angles, and both interior and exterior strokes.
So, for example, this is how you would create a "plus" sign using strokes:
strokeColordefines the color of the stroke.
strokeWidthdefines the width (in dp) of the stroke (2dp in this case, as suggested by the guidelines).
pathDatais where we describe our SVG image:
M12,0moves the "cursor" to the position 12,0
V24creates a vertical line to the position 12, 24
As a result, we got this no-frills plus sign:
This is especially useful for creating an
AnimatedVectorDrawable, since you are now operating with a single stroke with an unified length, instead of an otherwise complicated path.
Vector compatibility through AppCompat
A few pre-requisites in the
build.gradle for vectors to work all the way down to API 7 for VectorDrawables and API 13 for AnimatedVectorDrawables (with some caveats currently):