Android-Working with Vector Drawable (Part 2)

In our previous tutorial , we have discussed  what is a Vector, what is VectorDrawable , difference between svg and Vector and different ways to convert svg images to vectorDrawable.This tutorial will be mainly focused on how to support VectorDrawable on preLollipop android devices.

Introduction :
Previously , vectors were not supported on pre-lollipop android devices, but using support lib 23.2.0 and above, we can easily use on devices running Android 2.1 and above.Two new vector classes were introduced with this support lib :

  1. VectorDrawableCompat
  2. AnimatedVectorDrawableCompat ( Can be used only for API 11 and above )
 

How to use ?

a ) Enabling vectorDrawable  flag on build.gradle :
First, check your Gradle plugin version on Android Studio :
(Go to File -> Project Structure -> Project )

if you are using Gradle plugin v2.0 or above, make the following changes to build.gradle file :

    defaultConfig { 
        vectorDrawables.useSupportLibrary = true 
    }
}

else ,

android {
    defaultConfig {
    // Stops the Gradle plugin's automatic rasterization of vectors
        generatedDensities = [] 
    }
       
    // Flag to tell aapt to keep the attribute ids around
    aaptOptions {
        additionalParameters "--no-version-vectors" 
    }
}

Using Vectors on App ?

One thing you should keep in mind that VectorDrawableCompat is only used for API 20 and below. For API 21 and above devices, default VectorDrawable class will be used.

So , how to use vector images ?
Simple..just use app:srcCompat attribute inside ImageView.

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
app:srcCompat="@drawable/legoman" />

Note : we can use app:srcCompat for nonvector images also.

b) During runtime :

ImageView iv = (ImageView) findViewById(...);
iv.setImageResource(R.drawable.ic_search);

That’s it. following screenshots are one on Android device 2.3 and right one is on Android 5.

 vector_2.3 vector_5

This project is shared on Github. Clone it from here.

 

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 local 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.