Vector Graphics on Android

Paths

Paths can be thought of as the main component for creating a vector asset. When you draw them, consider the pencil analogy again, you move your pencil to a point and put it down on the paper then draw a line or a bezier curve to another point repeating this process over and over until you compose your illustration. This is exactly how vectors are created only you specify them using the various path commands. So what are the available commands that Android supports for inflating these vector images?

Well, first you need to add the android:pathData="" attribute in XML.

Copy the following XML just below the opening vector tag:

<path android:pathData=""/>

Here you have defined your first path with an empty android:pathData value.

Before going any further, it is important to note that you won’t see any paths without adding a stroke width and stroke color or a stroke fill so time to do that next.

Fill and Stroke

As you could imagine, fill is just the information about what color to provide for the inside portion of the path. This is added using the android:fillColor="@color/fill_color" or android:fillColor="#FF777777" format in XML. Add the fillColor attribute to your path so it now looks like this:

<path 
  android:fillColor="#FF777777"
  android:pathData=""/>

Here you have added a gray fill color to your path.

With the android:strokeWidth="" and android:strokeColor="" XML attributes you can provide a stroke or outline to the vector drawable styling its width and color respectively like so:

Copy and paste the following attributes lines inside to the path tag right after the fillColor and pathData attributes:

android:strokeWidth="1"
android:strokeColor="#FF000000"

Here you have:

1. Added a stroke width of 1 to your path.
2. Added a stroke color to your path.

Next, you will see how to actually draw a vector using its built-in functionality from Android which follows the scalable vector graphics path spec.

Drawing Commands

The available drawing commands which you will learn next are:

• M: Move to.
• L: Line to.
• C: Bezier curve to, or curve line.
• Z: End line.

Move to (M)

The move to command is denoted by a capital M and means within the grid move to an x,y coordinate.

Copy M2,12 into pathData. It should now look like this:

<path 
  android:fillColor="#FF777777"
  android:pathData="M2,12" 
  android:strokeWidth="1"
  android:strokeColor="#FF000000"/>

Here you move the pencil to 2 points from the left edge (x-axis) and 12 points from the top edge (y-axis)

This is because the canvas starts from the top left at coordinate 0,0 so moving to the left or right decreases and increases the X position and moving down or up decreases or increases the Y position respectively.

Line to (L)

The line to command is denoted by a capital L and means draw a line from the previous point to this X, Y coordinate. For example, in the same 24×24 grid above L22,12 would draw a line all the way across the canvas until 2 points from the right edge.

Copy L22,12 into the path data right after M2,12. The pathData now looks like this:

android:pathData="M2,12 L22,12"

Here you have drawn a horizontal line from 2,12 to 22,12 within the 24×24 grid.

Bezier Curve to (C)

Paths can also support curved lines using the curve to command which draws a bezier curve from the previous point to a final point using 2 control coordinates. A bezier curve is a smooth curve that can be created mathematically or from a series of instructions. It is denoted by Cx1,y1 x2,y2 finalX,finalY where x1,y1 is the control point for the start of the curve, x2,y2 is the control point for the end of the curve, and finalX,finalY is the point you want the curve to end. The control points help describe the way the curve should bend. You can learn more here.

For example (again using the 24×24 grid), you could write C22,22 12,22 12,22 C12,22 1,22 2,13 and this would draw a curved line from the right edge back to the left edge creating a semi-circle shape on the lower half of the grid. Add that command to your path. The full pathData should now look like this:

android:pathData="M2,12 L22,12 C22,22 12,22 12,22 C12,22 1,22 2,13"

If you break down this command you can see you are drawing 2 bezier curves:

1. C22,22 12,22 12,22 – draws a curve from the previous point to 12,22 in the center using 22,22 as control point one and 12,22 as control point 2.
2. C12,22 1,22 2,13 – draws a curve from the previous point to 2,13 using 12,22 as control point one and 1,22 as control point 2.

The final step to complete a vector’s path data is to close the path.

Closing a Path (Z)

Finally, to close a path you simply use the Z command which closes the path drawing a straight line from the current position to the starting point.

For example, to stop drawing at this point 2,13:

Add Z to the end of your pathData so it looks like this:

android:pathData="M2,13 L22,13 C22,22 12,22 12,22 C12,22 1,22 2,13Z"

By now you have created the path data for the semi-circle on the bottom portion of the screen. Notice that the red points along the bottom line in this image are the control points of your curves.

This is pretty cool but what if you wanted to add another path or combine two paths so you could do something with them? This is where groups come into play.

Groups

Groups are just that, groups of paths. They can be used to combine paths into the same layer which allows you to both stay organized and do other things like rotating, scaling, translating or animating multiple components at once.

You will do this in a bit. For now, consider the following XML group which builds on the previous example and draws a couple of square eyes inside a group.

Copy the following code and paste it above the previously defined path tag:

<!-- 1 -->
<group>

  <!-- 2 -->
  <path
    android:fillColor="#FF777777"
    android:pathData="M2,2 L 2,11 L 11,11 L 11,2Z"
    android:strokeWidth="1"
    android:strokeColor="#FF000000" />

  <!-- 3 -->
  <path
    android:fillColor="#FF777777"
    android:pathData="M13,2 L 13,11 L 22,11 L 22,2Z"
    android:strokeWidth="1"
    android:strokeColor="#FF000000" />
</group>

Here you have:

1. Added a new group with two sub paths inside it.
2. Added the first rectangular eye.
3. Added the second rectangular eye.

The final XML should look like:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="24dp"
  android:height="24dp"
  android:viewportWidth="24.0"
  android:viewportHeight="24.0">
  <!-- 1 -->
  <group>
    <path
      android:fillColor="#FF777777"
      android:pathData="M2,2 L 2,11 L 11,11 L 11,2Z"
      android:strokeWidth="1"
      android:strokeColor="#FF000000" />

    <path
      android:fillColor="#FF777777"
      android:pathData="M13,2 L 13,11 L 22,11 L 22,2Z"
      android:strokeWidth="1"
      android:strokeColor="#FF000000" />
  </group>

  <!-- 2 -->
  <path
    android:fillColor="#FF777777"
    android:pathData="M2,13 L22,13 C22,22 12,22 12,22 C12,22 1,22 2,13Z"
    android:strokeWidth="1"
    android:strokeColor="#FF000000" />
</vector>

1. Group of 2 paths, composing the eyes.
2. The semi-circle path, composing the smile.