Working with SVG/Vector Drawables

Working with SVG/Vector Drawables

While developing Android Applications, supporting multiple resolutions are sometime nightmare to developers. Including multiple images for different resolutions also increases the project size.

The solution is to use Vector Graphics such as SVG images. While Android does not support SVGs (Scalable Vector Graphics) directly, with the launch of Lollipop a new class was introduced called VectorDrawable, which allows designers and developers to draw assets in a similar fashion using only code.

SVG/Vector Drawables

Simply explained, vector graphics are a way of describing graphical elements using geometric shapes. They are particularly well suited to graphical elements created in packages such as Adobe Illustrator or Inkscape where simple geometric shapes may be combined in to much more complex elements.

As the name implies, vector drawables are based on vector graphics, as opposed to raster graphics, vector graphics are a way of describing graphical elements using geometric shapes. It is similar to a SVG file. In Android Vector Drawable are created as XML files.

Now there is no need to create different size image for mdpihdpixhdpixxhdpixxxhdpi etc. We need only one vector file for multiple screen size devices. Also for older versions of Android that don’t support vector drawables, Vector Asset Studio can turn your vector drawables into different bitmap sizes for each screen density at runtime.

Open a new or existing Android Studio Project and right click on Res Folder, and select new then Vector Asset as shown below:

This gives you two options, use a Material Icon or a Local PSD or SVG Image

Material Icon

This option allows you to use Android Studio inbuilt icon library, which has a ton of icons categorized for easy selection.  To select a new Icon, just select the Android Icon which is selected by default, then rename the image, with a unique name. You can provide additional dimensions, or rather specify desired icon dimensions.

Android Studio allows you to alter the opacity of the image, using a slider, that you can adjust to obtain the desired opacity. The image is then stored in the drawable folder.

Local File (PSD or SVG)

If you have done some web development, you have possibly used SVG images before. You can download some amazing SVG images here, then try to import using the Local File (SVG, PSD) option in Android Studio

The Local File option gives you the same option as the Material Icon, and is stored in the drawable folder. However the SVG file is basically a vector file that looks like the code sample below:

The vector file is loaded to an Image, as shown below:

To use the Vector Image, add it to an ImageView or as a layout background. Let me show you a simple example, using an Imageview. You can scale the ImageView without loosing quality.

The sample code is shown below, with the above output

You can try playing with some SVG Images and see how your app behaves or works.

Conclusion

In this article, I showed you how to play with SVG Images and Material Icons. In the next article, we will look at the Image Asset using Android Studio 3.0, which is currently in Beta version. Remember to subscribe and leave comments or questions below.

Happy Coding!

More From Android Study:

Leave a Reply

Your email address will not be published. Required fields are marked *