Android - Working with VectorDrawable (Part 1)

VectorDrawable - what is it ?

** Introduction :** To represent an image in android, we use bitmaps. But the main problem with a bitmap image is that we cannot scale it without losing its quality. That’s why we need to create different bitmap images for different screen devices. With api level 21 ( android 5.0) , google has introduced support for vectorDrawable. (only for devices api >= 5.0 but using appcompat v 7:22 , we can  ). VectorDrawable images are simply xml file that contains all information of an image (like lines, curves etc. ) and the color associated with each one of them. The biggest advantage of using vectorDrawable is that we need only one image for different screen devices.This not only reduces the size of the final apk, also it simplifies the maintenance of the project. Many other platforms use vector images in SVG (Scalable Vector Graphics) format, but we cannot use SVG with android application. Even though there are 3rd party libraries that we can use to work with SVG files, but instead, I recommend to use Vector Asset Studio to convert SVG files to vectorDrawable.

Vector Asset Studio : This tool was introduced with android studio 1.4 . Using this tool, we can convert SVG files to vectorDrawable and also we can use any material design vector assets provided by the software. Follow these steps to start Vector Asset Studio :1. Open any project on Android Studio. 2. Right click on “res” -> new -> Vector asset 3. As you can see we can choose inbuilt material design icon files and also local svg files.

android_vector_asset

But VectorDrawable format supports a subset of SVG features and so it will not work for all SVG files. e.g. if SVG file is using Gradient ,pattern fills or l_ocal IRI_ reference , it will not work.

3rd Party Library :

Other 3rd party SVG to vectorDrawable converters are also available like svg2android ,but it has also the same restrictions. Recently this tool has added support for local IRI references . you must select the  Bake transforms into path (experimental)option for this. SVG gradients and pattern fills are still not supported ,as VectorDrawable doesn’t support itself .

  • Also, we can use SVG optimisation tool like svgomg to optimise a complex svg before converting it to a vectorDrawable using any of the method explained above.

Ok..so let’s check which one will be better for vector conversion. I am using this vector from freepik for this example.

  1.  Download it and Extract the zip file

vectordrawable_android 2. Only eps file is available. 3. We can convert it to svg file using online converter like cloudconvert 4. On Illustrator it looks like :

vectordrawable_android_2

4.Next, I will try to convert it to vectorDrawable :

Using Android Studio :

  1. File -> new ->Vector Asset -> click on Local SVG file and select the svg file.

vectordrawable_android_studio

Oops…seems like this vector file contains patterns . As we have mentioned above ,vectors with gradient , pattern and IRI reference are still not convertible.

**Using svg2android tool : **

  1. Drag and Drop the svg file on svg2android -> copy the generated xml code -> create one new drawable file and paste it vectordrawable_android_usingtool

Pattern part is still not converted but, at least, all other parts are converted properly.

From the above image, it is clear that the “football” vector is causing the problem. So if we want to convert any svg vector file to android vectorDrawable, svg2android is more helpful than vector studio . At least we can check which part can be convertible and which part is not. I have tried it on “Android Studio 2.1 preview 3” , and since vector is now supported on pre-lollipop devices, hopefully, google will add some more features to Vector Studio in future.