blog_vector_drawable

Vector Drawable in Android


In this tutorial, you will learn how to import and use Vector Drawable in your Android project.

 

Android Vector Drawable is alternative to images of different resolutions. We need only one vector file for multiple screen size devices. For adding Vector Drawable we need SVG image file to convert into Vector Drawable XML file.

 

Why Vector Drawable?

VectorDrawables lets you declare and use vector images on Android and even run nice animations on them. As usual you would declare vector resources in XML. The notation is the same as for Scalable Vector Graphics (SVG). Although as of now, only a subset of SVG is supported.

Handling different Image Resolutions:

Images of different Resolutions approx., sizes:

  • mdpi file size: 2.39 kb
  • hdpi file size: 3.89 kb
  • xhdpi file size: 5.44 kb
  • xxhpi file size: 8.99 kb
  • xxxhdpi file size: 11.90 kb

total images size: 31.81 kb which is not at all to compare with 1.64 kb of single Vector Drawable Image.

 

Limitation of Vector Drawable:

  • It will not support gradient colors
  • Take more size when then images in case complex shape of SVG file.
  • Cannot use different colors for different paths at runtime.

 

Getting Started

 Start off by updating your support libraries to 23.2.0.

Importing SVG file as Vector Drawable file

  1. Right Click on res folder > New > Vector Assets
  2. It will open prompt window of Vector Asset where 
    • You can choose SVG files from default android icons list
    • You can also load local SVG file from the computer

import_svg_file.png

You will find generated Vector Drawable in your Drawable Folder. For supporting Vector Drawable in your all UI components, we need to put Vector Drawable as an item of selector Drawable.

The sample of vector drawable may look like this:

 

Using Vector Drawable as a Selector:

To set it to all our Android UI components I have put that android_normal.xml as item of selector for vector_image.xml file. Now my vector_image.xml will be:

Now use vector_image.xml as a background drawable:

Using Animator-Vector to Animate:

To achieve animation, you will need to wrap each section that you want to animate in a <group> tag. The updated version of android_normal.xml then looks like this:

We can now define a drawable consisting of an <animated-vector> to apply animations to these groups within the main android group in order to animate some of the path elements:

The top_down animation is just a simple, repeating Y translate animator:

Finally, for animating the vector, use AnimatedVectorDrawable.

Changing color at Runtime:

NOTE: This will affect the whole vector drawable image to same color. We cannot change the color of individual path at runtime. Looking at the source code of VectorDrawableCompat, the only method to expose the inner element by name is getTargetByName which is present in inner private state class VectorDrawableCompatState of VectorDrawableCompat. 

Points to Remember:

  • The <vector> tag must have android:height and android:width to define the intrinsic width and height of the VectorDrawable. Your app will crash if you skip them.
  • If your VectorDrawable has a smaller android:height or android:width than when you use them say in an ImageView, your graphic will look pixelated.

 

ScreenShot:

vector_drawable_normal.pngvector_drawable_selected.pngvector_drawable_anim.png

Complete Source code available here.


About Durga Chiranjeevi

I’m a normal guy, engineer by education who is passionate about Programming and Internet. An android enthusiast, now moving for cross platforms and game development.