How to...

Create Android drawables and buttons

Android drawables (icons) need to be drawn in multiple sizes for multiple screen resolutions. Android 9-patch buttons need to have fixed and expandable parts defined so they can be properly scaled. This tutorial will explain how to design an Android drawable or button with Greenfish Icon Editor Pro.

The standard resolutions defined by Android are:

Converting an existing image to an Android drawable

  1. Open your existing image file.
  2. Should it have multiple pages, select the page you want to create the new drawable from.
  3. Choose the menu item Icon|Create Android drawable from image.
  4. Put a check in the boxes corresponding to the resolutions you want to create.
  5. Set the identifier you want to assign to this Android drawable. This should be a valid Java identifier.
  6. Set the DPI for the source file. Essentially this is what controls how big the resulting drawable will be.
  7. Click OK.

The resulting document will be a multipage document with the following properties:

Tip: Always save the resulting document as a .gfie file somewhere, to preserve all information.

Tip: Start designing your drawable prototype in a very big size before choosing Icon|Create Android drawable from image. Keep in mind that lowering the resolution is always an option.

Exporting an Android drawable

After you have created and edited the drawable, you can export it to the resources folder of your Android project. Choose File|Export Android drawable to do this.

The pages will be saved to the corresponding subfolder (drawable-ldpi, drawable-mdpi, etc.). The saved files will have the name [title].png, where [title] equals to the document title. The document title can be set in the document metadata dialog box (see File|Metadata).

Creating and testing an Android button

Android buttons have nine-patch images as backgrounds. A nine-patch image is a regular image with an extra two-color border. This border encodes how the image will be scaled up. Black pixels of the border mark the expandable parts, while the remaining pixels mark the fixed parts of the image. See Samples/ninepatch.gfie for an example 9-patch image.

You can draw a 9-patch button as a normal image in GFIE, by drawing the image and adding a 1-pixel wide frame of the above format. Then choose Icon|Test and select the 9-Patch tab to view multiple buttons at randomly generated positions.