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.

Solution 1

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

Solution 2

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.

Solution 3

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

Solution 4

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

Solution 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

View more solutions

Comments

[Akbar]

how to change color (without RGB color) under v21 as ?attr/colorPrimary

[suku]

@KirillKarmazin, I am not the creator of the tutorial. I too learned from it.

[Umasankar]

it saves me lot of time

[Yossi]

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!