Android VectorDrawable and AnimatedVectorDrawable Using Strokes

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

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="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:strokeColor="#F000"
        android:strokeWidth="2"
        android:pathData="M12,0 V24 M0,12 H24" />
</vector>
  • 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.



Got any Android Question?