When developing for Android, many resolutions may be needed (or required) to take advantage of the screen of the device on which the application is running.
The GIMP plugin for Android helps with standard and 9-patch pixel density resolution independence by handling scaling issues sufficiently for most application purposes.
9-patch is an ingenious means of marking elastic and content zones of a normal PNG using a 1-pixel wide transparent border. Unfortunately, this border may only be 1 pixel wide regardless of the size of the image, and therefore cannot be included in an image before scaling.
The GIMP plugin allows annotation of a GIMP-native RGBA image using two layers for the elastic and content regions. The layers must be created by using the Prepare 9-patch menu option from this plugin. They are fully transparent, semi-opaque layers into which the content and elastic regions sholud be defined by non-transparent rectangles on their respective layers.
The rectangles will properly scale with the image, allowing a single source image to be used to make fully-compliant 9-patch images in several resolutions.
In the normal 9-patch, the elastic region of an image is defined by the non-transparent stripes on the left and top border of the image. When the image is used in resources, the elastic region will be allowed to stretch to make the image fit any area larger than its original self.
The layer created by Prepare 9-patch is called 9-elastic. Fill a
non-transparent rectangle somewhere over the image (in the 9-elastic
layer). The horizontal and vertical elastic regions are defined by
this rectangle.
In the normal 9-patch, the content region of an image is defined by
the intersection of stripes extending from the non-transparent pixels
on the bottom and right borders of the image. When the image is used
as a background drawable, the padding of the contents is adjusted to
ensure that the non-content area of the image is visible outside the
content of the View for which the image is the background.
The layer created by this plugin's Prepare 9-patch is called
9-content. Fill a non-transparent rectangle in this layer that
overlays the desired content area of the image.
This plugin uses the X and Y resolution -- not pixel density,
rather the second set of numbers in the "Scale Image" dialog -- to
determine how to scale the image into the density-specific project
folders:
drawable-mdpiat a resolution of 160drawable-hdpiat a resolution of 240drawable-xhdpiat a resolution of 320
I recommend using a resolution of 960 for all images. 960 is the least common multiple of all three resolutions, and therefore scales without needing antialiasing of any kind.
All menu items presented by this plugin are under the /Image/Android
menu.
Prepare 9-patch
Prepares an image for 9-patch (resolution independent) annotation by adding the content and elastic layers.
Render 9-patch
Render an 9-patch (resolution independent) annotated image directly to a 9-patch, without further scaling. This will add the 1-pixel border, draw the non-transparent strips along this border representing the opaque area of the elastic and content layers, and finally hide the annotation layers themselves.
Save to project
Prompts for a project to which to save the images; uses the basename of the current image's filename, scales and saves PNG each of the
res/drawable-*/$basename.png. If the image has 9-patch annotation layers, then it is instead saved tores/drawable-*/$basename.9.pngafter the 9-patch has been rendered at each resolution.