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.

DownloadCode
 
github

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 .

If you are using v2.0 or above of the Gradle plugin, then add following code

If you are using v1.5 or bellow of the Gradle plugin, then add following code

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

Vector Asset


2) Now Vector Asset Studio Tool window is prompted.
Vector Asset Studio

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

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

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

Icon output window


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

Option 2) Local SVG File
You can also create Vector Drawable image from Local SVG File. Choose Local SVG File option and then select the local file path.

Vector Asset Studio

Vector Asset Studio


This window shows the preview of the icon that is chosen from Local file path. I have also set the size 64dp X 64dp. Now click on Next.
Vector Drawable Preview

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

Icon Output Window

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





Step 3) Update strings.xml.

Add the below string values to the string.xml located in res => values => strings.xml.

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.

Step 5) Update MainActivity Class.

Now Open MainActivity.java and make some changes in code . Here i created object of image view and set Vector Drawable Programatically to ImageView by using setImageResource();

The above code would result a screen like this:

Vector Drawable Show Case

Vector Drawable Show Case

DownloadCode
 
github

Enjoy Coding and Share Knowledge

Show Buttons
Hide Buttons