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

Using Inkscape to Create an Android Launcher Icon

Author: Daniel Fowler -- Published? true -- FormatLanguage: W

Problem:

Every good Android App deserves a custom launcher icon.

Solution:

Inkscape is a free and feature rich graphics program, it supports exporting to a bitmap file; this can be used to create the different size icons needed for an App.

Discussion:

A graphics program is used to design graphical resources used in an Android application (App). Inkscape is a free multiplatform graphics program and has some very powerful features. It can be used to generate vector graphic images to a high standard. These images can then be exported to any required resolution. This is ideal for generating Android launcher icons (and other graphical resources). See the Inkscape web site at [1] for more information on the program and to download the latest version.

When a project is created in Android Studio default launcher icons are generated in the mipmap folders. Icons are stored in the Portable Network Graphics (PNG) file format. Ideally for best results (sharp images with no pixelation) a project will include an icon for all the possible screen densities that an App will encounter. To do this icon files of the correct size are placed into the mipmap folders:

  • 36x36 pixel icon in res/mipmap-ldpi (optional) for low density screens (approx. 120 dpi)
  • 48x48 pixel icon in res/mipmap-mdpi for medium density screens (approx. 160 dpi)
  • 72x72 pixel icon in res/mipmap-hdpi for high density screens (approx. 240 dpi)
  • 96x96 pixel icon in res/mipmap-xhdpi for extra high density screens (approx. 320 dpi)
  • 144x144 pixel icon in res/mipmap-xxhdpi for extra extra high density screens (approx. 480 dpi)
  • 192x192 pixel icon in res/mipmap-xxxhdpi for extra extra extra high density screens (approx. 640 dpi)

Each icon must include a border around the central image, used for on screen spacing and minor image protrusions. The recommended border is one twelfth of the icon size. This means that the space the actual icon image occupies is smaller than the icon pixel size:

  • 36x36 icon the image size is 30x30 pixels
  • 48x48 icon the image size is 40x40 pixels
  • 72x72 icon the image size is 60x60 pixels
  • 96x96 icon the image size is 80x80 pixels
  • 144x144 icon the image size is 120x120 pixels
  • 192x192 icon the image size is 160x160 pixels

When designing an icon it is better to work with images that are larger than the required size. A larger image is easier to work with in a graphics package and easily scaled down when completed. An image that is 576x576 pixels is divisible equally by all the icon sizes and is a reasonable size in which to design. For a vector based graphics package, such as Inkscape, the image size is irrelevant; it can be scaled up and down without losing quality. Inkscape uses the open Scalable Vector Graphics (SVG) format. Image detail is only lost when the final bitmap images are produced from the vector image.

Those wanting to learn to design images in Inkscape can use the many tutorials available. There are built in tutorials (via the Help menu) and many online, [2] is a good tutorial reference. Once an image has been designed in Inkscape it can be exported to a PNG file for use as an App icon. In the following example the image that is to be converted to icons was generate from the tutorial at [3]. If the tutorial is followed this cup of coffee image is produced:

This can be converted to an icon for whatever coffee related App is currently in the pipeline. For those who do not want to follow the tutorial the image can be obtain from [4], a great source of free SVG images. Search for coffee and various coffee related images will be shown, including the one here, uploaded by this recipe's author. Click on the image and use Download button to get the cup of coffee image.

The required icon sizes are generated from the image using the Inkscape Export Bitmap option. The image is opened and then correctly proportioned for the export. This can be done for any image designed or opened in Inkscape. Images for icons should not be overly detailed or have too many colors (detail is reduced during resizing), and try to fill a square area. It is worth reading Android Design guidelines at [5] as well as [6].

With the image open resize the document to 576x576 pixels. To do this use the Document Properties option under the File menu. In Custom size set Width and Height to 576 and check Units are set to px (for pixels). Ensure that the Show page border check box is ticked.

Drag two vertical and two horizontal guides from the rulers (click and drag from any part of the page ruler). Drag them inside the outlined image (page) approximately 1/12 of the width and height of the visible border. The accurate position of the guides will be set using the guide properties. If the rulers are not visible use the View->Show/Hide->Rulers menu option to display them. Double click each guide and set the following positions accurately:

Guide x y
Top Horizontal 0 528
Bottom Horizontal 0 48
Left Vertical 48 0
Right Vertical 528 0

With the guides in place the image can be easily adjusted to fit within them. Minor protruding into the border area is allowable if required for image balance. Use the menu Edit->Select All or press Ctrl-A to select all the image, drag the image into position and resize as appropriate to fit within the box outlined by the guides.

With the image created and correctly proportioned the icons for an Android project can be created. In Inkscape ensure that the image is not selected (click outside the image). Use the File-Export PNG Image menu option to bring up the export dialog. Select Page, then under Image Size set Width and Height, see the previous list. The dpi settings do not need to be changed (it will change as Width and Height are changed). Under Filename browse to the project directory for the icon and use the file name ic_launcher.png. (E.g. for the 48x48 icon browse to the res/mipmap-mdpi project folder.) Press the Export button to generate the icon. Do this for all the icon resolutions.

The Application can be tested on physical and virtual devices to ensure the icons appear as expected.

The icon files do not need to be called ic_launcher.png, see the recipe Creating Easy Launcher Icons from OpenClipArt.org Using Paint.NET for information on changing the launcher icon file name.

See Also:

[1]

[2]

[3]

[4]

[5]

[6]

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

No records found.