Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating Easy Launcher Icons from OpenClipArt.org Using Paint.NET

Author: Daniel Fowler
Published? true
FormatLanguage: WikiFormat

Problem:

A good icon for an App is important. It helps set an App apart from others and is a must for an App to appear professional.

Solution:

Developers sometimes struggle to produce good graphics, such as icons, fortunately a good source of free graphics that can be adapted for icons is available.

Discussion:

When an App is close to being finished consideration needs to be given to the tasks to get it ready for release, or distribution on Google Play. One of those tasks is to provide a good icon. The icon will usually be the most common graphical representation of the App that a user encounters. It will represent the App on the device screen as a shortcut (and in the running Apps list in Settings). A good icon helps the initial impression of the App, getting it to stand out from the crowd. Developers with access to a graphical artist, either professionally or through friends, or are good artists themselves will have finer control on the graphics within their Application. However, there are many who find that doing the graphics in an App is a chore. This recipe shows how to generate a good icon quickly.

Android Studio comes with the Image Asset utility. This is good for creating basic images at various densities, including launcher icons. With the app folder highlighted in Studio use the New menu option (via File) and select Image Asset to run the utility.

For a more complex icon a good source of free images is the Open Clip Art Library. The graphics provided are in vector format which make them great for scaling to icon size. Icons are a raster format so once a suitable graphic has been chosen it needs to be converted into the Android icon format which is Portable Network Graphics (PNG).

Find a suitable free graphic as a starting point. Go to [1] and use the Search box. The search results may include graphics that do not always appear logical. This is because the search not only includes the name of the graphic, but also tags and descriptions, and partial words; therefore graphics unrelated to the major search term will appear. As well as contributions with misspellings or named in a different language. However, this also means that occasionally an unexpected but suitable graphic will be found. Page through the search results which are provided as thumbnails with title, contributor and date of submission, and number of downloads. When looking for a graphic to use as an icon there are some pointers to keep in mind:

  • There is an Android Design web site which has a section on icons at [2].
  • Other icon guidelines are at [3].
  • The graphic will be scaled down dramatically, so not too much detail, the search thumbnail itself is a good indicator.
  • Clear and simple designs with smooth lines and bright, neutral colors will scale well and look good on a device screen.
  • Icons are square, so look for an image that if bounded by a square it would fill most of that square.

Here, for the search term earth, the graphic titled A simple globe was chosen (several pages into the search results). Click on the graphic to bring up its details. The graphic can be saved to the local machine by clicking the download button. This will save the file as a vector file, SVG, no good as an icon. Fortunately the images's Open Clip Art page also has an option to obtain the file as a PNG file.

Android icons need to be provided in five different sizes (six to support older devices). These different sizes are to allow Android to display the best possible icon for a device's screen density. It is recommended that an App supplies all the size icons required. This prevents poor icons being displayed on some devices. The icon sizes are as follows (note the dpi value is approximate):

  • 36 by 36 pixels (optional) for low density displays (120 dpi)
  • 48 by 48 pixels for medium density displays (160 dpi)
  • 72 by 72 pixels for high density displays (240 dpi)
  • 96 by 96 pixels for extra high density displays (320 dpi)
  • 144 by 144 pixels for extra extra high density displays (480 dpi)
  • 192 by 192 pixels for extra extra extra high density displays (640 dpi)

There is also a border to take into consideration, the border area allows for spacing and image overrun and is recommended to be one twelfth of the icon width.

This means that the practical image size for the icon graphic is smaller than the stated icon size.

  • 30 by 30 pixels for low density
  • 40 by 40 pixels for medium density
  • 60 by 60 pixels for high density
  • 80 by 80 pixels for extra high density
  • 120 by 120 pixels for extra extra high density
  • 160 by 160 pixels for extra extra extra high density

On the Open Clip Art page for the required graphic we can use the PNG button to obtain a graphic in the image sizes required. In the box next to the PNG button type in the image size required. E.g. 80 (for the extra high density icon). We cannot put in the icon size, 96, because that would not leave any border, which is added later.

Click the PNG button to save the generated file. Refresh the web page (F5 on most browsers). This clears the box next to the PNG button ready to enter the size of the next graphic required, e.g. 60 for the high density icon. The page is refreshed instead of deleting the value because an issue causes an identical file to be generated. Do the same to generate all the icon graphics without their borders.

There will files be files containing the same image at different resolutions. The graphics files may not be perfectly square, for example 39 by 40 instead of 40 by 40, that will be rectified when the border is added. The border is added in a graphics application, such as GIMP ([4]) or Paint.NET ([5] - Windows only). E.g. in Paint.NET open the first graphics file. First the secondary (background) color needs to be set to transparency. This is done with the Colors dialog (F8 or Colors toolbar icon). On the Colors dialog ensure that Secondary is selected in the drop down, then click the More button to see the advanced options. Set the Opacity - Alpha option in the bottom right of the Colors dialog to zero.

Next open the Canvas Size dialog by using the Image menu option and selecting Canvas Size (or press Ctrl-Shift-R). Select the By absolute size radio button, clear the Maintain aspect ratio check box. In the Pixel size options set the correct Width and Height for the icon for the given graphic; set both 36 for the 30 by 30 graphic, both 48 for the 40 by 40 graphic, both 72 for the 60 by 60, etc. to both 192 for the 160 by 160. Set the Anchor option to middle. Select OK.

Save the resized image and repeat for the other graphics to finish up with all the PNG icon files required.

With a project open in Studio, under the res folder there will exist some mipmap folders for the launcher icon. Copy the new PNG files as ic_launcher.png into the correct density folder, creating the required folder under res if needed:

Icon Formatting Summary
Folder Icon Size Image Size dpi Android Density Example Screen
mipmap-ldpi 36x36 30x30 120 ldpi small QVGA
mipmap-mdpi 48x48 40x40 160 mdpi normal HVGA (default)
mipmap-hdpi 72x72 60x60 240 hdpi normal WVGA800
mipmap-xhdpi 96x96 80x80 320 xhdpi WXGA720
mipmap-xxhdpi 144x144 120x120 480 xxhdpi Nexus 5
mipmap-xxxhdpi 192x192 160x160 640 xxxhdpi Nexus 6

The AndroidManifest.xml file references the icon file, the application element has the attribute android:icon="@mipmap/ic_launcher".

The icon file does not need to be called ic_launcher.png. As long as all the file names in all the mipmap folders are valid and the same they can be named something else. For example the icon files could be called globe.png. If the file name is changed then the android:icon attribute will also need changing, ic_launcher to globe.

Download:

The source code for this project can be downloaded from http://tekeye.uk/free_resources/android/launcher_icons/globeicon.zip.
No records found.