Ant Build Script for Android Icons

I have been working on two small Android apps recently.  I did not want to manually create the icons since I do not have a lot of graphics design experience.  Because the icons are simple and do not need to be particularly original, I decided to build my icons mostly out of open source icons.  Because I was going to release the source code for my apps anyway, I ended up using icons from Wikimedia Commons that were released under the GPL license.

I wanted to automate this process as much as possible, so I created Ant build scripts.  I thought I would share the build scripts here.  I am sure that most Android icons are created manually using graphic design tools, but I still think build scripts would be useful for certain tasks.  For example, developers need to provide several duplicate launcher icons of different sizes (there are websites which provide this automated resizing functionality).  Also, it is recommended that you optimize your icons to make them smaller before packaging.

Although I am writing about Android icons, these build scripts could also be used for other types of icons: Windows ICO files or Linux SVG icons.  In fact, one of the build scripts I made does create these icons (see first icon below).

I still had to do a lot of manual editing.  Fortunately the original icons were in the SVG format, which uses vector graphics encoded in XML, so I was able to edit them using a text editor.  I also had to use a lot of trial and error with the build scripts to get everything sized and arranged properly.

The build scripts are designed to run using Apache Ant on Ubuntu Linux, and require the following tools to be installed:

• ImageMagick
• Inkscape
• OptiPNG

If your source graphics are vector SVG files, you can edit them directly using a text editor (I am sure there are dedicated tools for editing them as well).  If you want to manipulate them using ImageMagick, you will need to rasterize them first, which will result in a loss of quality.  The SVG files can be easy to work with since they are basically scripts for drawing an image.

The exact build process will vary widely depending on your circumstances, but the general flow I used is as follows:

1. Convert the SVG files into raster/bitmap files (using Inkscape).
2. Draw any required graphics (using ImageMagick).
3. Crop/resize the graphics file as required (using ImageMagick).
4. Compose the graphics into a final icon (using ImageMagick).  Since the final image is a bitmap, make it at least as large as the largest size you need.  In other words, you always want to scale the image smaller when you resize it – scaling it larger will result in a loss of detail.  Make sure launcher icons have a transparent background.
5. Resize the icon into the various required sizes (using ImageMagick).
6. For the feature graphic, I used the launcher icon, but resized it (it uses a different aspect ratio than the launcher icons) and filled it in with a white background (using ImageMagick).
7. Optimize the final icons that will be packaged with the app (using OptiPNG).
8. The resulting icons can be placed directly into the Android folder hierarchy.

Some side notes for non-Android icons:

• Windows ICO files contain multiple copies of the icon image at various sizes.  The ICO file can be generated using ImageMagick (see the first icon’s build script).
• The version of Linux I use (Ubuntu 12.04) uses SVG files for icons.  Since these use vector graphics, there is no need to perform many (or any) of the build steps if you use SVG as your source graphics – this is because many of the build steps involve working with bitmap files.  I am not familiar with all the types of Linux icons – I am sure there are other types besides SVG depending on your distribution and window manager.

When the scripts are run, all tasks are re-run even if dependencies have not changed.  It would be possible to only regenerate artifacts that are out of date, but I did not feel it was worth the effort in my case.

First Icon

Final icon created by build script:

This icon is basically the composite of two original icons.  I manually edited the arrow SVG file to remove its shadow and get this result.  I then manually added the arrow to the globe icon.  The build script was only used to rasterize the icon and perform cropping, resizing, etc..

Note that this build script also creates an ICO file (for Windows) and an SVG file (for Linux), which are there for future use.

The build resources can be viewed here:

• Build folder (includes a README, the build script, and the original icons)
• Build script

Second Icon

Final icon created by build script:

This icon was a little more complex than the first.  The green “share” logo was drawn using ImageMagick and then overlaid onto the “document” icon.  I manually edited the document icon to remove the wrench and get this result.

The build resources can be viewed here:

• Build folder (includes a README, the build script, and the original icons)
• Build script