Android VectorDrawable and AnimatedVectorDrawable Using Strokes


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:

<vector xmlns:android=""
        android:pathData="M12,0 V24 M0,12 H24" />
  • strokeColor defines the color of the stroke.

  • strokeWidth defines the width (in dp) of the stroke (2dp in this case, as suggested by the guidelines).

  • pathData is where we describe our SVG image:

  • M12,0 moves the "cursor" to the position 12,0

  • V24 creates a vertical line to the position 12, 24

etc., see SVG documentation and this useful "SVG Path" tutorial from w3schools to learn more about the specific path commands.

As a result, we got this no-frills plus sign:

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.