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.

please check [this](http://stackoverflow.com/a/35738726/2826147) answer. — Amit Vaghela, Mar 02 '16 at 05:27

Ahmad Aghazadeh · Accepted Answer · 2017-10-29T04:28:00.763

98

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

edited Oct 29 '17 at 04:28

answered Feb 15 '16 at 06:02

Ahmad Aghazadeh

16,571
12
101
98

how to change color (without RGB color) under v21 as ?attr/colorPrimary – Akbar Oct 03 '16 at 07:59
Perhaps anyone can help... I am trying to convert ibb.co/SdZjjTH to xml using autotracer.org and inloop.github.io/svg2android. It works, but when I try to use it in my app, the app crashes. Can you check if it works for you? Thanks! – Yossi Feb 09 '20 at 16:25

score 44 · Answer 2 · answered Nov 03 '16 at 09:43

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

Download the software InkScape
Open your png in it and follow the procedure shown in the video to convert it to svg
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
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.

@KirillKarmazin, I am not the creator of the tutorial. I too learned from it. — suku, Nov 22 '18 at 11:17

score 21 · Answer 3 · answered Aug 27 '17 at 13:02

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:)

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

score 6 · Answer 4 · answered Sep 01 '18 at 08:37

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!!

score 5 · Answer 5 · edited Jun 13 '20 at 04:53

5

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

edited Jun 13 '20 at 04:53

Saeed

3,294
5
35
52

answered Apr 18 '18 at 16:43

live-love

48,840
22
240
204

score 2 · Answer 6 · answered Jun 25 '16 at 03:56

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.

passionatedevops · Answer 7 · 2020-02-17T01:25:02.297

1

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.

edited Feb 17 '20 at 01:25

answered Aug 15 '19 at 04:38

passionatedevops

513
4
5

yoAlex5 · Answer 8 · 2022-06-27T06:26:14.773

1

Android Studio create vector drawables

You can use Asset Studio to do it

File -> New -> Vector Asset -> Configure

edited Jun 27 '22 at 06:26

answered May 31 '21 at 16:02

yoAlex5

29,217
8
193
205

score 0 · Answer 9 · answered Mar 31 '23 at 11:59

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.

How to create vector drawables for android?

9 Answers9

Linked