Android Tutorial => Using Strokes

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:

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.

PDF - Download Android for free

Previous Next

Android

Fastest Entity Framework Extensions

Example

Got any Android Question?

Android

Android VectorDrawable and AnimatedVectorDrawable Using Strokes

Fastest Entity Framework Extensions

Example

Got any Android Question?