Friday

Draw 9-patch Tutorial in android

Introduction

The Draw 9-patch tool allows you to easily create a NinePatch graphic using a WYSIWYG editor.

For an introduction to Nine-patch graphics and how they work, please read the section about Nine-patch in the 2D Graphics document at Android Developers site.

Basic 9Patch drawing in android

Here's a quick guide to create a Nine-patch graphic using the Draw 9-patch tool. You'll need the PNG image with which you'd like to create a NinePatch.

The Draw 9-patch tool allows you to easily create a NinePatch graphic using a WYSIWYG editor.
We will try to explain the basic and advanced techniques to use this usefull tool.

Basic 9Patch drawing in android

Here's a quick guide to create a Nine-patch graphic using the Draw 9-patch tool. You'll need the PNG image with which you'd like to create a NinePatch.

From a terminal, launch the draw9patch application from your SDK /tools directory.
Drag your PNG image into the Draw 9-patch window (or File > Open 9-patch... to locate the file). Your workspace will now open.The left pane is your drawing area, in which you can edit the lines for the stretchable patches and content area. The right pane is the preview area, where you can preview your graphic when stretched.
Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase previously drawn lines.
When done, select File > Save 9-patch...Your image will be saved with the .9.png file name.

Note: A normal PNG file (*.png) will be loaded with an empty one-pixel border added around the image, in which you can draw the stretchable patches and content area. A previously saved 9-patch file (*.9.png) will be loaded as-is, with no drawing area added, because it already exists.

Optional controls include:

Zoom: Adjust the zoom level of the graphic in the drawing area.
Patch scale: Adjust the scale of the images in the preview area.
Show lock: Visualize the non-drawable area of the graphic on mouse-over.
Show patches: Preview the stretchable patches in the drawing area (pink is a stretchable patch).
Show content: Highlight the content area in the preview images (purple is the area in which content is allowed).
Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched. Visual coherence of your stretched image will be maintained if you eliminate all bad patches.

Advanced 9Patch drawing in android

Drawing 9patch can turn into a nightmare easily. I would like to present the other side too. The most common problem, to create draws wich are look well in portrait mode and landscape mode too.

You can download the examples at the end of this article.

Here are some 9patch technics:

Example One: Simple button

This is a just simple button, with a glowing effect. The 9patching wich I use here, keeps the button’s edges, so it keeps the rounded rectangle’s radius too. With 9patch, the content area of the button can be set easily.

Exapmle Two: Spinner button

This is a chooser button, with the same glowing effect. With this 9patching, the dropdown arrow keeps it’s size at horizontal stretching. The glowing effect stays in the middle of the button.

Example Three: Article header image

In this case, I use an extra transparent line before and below the image. The 9patch stretches this lines out. The picture always align to the right top corner of the layout. This can be a spectacular articleheader background.

Example Four: Header background

Like at web pages, larger background images can created easily from a tiny picture. This 9patch stretches the middle of the image, so it’s look like continuous. The lenght of the layout doesn’t matter. For example, this is useful when creating menu bars.

Example Five: Header background 2

In this example, I use the last column of the image, for horizontal stretch. This must be a single-color column. The image starts at the left side of the layout, in any cases, and fill the end with the single-color.

Example Six: Search EditText

You can create your own, horizontal stretch - independent EditText with 9patching. Take care of setting the content area of the image, see it below.