Intive Blog

4 tools to create graphic resources on Android

One of the most challenging tasks I face as an Android application developer is creating graphic resources for different screen settings.

recursos-graficos-android---apps
In the wide offer of devices with this technology, we find all kinds of screens, which vary both in physical space and in resolution. The last data available on Dashboards (the reference page where Google reports the present ecosystem status) provides us with stats to know what the priorities are when having to develop:

Sin título

 

Sometimes, depending on the project and the target audience of our application, it is possible to reduce the amount of “buckets” or settings for which we are creating graphic resources, but the usual thing is to have at least three or four versions of the images. If we are lucky enough to work with a devoted graphic designer who manages these specialized tools, the problem is solved. But if we do not have that, these are four tools to generate graphic resources on Android, which can make developers’ lives easier:

1 – Android Asset Studio
Android Asset Studio is an online tool created by Roman Nurik, developer and designer for Google, including a 9-patch image editor (which will be covered in-depth on a future article) and several tools to create different types of icons for our application.

AndroidAssetStudioHome
Through this tool you can generate the resources for the correct sizes for the launching icons of the application, including new “shorcuts” which are added to Android Nougat, the icons for notifications which are shown on the Status Bar and for the Action Bar or Tool Bar. There is also a more open alternative to create icons in general.

In all cases, we can build the resources based on any of the following options:

a. Use a proprietary image
b. Choose an Material-style icon from the Clipart palette. 
c. Write a short text. This last option makes any of the fonts on Google Fonts available.

Once the font for our icon is selected, we can modify it with options that vary depending on the type chosen, but those may include: padding, size and color.

AndroidAssetStudioIconPalette
Besides, Android Asset Studio includes a “preview” version of an editor for animated icons, which allows us to create simple animations based on vector images. Once the image is created, the XML file can be exported to be used as Vector Drawable or as Animated Vector Drawable, two very interesting options available as from Android API version 21 (Lollipop).

2 – Android Studio
Android Studio includes two simple assistants to create graphic resources: one for icons and another for vector “drawables”.

Option 1) For icons
The option to create icons is very similar to the one of Android Asset Studio, although it only features three types of icons: launching, for the Action Bar and for notifications.
If we are creating an application that has to support older Android versions, this assistant boasts and advantage in the case of notification icons: it produces the files with different styles and colors for older versions of the operating system, while Android Asset Studio only generates icons from Android Honeycomb on.

AndroidStudioNotificationIcons

Option 2) For Vector Drawables
The assistant for Vector Drawables imports an .svg or .psd file, or it also allows us to select a Material Design icon and export it to XML format.

AndroidStudioVectorDrawable

3 – Android Drawable Importer
Android Drawable Importer is an excellent plugin for Android Studio which features several options when generating resources.

Option 1) Icon Pack Drawable Importer
“Icon Pack Drawable Importer” allows us to select an icon, be it Material or from previous styles, and generate resources for determined 4D icons (dp measures) in black and white.

Option 2) Vector Drawable Importer
In this case, you can only choose a Material icon and the result will be an XML file to use it as Vector Drawable.

But what really makes this plugin come out of the pack compared to the previous tools is two other options we will develop here:

Option 3) Batch Drawable Import
This alternative allows us to select several images and process them as a lot to generate the necessary resources. For each image, the plugin allows us to indicate the original “bucket” of the image, the destination settings and the type of algorithm for the reductions and expansions desired.

AndroidStudioPluginBatch
Option 4) Multisource-Drawable
This option is ideal if we have the image in different sizes but each version has a different name, or does not have a correct directory structure. This is very commonplace when Android developers “inherit” resources generated for iOS, and we receive files with the aggregated “@2x” and “@3x”. This tool allows us to select the images we want to use for each density, and export them with the correct name and structure.

AndroidStudioPluginMulti

4 – gimp-android-xdpi
The plugin for GIMO gimp-android-xdpi is an Open Source tool that allows us to open an image with the editor and export different versions directly to the folder “res” of the Android project.

Besides selecting the destinations settings, this GIMP plugin allows us to export the image in the directory structure “drawable” or “mipmap” (the latter is recommended for launching icons), and also if you want to obtain .gif, .png or .jpg files. As opposed to the previous tools, this plugin allows us to select the destination width measured in pixels independently from density (“dp”), which enables to optimize the final size of the resulting files.

GIMPPlugin
This tool does not generate resources for which the image should be expanded. If the combination of the original size and the destination size are not feasible it displays and error message within the GIMP.

A personal note to conclude

Four tools, with similarities and differences, which speed up the creation of graphic resources to develop Android applications have been described on this article.

Personally, my favorite is the GMIP plugin, since I can combine the possibility of selecting measures in “dp” with AngryTools to calculate equivalencies and achieve great-looking results without taking up extra space on the final apk.

However, each of these methods may come in handy on different occasions, and I always keep all of them in my “toolbox”. Do you happen to know any other option? Do not hesitate to share it on the comments!

 

Marina Cuello

Marina Cuello is Senior Android Developer at  intive. Graduated as an Analyst in Information Systems at Universidad Nacional de la Matanza, she also studied in the program “Virtual University” in Social Sciences and Humanities of Universidad Nacional de Quilmes. In her free time, Marina writes children’s and juvenile literature, makes rag dolls and plays a little bit of everything (video games and board games, too) with her son, her boyfriend and friends.

Add comment