9patch – Android

In one of my recent assignment I was asked to create the 9 patched assets, and that’s when I start collecting more information regarding the same. And just thought of sharing the same here…

Due to the multitude of devices and resolutions, certain assets need to be draw9patched. Draw9patching, or 9-slicing is the action of selecting certain portions of a PNG that will be allowed to stretch and expand, leaving the rest of the image intact. You should create draw-9patched assets if they are solid colored, such as a button or tab, or if they are on a transparency, such as an icon. You should never attempt to draw9patch a complex image, such as one that contains effects or one that has a rich gradient, as the complexity of the image will certainly be compromised.

The program used to draw9patch can be obtained by downloading the Android SDK from their developer website at http://developer.Android.com/sdk/index.html Draw9patching takes some experimentation.

To get started, open draw9patch.bat from tools and drag the PNG into the work area.

Slider – The slider will zoom into your main work space.
Show Lock – will display the nondrawable area of the graphic on mouse over.
Show Content – This will highlight the content area in the preview images.
Patch Scale – will display how your image looks at different scales.
Show Patches – will show you the stretchable patches in your main work space.

When you drag your image into draw9patch, it will create a 1-pixel border around your image. This pixel space will be the area in which you draw your patches.

A – Click your mouse on the top and left side to choose the areas that will be stretchable. In this image everything inside the green box will remain untouched regardless of the dimension of the device and only the frame itself will stretch. Left click the stretch pins to erase

B – Click and drag your mouse on the right and bottom side to select the area of the image that will be affected by the draw9patching.

This takes a good amount of experimentation to do right. And unfortunately, even if you think it looks perfect, it will very likely take a couple rounds of conversation with the developer to get the asset right.

When you save your PNG the file type will change to a 9.PNG. This is the is deliverable file.

Gist from http://developer.android.com/guide/topics/graphics/2d-graphics.html

A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. An example use of a NinePatch is the backgrounds used by standard Android buttons — buttons must stretch to accommodate strings of various lengths. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension .9.png, and saved into the res/drawable/ directory of your project.

The border is used to define the stretchable and static areas of the image. You indicate a stretchable section by drawing one (or more) 1-pixel-wide black line(s) in the left and top part of the border (the other border pixels should be fully transparent or white). You can have as many stretchable sections as you want: their relative size stays the same, so the largest sections always remain the largest.

You can also define an optional drawable section of the image (effectively, the padding lines) by drawing a line on the right and bottom lines. If a View object sets the NinePatch as its background and then specifies the View’s text, it will stretch itself so that all the text fits inside only the area designated by the right and bottom lines (if included). If the padding lines are not included, Android uses the left and top lines to define this drawable area.

To clarify the difference between the different lines, the left and top lines define which pixels of the image are allowed to be replicated in order to stretch the image. The bottom and right lines define the relative area within the image that the contents of the View are allowed to lie within.

Here is a sample NinePatch file used to define a button:

This NinePatch defines one stretchable area with the left and top lines and the drawable area with the bottom and right lines. In the top image, the dotted grey lines identify the regions of the image that will be replicated in order to stretch the image. The pink rectangle in the bottom image identifies the region in which the contents of the View are allowed. If the contents don’t fit in this region, then the image will be stretched so that they do.

The Draw 9-patch tool offers an extremely handy way to create your NinePatch images, using a WYSIWYG graphics editor. It even raises warnings if the region you’ve defined for the stretchable area is at risk of producing drawing artifacts as a result of the pixel replication

Video on Youtube


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s