With new android devices coming out every day it is difficult to make sure that your images look best on any screen. To achieve this goal you and your graphic designer have to do a hell of a work to generate and maintain your drawables for the various screen sizes.
Have you ever thought to automate this work?
If you don’t know already that Android Studio can do it for you, then you should probably keep reading this post.
Luckily for us, Google is putting a lot of effort in improving our development tools, and with the release of Android Studio v1.4 they have also published a very interesting addition, named Vector Asset Studio.
This tool allows you to import your SVG files or to use some pre-loaded icons from the Material Design collection in order to generate Vector Drawables.
Ok, wait a moment. How Vector Drawable can help me to automate my graphics? You may be asking…
VectorDrawable is a class introduced with android version 5.0 (Lollipop), which inherits from Drawable, and which allows you to specify your graphic in XML code via the SVG format (Scalable Vector Graphics). According to this format, you can define an image as a set of two-dimensional geometric elements, like points, lines, curves, and associated colors. A Bitmap instead, defines an image as a set of pixels on a prefixed grid. As consequences, scaling up or down a bitmap result in blurring, and we have to upload different sizes of the same image to support multiple screen. With VectorDrawable instead, the Vector Asset Studio can automatically scale up or down your images for all screen sizes, without losing quality and without blurring your images.
Isn’t that cool?
Ok, lets see how it work with a quick example. The steps to follow are:
-
- Right click on the “drawable” folder, New -> Vector Asset;
-
- Select “Material Icon”;
-
- Click “Choose”;
-
- Select an Icon from the library,
- “Ok”, “Next”, “Finish”
There you have a new drawable. Now if you build your project, and if your minSdKVersion < 21, then the png files for all screen sizes are automatically generated (see app/build/generated/res/pngs)
Otherwise, if your minSdkVersion is >= 21 (lollipop up), then the Vector Drawable are already supported and no other asset will be generated.
So this was a quick example of how to generate material icons vector drawable. However, if your graphic designer provide you with an svg file, then you can also import it in the Vector Asset Studio after step 1 above.
As suggestion, for who of you who still want to create their own icons but don’t have any Photoshop skills, then be aware that there are plenty of tool online, like this,
or Google Drive -> New Drawable, which allows to export your drawing in the svg format. Note that you can’t immediately import those file in the Vector Asset Studio because some tags are not yet supported, however you can convert them with Inloop and then try to import them. For my experience it is usually needed to do some further manual optimization, like removing tags which are not supported/needed in android, but it all depend from how much complicated is your image.
To conclude, the Vector Asset Studio is already a very good instrument:
- to help you supporting multiple screens,
- to cope with image scalability,
- image maintenance
- and apk size.
However, if the material icons are not enough for you, then you need a svg file first.
Moreover, be aware that at the moment Vector Drawable may affect your app performance when the images are first loaded if they have very complicated geometrics or if their size is above 200x200dp, at least according to what google says. I personally haven’t run into those issues yet.
As footnote, for whoever is into animations, then is good to know that together with VectorDrawable, also Animated Vector Drawable were introduced. So if you were used to create animation with a lot of pngs, then stop doing it and try to see if you can achieve a better effect with Animated Vector Drawable. Probably I am going to write a follow-up post about this, for now have a look at the documentation and stay tuned!