Using vector graphics on Android

When talking about Android screens layout, image assets are a pretty important part. You may have it for buttons or even for illustrate something on a screen. Using the right images can make the experience of your user much better.

But one aspect of Android that you have pay attention when adding images to your project, is that it will run on a large set of devices with different screen sizes and the images that you add to it, should look good on each of those screens.

When using jpgs and pngs, what you can do is create assets with different sizes for each screen density. You have to just put the images in the right folders and Android takes care of the rest. This works, however the down size is that the final size of your apk will increase and this is definitely something that you should avoid.

Well, one good solution for this is using vectors. Vectors are files that instead of being composed of grids of pixels, it brings the information about the illustration like the paths that forms it, the colors, margins, etc. It’s like a recipe of how to draw it and the computer does the job. The bigger advantage of this is that it is easy to resize or even recolor it every time needed. In Android you can use this type of graphic and it is really easy. To open the Cofigure Vector Asset, go to File > New > Vector Asset. The following screen will show up:

You have two options to use vectors. The Vector Asset Studio, already offer a huge library of ready to use icons with pretty much all the commonly used icons for Android screens.

You can just choose one from the list, define a name, choose the color and size and opacity and that's it! Other option that you have is using your own custom icon from a svg or psd file to import it and transform it into a xml file.

After that you can just add it as a background of the view that you want and it will work just like a normal image asset, easy just like that!

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@drawable/ic_android_black_24dp"/>

Well that is it for today! Hope it is useful. If you wanna learn a little bit more about decreasing the final size of your apk, you can find more info on this link: https://developer.android.com/topic/performance/reduce-apk-size

See ya!! ;)