Translated and edited articles from: medium.com Authors Muzaffar Ali

Open any XML file you will see VectorDrawable some cryptic characters in attribute pathData.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FF0000"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />
</vector>

Those who work regularly with paths can understand it and explain it to you know it draw something. Those who do not do much, it will be a mystery.

What is VectorDrawable

VectorDrawable a description in XML of Vector. Unlike other popular image formats such as Bitmap, JPEG, GIF and PNG, Vector no loss of quality when they are scaled up or down. This makes the use of image quality or size difference is not necessary, so help you reduce the file size APK. In fact, VectorDrawables contains commands Path (how to draw lines and supply) and like the Path command when working with Canvas, drawing and rendering VectorDrawables process is time consuming and memory, That is why VectorDrawable, best used for simple flat graphics.

Why must understand this command? I just took from SVG?

If you want to create effects for VectorDrawable, as any movement today, one of the requirements is that you are working VectorDrawable effect? ​​start and end must have a reasonable command. Moreover, you will know how these commands do motion / change to animation. And of course understand the meaning of the command? PathData can help a lot as to create your own VectorDrawable,…

Understanding the command in pathData

Let me start by saying that even if you learn how much the path command, unless you are a genius, there is a limit to what you can understand. Vector graphics programs do not really “clean code” and easy to read? humans. After the files as SVG vector graphics are passed through the creation of Android VectorDrawable Studios, they become compact and more readable, However, I've noticed that a lot can still command much more complicated than what you need. ?Next, to understand the circles and arcs only requires you to have more imagination or mathematical ability? Good.

Basic

The basic path command includes the alphabet followed by one or more of. The number usually separated by commas, but sometimes can be spaces. Example:

M100,100 L300,100 of L200,300
//or
M 100 100 The 300 100 The 200 300 from
//or
M1100,100L300,100L200,300z

Alphabet can be uppercase or lowercase. Uppercase means absolute position, lowercase means relative position.

commands

F or m (X, AND) +

Moveto: Move the cursor to the position, uppercase absolute, lowercase is relatively. The MoveTo command is followed by the coordinates X, AND. There may be more than one set of coordinates at the behest M, they are considered commands lineto implicit.

Z or z

closepath: Draw a line from the current position of the cursor to the starting position of the path. Without any parameters attached.

L or l (X, AND) +

Lineto: Draw a straight line from your current location to the location specified by X, AND. Uppercase means absolute coordinates, lowercase means relative coordinates. You can have multiple sets of coordinates by order lineto. If you want to specify more than one set of coordinates, that means you can create a multi-line (Many consecutive road).

H or h (X) +

Horizontal Lineto: draw a horizontal line from the current cursor position to the position specified by X. If more coordinates X behest, this is considered a multi-line. Y coordinates unchanged. Uppercase H is the absolute coordinates, lowercase h is the relative coordinates.

V or V (AND) +

Vertical Lineto: Draw a vertical line from the current cursor position to the position specified by Y. If more coordinates Y behest, this is considered a multi-line. Coordinates X unchanged. Uppercase V is the absolute coordinates, lowercase v is the relative coordinates.

With the basic commands stated, let us explain command in the example above:

M100,100 L300,100 of L200,300

M100,100: Move the cursor to the absolute coordinates X = 100 Y = 100px.
L300,100: Draw a straight line into the X = 300 Y = 100 (starting position is 100.100).
L200.300: Draw a straight line into the X = 200 Y = 300 (starting position is 300.100).
from: Close path, Draw a straight line from your current location to 100.100. When you close the path ie you draw a line from the last point on the first point. You can remove it if you do not need to play for example when drawing plus (+).

If we put it inside the XML file pathData simple VectorDrawable, we can see results:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
        android:width="400px"
        android:height="400px"
    <!-- size of the virtual canvas -->
        android:viewportWidth="400.0"
        android:viewportHeight="400.0">
    <path
        android:fillColor="#0000FF"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="4"
        android:pathData="M100,100 L300,100 L200,300 z"/>
</vector>

Here basically pathData you understand and can create simple VectorDrawable. Also a few examples in the last original article (see link on top) you can refer to.