This tutorial describes what Android 9 patch images are, how to make them, and how to use 9 Patch images in Android applications.
What is a 9 Patch Image?
A 9 patch image is an image that has stretchable areas defined.
These areas are defined in a special 1 pixel wide border around the area. Add black pixels to the top and left of this border to describe where the image can be stretched horizontally and vertically.
Why Use 9 Patch Images?
Nine patch images are especially useful when designing buttons. Custom drawn buttons can look distorted and pixelated when their borders are stretched in addition to the rest of the image.
Creating 9 Patch Images
Making a 9 Patch image is a fairly easy process. Included as part of the Android SDK is a Draw 9 Patch utility. Navigate to the folder where you installed the SDK. From there navigate to the tools folder. Inside this folder will be the draw 9 patch program. On Windows, double click on draw9patch.bat
Once the Draw 9 Patch program has started, simply drag an image that you would like to edit onto the program.
After an image has been loaded into the Draw 9-Patch program two panes of information will appear. The left pane is used to edit the patches. The right pane shows what the image will look like when it is stretched in a couple of different ways.
You can think of the Draw 9 Patch program as a simple image editor, but you can only change the 1 pixel border and you can only use the color black.
Draw along the top of the image to define the area that can be stretched horizontally. Draw along the left side of the image to define the area that can be stretched vertically. Draw along the bottom and the right of the image to define the padding. Holding down shift and clicking will erase pixels.
If you have the "Show Patches" option selected, then the stretchable area will be highlighted in pink.
Your nine patch images must be saved with the .9.png file extension in order for Android to recognize and handle them properly. Failure to do so may result in unpredictable results.
When you save from the Draw 9-Patch program it will have the proper extension.
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.
Here are some examples
Spinner button
Article header image
Header background
Search EditText
What is a 9 Patch Image?
These areas are defined in a special 1 pixel wide border around the area. Add black pixels to the top and left of this border to describe where the image can be stretched horizontally and vertically.
Why Use 9 Patch Images?
Creating 9 Patch Images
Once the Draw 9 Patch program has started, simply drag an image that you would like to edit onto the program.
After an image has been loaded into the Draw 9-Patch program two panes of information will appear. The left pane is used to edit the patches. The right pane shows what the image will look like when it is stretched in a couple of different ways.
Drawing the Patches
You can think of the Draw 9 Patch program as a simple image editor, but you can only change the 1 pixel border and you can only use the color black.
Draw along the top of the image to define the area that can be stretched horizontally. Draw along the left side of the image to define the area that can be stretched vertically. Draw along the bottom and the right of the image to define the padding. Holding down shift and clicking will erase pixels.
.9.png File Extension
Your nine patch images must be saved with the .9.png file extension in order for Android to recognize and handle them properly. Failure to do so may result in unpredictable results.
When you save from the Draw 9-Patch program it will have the proper extension.
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.
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.
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.
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.
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.
Header background 2
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.
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.
No comments:
Post a Comment