In this post, we will learn about how to add vector image in android using vector asset studio. We will see how to add
– vector image, stored locally on device, in any android project.
– predefined vector images (Clip Art), free for use in app under apache license 2.0

Getting Started

In our previous post, we have see how to add images in android studio using image asset studio.
We have seen multiple ways to add image – from locally stored image, from Clip Art or image created from text etc.

We used image asset studio that creates different types of icons with different densities. It also shows us where those images will be stored.

But, there is one problem with these images – We must create multiple versions of same image to handle different screen sizes. I mean you may need to have 5 or 6 copies of same image to handle devices with different resolutions.

To get rid of such problem, we use Vector asset.

If you are interested, you can learn more about difference between vector image and raster image in detail.

Now, we will learn how to add vector images in android using vector asset studio.

At first, we will create new android project. Then, we will create vector image and use it that project.

Let’s start by creating new android application.

Create New Project

At first, follow steps below to create new project.

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

• Install Android Studio
• Create New Project in Android Studio
• Android Project Structure
• Run / Debug / Test Android App

Add Image in XML file

Till now, we have created new android project. Now, open activity_main.xml file. Then, add image into it. Finally, this file will be like –

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/image_example"
        android:src=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Note that android:src=”” attribute is left blank. We have done it intentionally. Our target is to add image into drawable folder, then use that image into android:src=”” attribute.

Adding Vector Image in Drawable Folder Using Vector Asset Studio

Follow step below to add vector image in drawable folder –

1. Select res/drawable folder. Then, right click on it. Then, select New => Vector Asset. Check below image –
   
2. Clicking on Vector Asset opens Vector Asset Studio which will be used to create vector image –
   
3. In Vector Asset Studio, there are few options which we need to select –
   • Asset Type: There are two types –
     1. Clip Art: If you want to use existing material icons (there are over 500 icons), select this type. Then, click on icons being shown after Clip Art. It will open new popup. We can see several icons which can be used for free. Select any image of your choice.
     2. Local File (SVG, PSD): Select this option if you already have vector file, locally stored in your device.

     Based on this option, other options changes in Vector Asset Studio. So, decide before you select any. However, we will cover both ways in this article.

4. At first, we will cover Local file (SVG, PSD) option. So, select this option. Then, follow below steps –
   • Name: Enter name of image. Here, we have used ic_home.
   • Path: Select path of image, stored locally in device.
   • Size: Size of image you want to create.
   • Opacity: It reflect how much transparent your image is. I mean, if you want transparent image, select 0% using slider. If you want semi transparent, select percent value accordingly. If you want fully opaque image, select 100%. Here, we have selected 100% because we want opaque image.
   • Enable auto mirroring for RTL layout: Select this if you want to design layout for RTL layout.
5. Now we will cover Clip Art option. So, select this option. Then, follow below steps –
   • Name: Enter name of image. Here, we have used ic_home.
   • Clip Art: Click on box shown after this option. This will open new pop that contains over 500 material icons that can be used in app. They are free to use under Apache 2.0 license.

     Here, search `home` in search box provided. Then, select home icon. Check below snapshot –
     

   • Size: It is dimension of image you want for image. Here, we are using 24 X 24.
   • Color: It is colour code of image you want for image. Here, we have selected black colour. Click on colour box to open a colour picker popup.
   • Opacity: It reflect how much transparent your image is. I mean, if you want transparent image, select 0% using slider. If you want semi transparent, select percent value accordingly. If you want fully opaque image, select 100%. Here, we have selected 100% because we want opaque image.
   • Enable auto mirroring for RTL layout: Select this if you want to design layout for RTL layout.
6. In this article, we are using Clip Art option in Asset Type. Follow above steps for Clip Art option. Finally, we will have values like below –
   
7. Now, clicking on Next button redirects you to next screen as shown below –
   

   In this screen, we need to select Res Directory and Output Directories

   • Res Directory: We need to select resource source where we want to add the image asset. It is basically related to build variant, including debug or release. There are three available options –
     1. main: Choose this option if you want to add image for all build variant, including debug and release.
     2. debug: Choose this option if you want to add image for debug build only.
     3. release: Choose this option if you want to add image for release build only.

     Note: We have select main here because we want to add image for all build variant.

   • Output Directories It shows final image that will be created. Also, it shows where it will be stored etc. Note that there were multiple images being created when we were trying to create image using image asset studio. But, there is only one vector file, for all resolutions, being created using vector asset studio.
8. Now, click on Finish button. This action creates images for different resolutions and store it in specified path.
9. Open specified path. You will see image there. In our case, It’s like image shown below –
   

Till now, we have see how to add vector image in android using vector asset studio. Now, we will add this image in project.

Using Added Image in Project

Till now, we have added image in drawable folder using image asset studio. Now, we will use them in our project.
So, open activity_main.xml file. Now, add src attribute in ImageView as @drawable/ic_home.

Finally, activity_main.xml file, will look like below –

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/image_example"
        android:src="@drawable/ic_home"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Similarly, you can add any image to ImageView.

Adding String in strings.xml file

Open res/values/strings.xml file. Then, add below code in it –

<resources>
    <string name="app_name">VectorAssetExample</string>
    <string name="image_example">Image Example</string>
</resources>

Now, run your application. You will get output as below –

Output

That’s it. We have learnt how to add vector image in android using vector asset studio. If you want to know more, visit here