Android 5.0 introduced VectorDrawable to support vector graphics (SVG), and AnimatedVectorDrawable to support vector animation

Basic knowledge of SVG and VectorDrawable

VectorDrawable does not support all SVG specifications and currently supports only PathData and limited Group functionality. There is also a clip-path property to support areas that will be drawn later. So to use VectorDrawable, we only need to know the SVG PathData specification (which corresponds to the Path Path function in drawing in custom controls). By looking at the PathData document, you can see that the Path data contains several drawing commands, such as:

  • Moveto command M or M, moveto the new position (upper case command is absolute coordinate command; Lowercase commands are relative coordinate commands, the same as below),
  • The closepath command Z or Z closes the path and draws a straight line from the current position to the starting position of the path or subpath
  • The lineto command L or L draws a line from the current position to the specified position
  • The horizontal lineto command H or H draws a horizontal lineto a specified position
  • The vertical lineto command V or V is used to draw a vertical lineto a specified position
  • Quadratic Bezier Curve command Q or Q, Bezier curve
  • Smooth quadratic Bezier curveto commands T to smooth quadratic Bezier curves
  • Command asiarc an elliptical arc

Vector graph XML file

<? xml version="1.0" encoding="utf-8"? > <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
    <path
        android:pathData="M 100 100 L 300 100 L 200 300 z"
        android:strokeColor="# 000000"
        android:strokeWidth="5"
        android:fillColor="#FF0000"
        />
</vector>Copy the code

The canvas size for this example is 400 X 400 pixels (upper-left coordinates are 0,0; Move to 100, 100, then draw a line to 300, 100, then draw a line to 200, 300, then draw a line to the starting position of the path. So an inverted triangle is drawn.

Note that there are two width and height Settings on the root vector element. Viewport refers to the size of the canvas in the vector, while Android :width and Android :height refer to the size of the vector’s corresponding VectorDrawable. The pathData in the path element is the path data of the vector graph, and other properties can be set.

Attributes of the PATH element

Basic SVG path Settings

Attribute set Functional description
android:name Define the name of the path so that it can be referenced elsewhere by name
android:pathData The same path information as the D element in SVG.

SVG path border related Settings

Attribute set Functional description
android:strokeColor Define how to draw path borders and not display borders if none is defined
android:strokeWidth Defines the size and thickness of the path border
android:strokeAlpha Define the opacity of the path border
android:strokeLineCap Set the shape of the path cap to butt, round, or square.
android:strokeLineJoin Set the connection mode of the path junction. The value can be miter,round, or bevel.
android:strokeMiterLimit Sets the upper limit of the bevel

When strokeLineJoin is set to “miter”, when two line segments are drawn to intersect at an acute Angle, the resulting slope may be quite long. When the ramp is too long, it becomes incongruous. The strokeMiterLimit attribute sets an upper limit for the length of the bevel. This property represents the ratio of the length of the bevel to the length of the line. The default is 10, meaning that the length of a bevel should not exceed 10 times the width of the line. If the bevel reaches this length, it becomes bevel. This property is invalid when strokeLineJoin is “round” or “bevel”.

SVG path color related Settings

Attribute set Functional description
android:fillColor Define the color of the fill path, if not defined, the fill path is not filled
android:fillAlpha Defines the opacity of the fill path color

The root element vector

The root element vector is used to define the vector graph

Basic setup

Attribute set Functional description
android:name Defines the name of the drawable
android:width Define the intrinsic width of this drawable to support all sizes supported by Android, usually using DP
android:height Define the intrinsic height of this drawable to support all sizes supported by Android, usually using DP
android:viewportWidth Defines the width of the vector graph view, which is the virtual canvas on which the vector graph path data is drawn
android:viewportHeight Defines the height of the vector view, which is the virtual canvas on which the vector path data is drawn

Additional Settings

Attribute set Functional description
android:tint Define the TINt color of this drawable. The default is no tint color
android:tintMode Defines the Porter-duff blending mode for tint colors. The default value is src_in
android:autoMirrored Set whether the image is automatically mirrored when the system is RTL (right-to-left) layout. Like Arabic.
android:alpha The transparency property of the image

The group node

Sometimes you need to work with several paths together, so you can use the group element to put multiple paths together. Group supports the following attributes:

Attribute set Functional description
android:name Define the name of the group
android:rotation Defines how many degrees the group’s path is rotated
android:pivotX Define the X reference point for scaling and rotating the group. The value is specified relative to the vector’s viewport value.
android:pivotY Define the Y reference point for scaling and rotating the group. The value is specified relative to the vector’s viewport value.
android:scaleX Define the scale of the X-axis
android:scaleY Define the scale of the Y-axis
android:translateX Define the displacement of moving the X-axis. Relative to the vector’s viewport value.
android:translateY Define the displacement of moving the Y-axis. Relative to the vector’s viewport value.

For example, the triangle mentioned above can be rotated 90 degrees by group.

<? xml version="1.0" encoding="utf-8"? > <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
    <group
        android:name="name"
        android:pivotX="200"
        android:pivotY="200"
        android:rotation="90">
        <path
            android:fillColor="#FF0000"
            android:pathData="M 100 100 L 300 100 L 200 300 z"
            android:strokeColor="# 000000"
            android:strokeWidth="5" />
    </group>
</vector>Copy the code

Use the created static SVG graphics

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        app:srcCompat="@drawable/triangle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="VectorDrawableCompat" />
</LinearLayout>Copy the code