Android Vector Drawable Example using AppCompat Support Library

With the Arrival of the new version of the Android Support Library AppCompat v23.2 , it comes up with backward compatibility of some features and add some new features also. With the release of Android lollipop (API 21) a new component was included named Vector Drawable. But this component only works on API 21+, with the arrival of Android Support Library AppCompat v23.2 Vector Drawable now provides great backward compatibility to Drawable Images for API 7+ device .

What is Vector Drawable ?

As the name implies, vector drawables are based on vector graphics, as opposed to raster graphics. , vector graphics are a way of describing graphical elements using geometric shapes. It is similar to SVG file. In Android Vector Drawable are created with XML files. Before the Addition of Vector Drawable in Android SDK, developer had to create multiple version of images for different display resolutions . This take more time to create extra assets and consume more space that increases the Apk size.
Now there is no need to design different size image for mdpi, hdpi,xhdpi and etc. With Vector Drawable you need to create image only once as an xml file and you can scale it for all dpi and for different devices. This also not save space but also simplifies maintenance.

Let’s Get it Working

In this tutorials we will learn how to create Vector Drawable. To really understand the usage of Vector Drawable we will create an app. The App will show the usage of Vector Drawable. I assume that you have created a new android project.

Step 1 ) Update build.gradle file

Before you can use Vector Drawable in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file and rebuilt the project .

Step 2 ) Creating Vector Drawable

Here we create vector drawable by using Vector Asset Studio Tool that is inbuilt tool in Android Studio.1) Right Click on drawable folder > New > Vector Assets

Vector Asset

2) Now Vector Asset Studio Tool window is prompted.

Vector Asset Studio

3) Creating vector drawable xml from default Material icon or Local SVG File.Option 1) Material icon
Choose Material Icon option and then click on Choose button against the Icon option. It will prompt the Select Icon window here you can choose any icon you want to. I here chosen the man with bicycle icon and click Ok.

Select Icon Window

This window shows the preview of the icon that is chosen. I have also set the size 64dp X 64dp. Now click on Next.

Vector Drawable Preview

Here this window allows to set the Target Module and Res Directory(Either release or debug mode). After configuration click finish.

Icon output window

Below is the result of the above process. It will generate the vector drawable icon_man_cycle.xml in drawable folder.

Step 4) Update activity_main.xml.

Open the layout file for the MainActivity.java i.e activity_main.xml and add the below code in your layout file . The code will create three TextView and three ImageView to show the usage of Vector Drawable. Please note that i have used app:srcCompat instead of android:src to set drawable to ImageView. From three ImageView two of them are assigned images from drawable folder using app:srcCompat and one of the ImageView is assigned image progmatically.