Android Vector Drawable

Filed Under: Android

In this tutorial, we’ll be discussing Android Vector Drawable. Furthermore, we’ll be implementing them in our Android Application.

Android Vector Drawable

Often we use PNG as our drawable images. In order for the PNG images to work for different screen sizes, we create multiple PNG assets with different sizes and densities. Subsequently, PNG images take up extra space and lead to large APK sizes of the Android Apps.

This is where Vector Drawable comes to our rescue! They are your replacement for PNG images.

A VectorDrawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information.

They can be scaled according to the screen size without loss in quality. They are rendered quickly onto the screen too. VectorDrawable are an XML file.

You can add a new Vector Asset in your drawable folder using New | Vector Asset.

android vector asset window

Thus we can create Vector drawables of Material Design icons. The code for the VectorDrawable looks like this:

android vector drawable asset xml

They are set in the vector tag. android:viewportWidth and android:viewportHeight are used in setting the width and height of the drawable bounds. Within these dimensions, the vector drawable is drawn on the canvas.

path is the tag that creates the drawable. Inside the path we create lines, curves, arcs and set the border, background color. We do so path commands in the pathData.

Vector Drawables were introduced since Android Lollipop and higher but thanks to backward compatibility, they are compatible with earlier versions too.

Creating Path for Vector Assets

The path commands consist of an alphabet followed by coordinates. Imagine creating paths as doing a painting. Uppercase alphabets represent absolute position. Lowercase represent relative position.

  • Mmoveto command. It’s a way of saying move your pencil to the given coordinate on the view. Example M 100 100 moves an imaginary pencil to the 100, 100 coordinate on the canvas.
  • Lline to command. Is used to draw a line from the current position to the position specified.
    Example : M 100 100, L 120 100 draws a horizontal line.
  • z – This is used to close a path. It draws a line from the last position to the first position. Example M 100 100 L 120 100 L 120 120 L 100 120 Z creates a square.
  • C – This is used to create a bezier curve. We need to specify three sets of coordinates after this. The first and second would the two control points between the initial point and the end point.
  • A – is used to draw an arc. After a you need to specify the following format: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry and x axis are the two radii specified.
We can specify more than one paths in a vector by setting the path tags inside a group tag.

Let’s create some random interesting Vector Drawable in our Android Application using the above knowledge.

Android Vector Drawable Example Project Structure

android vector drawable example project structure

Android Vector Drawable Code

The code for the activity_main.xml layout is given below:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_rectangle"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/ic_w" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:src="@drawable/ic_w_fill" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="16dp"
            android:layout_gravity="center_vertical"
            android:layout_height="16dp"
            android:src="@drawable/ic_a" />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:src="@drawable/ic_c" />

    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:src="@drawable/ic_0" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:src="@drawable/ic_jd" />

</LinearLayout>

Let’s look at each of the Vector Drawables implementation one a time.

ic_rectangle.xml


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <path
        android:name="light_triangle"
        android:fillColor="@color/colorPrimary"
        android:pathData="M 100,0 L 0,100 100,100 z" />

    <path
        android:name="dark_triangle"
        android:fillColor="@color/colorPrimaryDark"
        android:pathData="M 0,0 L 100,0 0,100 z" />

</vector>

In the above code, we’ve created two paths. Each a right-angled triangle.

Setting this on our LinearLayout would make the background look like:

android vector drawable two triangles

ic_w.xml


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50dp"
    android:height="50dp"
    android:viewportHeight="50.0"
    android:viewportWidth="50.0">
    <group android:name="w">

        <path
            android:name="one"
            android:pathData="M 25 0 L 10 40"
            android:strokeColor="#FFF"
            android:strokeWidth="1" />

        <path
            android:name="two"
            android:pathData="M 25 0  L 40 40"
            android:strokeColor="#FFF"
            android:strokeWidth="1" />


        <path
            android:name="three"
            android:pathData="M 10 40 L 0 0 "
            android:strokeColor="#FFF"
            android:strokeWidth="1" />

        <path
            android:name="four"
            android:pathData="M 40 40 L 50 0"
            android:strokeColor="#FFF"
            android:strokeWidth="1" />

    </group>
