Making the Most of Android Vector Drawables

A couple of months ago I was at an event where an app we developed was being piloted to the attendants of the event. I worked on the Android App for that event, and I really enjoyed using most of the features which were introduced to Android Studio version 2. The new features not only made developing an app easier but the complete product was quite satisfactory, resulting in an APK of 3 mb being uploaded on Google Play. That was the smallest size for an Android app I ever worked on! But I was crushed when I had to watch someone struggle to download the app because they had ran out of memory on their devices internal memory! That scene struck a low blow because Dololo has a 17 mb APK on Google Play. It had me asking one simple question: Will people be willing to delete space hogging apps like Facebook just to install some of the apps that we work on as e-regardless? I don’t think they will. So I set out to use Android Vector Drawables to reduce the size which images in Dololo contribute to the final APK in hopes of making the job of whoever has to free up space to install the app a little easier.

If you have developed an android app before you would now that you pretty much have to provide images of different resolutions to accommodate devices of different screen densities. Android Vector Drawables negate this by moving away from the raster representation of images to the vector representations of images. One of the benefits of Vector representations is that they don’t pixelate when stretched to sizes which are bigger then the resolution it was created for like we would get in raster images (jpegs, gifs, and pngs). If you do know your vector representations you would also know that the SVG format is one of the mostly used format in the world right now. SVG is also the format Android Vector Drawables inherits most of it’s specifications from. Pruning away at the other specifications in SVG which Android considers bulky.

 

How will I achieve the feat of getting my PNG images from Dololo to be vector drawables?
This knowledge on vector drawables got me thinking… How will I achieve the feat of getting my already PNG format images used in the app to be vector drawables? How about through intermediary conversions?

 

In my pursuit I basically planned to convert my PNG images into SVG images, and then take the SVG images and rebirth them as Vector Drawables. Getting the PNGs to SVG format would require me to use any one of the many online tools that work with these conversions.

 

To convert my PNG into a SVG file I would alternate between Convert.io and online-convert.com depending on which one gave me the best results. They should have similar results for the simpler rage comics that are basically black and white images. But I came to realize that Rage comics with complex sketches or ones that depend on shading will effectively get a lot more varying results from these online converters so I had to settle on converting using both sites and then picking the best result for each PNG I had to work with.

 

Me when I reliezed that complex rage comics like this one required me to survey multiple tools until I found one that works great for this specific meme. :(
Me when I reliezed that complex rage comics like this one required me to survey multiple tools until I found one that works great for this specific meme. 🙁

 

Most of the Time Convert.IO produced the most satisfactory results but other times online-convert.com did the trick. Either way I was a happy man… who only had to worry about code that looked like this:

 

svg
boss.svg

 

SVG… SVG… how beautiful is the? Converting from this to android vector drawable is made easy due to another online tool, which does what it does on the client code! How great are the javascript skills of Juraj Novák? Because of his work the above boss.svg ended as the below boss.xml.

 

xml
boss.xml

 

Done! Everything works!


Hopefully I will get to play around with the other ways to produce a small APK which were presented at years Google I/O 2016.

1
Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail