All CategoriesAndroid App Development

A Deep Dive Into Android Vector Graphics

As everyday new exciting devices coming out with new sizes and resolution.So to ensure our image should look best in every device having different resolution size we have to know about Vector Graphics.

What is Vector Graphics ?

A vector graphics is a format to represent any image in the form of paths, lines and curves. A path can be a line, a triangle or any complex shape which can be used to create simple to complex structures.Vector-based images are not made up of grid of pixels so you can scaled them to large size as you need and they will not lose their quality.

What is Bitmap ?

A Bitmap is also a image file format but it is different from vector graphics as the BitMap used to store the image in a grid of pixels where each pixels correspond a particular color and the file size of the bitmap image is quite large.

Throughout this blog you will be learning

  • The difference between “Bitmaps” and “Vectors”
  • Why there is the need to use Vector Graphics over Bitmap
  • How can we create vector graphics in android
  • How to upgrade the android version to use Vector Graphics

You need to be aware of Android Drawable concept before continuing reading this blog.

Source code  for this blog is available on GitHub 

A normal bitmap represent an image as a set of pixels in a grid whereas a vector image is represented as a set of points, lines and curves. In other words we can say that we can represent a vector image by describing the object geometrically.
Refer below image to know the difference between vectors and bitmaps.

 
Main reason to use vector graphics over bitmap is Image Scalability Issue. When an image is looking good on a device of resolution 200×200 and if you transfer that image to a high resolution device of 500×500 then that bitmap image looks blur.To resolve this issue many developers are creating multiple versions of single image for different resolution. Due to this more time is consuming and the apk is also taking more space. But with vector graphics you can create an image once, as an XML file and it can scale beautifully in all screens for different resolution. It not only save time and space but it also simplifies maintenance of an APK an android executable file.  
 

 
Figure – Example of a single bitmap image on different resolution devices resulting blur.
In older version prior to Lollipop(5.0) release if you ever want a vector representation, all you need to do is to write java code for the whole things by yourself, that was cumbersome.  
From Lollipop version we have two new classes to support vector graphics which are :

  • Vector Drawable
  • Animated Vector Drawable.

Vector Drawable defines  a static drawable  object so that you can extend this class and make use of this object to use parent class functionalities whereas Animated Vector Graphics can add animations to the properties of vector drawable. Both the classes are the subclasses of Drawable and they are represented as the XML files.
Now we will look at how to create our own vector graphic image by making use of these two classes one by one.

Vector Drawable

It can be represented as a tree hierarchy shown below:

Figure- Sample hierarchy of a vector drawable asset.

In above figure a “Path” being the child node are used to represent the geometry of the object’s outline and the parent node “Group” is used to represent the details of transformation.
There is a tool Vector Asset Tool  which help you to add vector images into your project.
Note: You can also take the default vector image of android or you can add your svg image into the android and use it.

To add svg vector file in android kindly follow the below mentioned steps:

Step 1:-  In app->res->right click on the drawable folder. There you will find a Vector Asset   option. Just click on it.

option.

Step 2:-  Then you will get another pop-up window in which there are two options one is for default image and another is for local image which you can upload from external directory.image by making

Default Image

Local Image

Step 3:- After clicking on the next button you can see that the image that you have selected is resided in drawable folder.

For more information on vector drawable – Click Here

Animated Vector Graphics

After setting up the vector image now suppose you need to perform certain animations like rotation, changing the size, shape etc. To do so there are two approaches : multiple XML files and single XML files.
In this blog we are discussing only one approach multiple XML files with the default image.

Multiple Xml File:-

In this approach  you need to create three XML files,

  1. A Vector Drawable XML file inside drawable folder.
  2. An Animated Vector Drawable XML file also inside the drawable folder which contain the information like target (vector drawable file), the target paths, groups to animate etc
  3. An Animator XML file.

1 : A vector drawable file inside drawable folder as vd.xml


In this there is an attribute android:pathData which is nothing but the d attribute of path of a Svg file. Where M6,18 means Move to 6 units in positive x axis and 18 units in positive y-axis. I know there is still a confusion but I strongly recommend having a look by your own
So that it will easier for you to understand. Svg Path Data

2. An Animated vector drawable file as avd.xml

3.  An animator files inside animator folder in res.

Other Related Files:

  1. Main activity file – In this we have made use of Animated Vector Drawable Compact as this class is compatible with all the versions of Animated vector drawable.

2. Activity_main.xml file – We have to set the src of the image to the avd.xml file.

  1. Now just have a look at the output of this project :

    https://youtu.be/SIwOthukszM

In case if you need the source code kindly refer https://github.com/123Anuj/ImplementingVectorDrawablewithAnimation
 
To configure your app to use vector support libraries, add the vector drawable elements to your build.gradle(app:module). You can refer the below screenshot.
Kindly refer the below screenshot to know what kind of changes that you need to make in the gradle file so that your app will support Vector Graphics.

For more information related to Animated Vector Drawable you can refer to Animated Vector Drawable .

Conclusion

In this blog you have learned about the importance of Vector graphics, how vector graphics image are much better than bitmap image when we talk about the size of the apk.
By using Vector Graphic Images  app maintenance is also easy and feasible. You have also through the how to create an vector graphic image in android like there are two ways to do the same as in Android 5.0(Lollipop) version two native classes are introduced which are used to create an vector graphic image in android. These are,

  1. Vector Drawable
  2. Animated Vector Drawable.

You have also learned that how to make an vector graphic image by using both the classes. You have also seen that how to add backward compatibility in your application.
The source code is available on the GitHub you just go through that and if you have any kind of doubt then kindly mention in the comment box.
Learn to develop android apps by joining acadgild.com for best courses & certifications in Android App Development.
 

Tags

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close