</vector>

In the above code, we’re trying to create a W symbol using lines.

android vector drawable letter W

Note: Instead of a separate path, we can merge all in a single path command. Though you can use multiple paths for getting a clear understanding of what each path does.

ic_w_filled.xml
In the below code, we’ll use the z command to close the paths and fill color inside them:


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50dp"
    android:height="50dp"
    android:viewportHeight="50.0"
    android:viewportWidth="50.0">
    <group android:name="wFilled">

        <path
            android:name="one"
            android:pathData="M 25 0 L 10 40 M 25 0 L 40 40"
            android:strokeColor="#000"
            android:strokeWidth="1" />


        <path
            android:name="two"
            android:fillColor="@android:color/holo_orange_light"
            android:pathData="M 10 40 L 0 0 L 25 0 Z"
            android:strokeColor="#FFF"
            android:strokeWidth="1" />

        <path
            android:name="three"
            android:fillColor="@android:color/holo_orange_light"
            android:pathData="M 40 40 L 50 0 L 25 0 Z"
            android:strokeColor="#FFF"
            android:strokeWidth="1" />

    </group>
</vector>

android vector drawable letter filled with color

ic_a.xml
Let’s create the A letter using paths.


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50dp"
    android:height="50dp"
    android:viewportHeight="50.0"
    android:viewportWidth="50.0">
    <group android:name="a">

        <path
            android:name="one"
            android:pathData="M 25 0 L 10 40"
            android:strokeColor="#FFF"
            android:strokeWidth="2" />

        <path
            android:name="two"
            android:pathData="M 25 0  L 40 40"
            android:strokeColor="#FFF"
            android:strokeWidth="2" />


        <path
            android:name="three"
            android:pathData="M 15 25 L 34 25"
            android:strokeColor="#FFF"
            android:strokeWidth="2" />
    </group>
</vector>

ic_c.xml


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportHeight="48.0"
    android:viewportWidth="48.0">
    <path
        android:name="curves"
        android:pathData="M 25 0 C -25 12.5 22 40 25 25"
        android:strokeColor="#FFF"
        android:strokeWidth="1" />
</vector>

The A and C letters vector drawable look as:android vector drawable a c letters

ic_0.xml


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="60dp"
    android:height="60dp"
    android:viewportHeight="50"
    android:viewportWidth="50">

    <path
        android:fillColor="@android:color/holo_green_dark"
        android:pathData="M16,25
        A10,10 0 2,2 36,25
        A10,10 0 2,2 16,25 Z" />
</vector>

A circle is made using two arcs which are then closed.

android vector drawable circle

Now for the last. Let’s create a JournalDev JD sample icon using vector drawable.


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportHeight="48.0"
    android:viewportWidth="48.0">
    <group android:name="thing">
        <path
            android:name="curves"
            android:pathData="M 25 10 L 12 10 M 25 10 L 25 30 M 25 30 C 20 35 15 30 12 25"
            android:strokeColor="#000"
            android:strokeWidth="1" />

        <path
            android:name="curves"
            android:pathData="M 30 10 L 30 30 M 30 10 C 45 15 45 25 30 30"
            android:strokeColor="@android:color/holo_red_dark"
            android:strokeWidth="1" />

    </group>
</vector>

android vector drawable jd logo

Finally, our application’s output looks like this:

android vector drawable output

This brings an end to this tutorial. You can download the final Android VectorDrawable project from the link below:

You can also download Android Studio project code from our GitHub Repository.

Comments

  1. Fran says:

    They should provide a WYIWYG tool for dealing with these. Having to draw graphic primitives by entering path data seems like 80s LOGO’s way of doing things…

  2. Ragnar says:

    Brother you need to give some more specific detail about using C and A. command. I am not able to understand the these C and A.How it works.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages