How to create vector drawables for android?

Question

I am new to VectorDrawables.

I can see that the default vector drawables provided with android studio like ic_menu_gallery, ic_menu_camera, etc. are working great. So I tried to create my own vector drawables by converting my png images to svg first and using the path and fill values to make vector drawables i.e replaced the android:pathData for d and android:fillColor for fill tag in svg files. It somehow gave vector drawables but distorted or currputed looking.

If I am not taking the right approach please suggest me.

Answer 1

Since this was the first question I found while trying to solve a bug in my project, I will add what was my solution.

Ensure the vector drawable was added as an XML file in the drawables folder. I added it as an SVG drawable, which was not recognized in the code.

If it is in SVG, change the extension to XML and it will work.

Answer 2

Android Studio create vector drawables

You can use Asset Studio to do it

File -> New -> Vector Asset -> Configure 

Answer 3

In Android Studio 3.1:

File -> New -> Vector Asset

Asset Type: Select Local File

Click on the path to choose a .svg or a .psd file

If you don't have an image, go to Google Images, Advanced Image Search. Use file Type: SVG files

Answer 4

Try this : Step 1: Drawable > New > Vector Asset

Select clip art ( to use existing icon) Select from local file choose and add.You can add the color icon in sane way.

Answer 5

Step 1 The first step is to convert it into SVG format - For black and white SVG convertor there are many tools but there are very few good tools for coloured conversion. https://www.autotracer.org/ is one of the best and it worked for me. Convert and download the SVG file. Step 2- In the ' Android Studio ' Go to drawables folder and right click to select New - Vector Asset

Step 3 - Choose the downloaded SVG file from Step 1. The android Studio

Step 4 - Dont forget to set navigationView.setItemIconTintList(null); as null in case the coloured icons are being used in a navigation drawer/view.

Cheers!!

Answer 6

You can use Android Studio. Convert png to svg file online tools PNG to SVG

For SVG color can use :

  <ImageButton
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:id="@+id/button"
    android:src="@drawable/ic_more_vert_24dp"
    android:tint="@color/primary" />

Or

imageView.setColorFilter(getResources().getColor(android.R.color.black), PorterDuff.Mode.SRC_IN);

Can convert SVG to PNG online tool: coolutils

Convert SVG to Android drawable: inloop

Answer 7

I had this problem too and found this very useful website:

https://materialdesignicons.com/

There are many icons and with the "advanced export" you can edit the settings easily. For me it was the fastest and easiest way to create vector drawable, if you don't want to download the file, you can just view the code and copy it, not only as a vector drawable but even as an SVG or XAML. Oh and it's free:)

1. Pick an icon
2. Click on Advanced Export
3. Edit the settings
4. Click on "View Vector Drawable" or download it and put it in your project:)

Answer 8

Here is the best method to convert any png/jpg into vector drawable:

1. Download the software InkScape

2. Open your png in it and follow the procedure shown in the video to convert it to svg

3. The use the SVG to Vector Drawable tool to convert the svg to vector drawable. The other tool svg2android does not always work as sometimes the svg gets improperly converted to a vector drawable

4. Copy the code into a new drawable resource file. Now this can be used as a regular drawable.

If you already have a svg then start straightaway from step 3.

Answer 9

you can create your own svg image or icon using photoshop/illustrator and can import vector asset (available in android studio 2.+). some times importing it results distorted image if svg is complex or has many elements then you can use it as single single element as vector assets by overlapping ImageViews.