Brought to you by EB70 and the Simply Galaxy Team

Drag Image to Draw9Patch Tool

With your sdk tools folder open next to your folder containing your images drag the image on top of the draw9patch tool.

9patch Areas Explained

There are four 1 pixel areas on the outside of our image. The top and left control how the image is stretched. The right and bottom control how much of the area can be filled and where. (Note: if you have an image that should be 9.png but isnt because it lacks the 1 pixel area you can open that image with Adobe Fireworks, or any image editing software, and modify the size by adding 2 pixels to vertical and horizontal whichs equals 1 pixel on all sides.)

The Settings
There are really only 2 settings to concern ourselves with, show patches (green and pink below), and show content (purple below) The top slider will zoom in and out on your image and the bottom will zoom in and out on the content images (3 of them.)

What to Do

Starting with the image from before youll notice I removed almost all of the patches from the bottom of our image. On the right you see that the purple area is smaller. This is your content area where buttons and boxes will be placed. The previous image allowed content to be placed anywhere in the image. Our changed image only allows content to be placed in the very center of our image. (To add and remove patches point your cursor at the edge of the image until a small box shows. Click to add a patch and hold shift and click to remove a patch.) Also notice that the stretchable area is only set at the center. This being a square image it allows the whole image to be stretched. More info coming up.

Non-Square Images

Our image here has rounded corners which we want to stay round. To do this we patch the top and left almost to the edge of our image which keeps our corners round.

Odd Shapes
Here we have a typical slider. Notice that there are 2 patches on the left side, this allows the image to be stretched up and down yet keep its round edge. The top patch is NOT centered on the image but rather centered on the square part, this allows the image to be stretched left to right on the straight edge part and our round edge stays with no stretching. In addition, our content area is more center on the square part of the image. In this case the content is text. Grab your phone and set the lock screen to Android and lock your phone. Now go to unlock it by sliding but not all the way. Notice the text there is centered on the square area and not overlapping the rounded area.

Images Within Images

In this image we have an image within an image. In this case we only want certain areas to stretch, the top and bottom and left and right side. We want our + sign to remain where it is. Placing a patch centered left and right and top and bottom will achieve this. The next slide shows what happens when you just place your stretch patches centered.

Wrong

Notice how the images on the right show how the image will look stretched. Not the effect we want. The next slide will demonstrate how not adding enough patches will effect the placement of the image inside.

Wrong Again

In this example I have placed one patch at top/right and left/top. The images on the right show that my image inside is now placed off center, again not the effect you may want. The next slide will show another example of the correct way to do multiple stretch patches.

Now Youre Getting It

Notice again how Ive placed the patches on top and left at the center of the area that doesnt contain anything, the area that I want to stretch. In this example I could very well have placed my left patch at the center but the result would have been a separation of the sets of lines.

Stretch and Content

In this image Ive allowed the whole thing to be stretched left to right but only above the triangle gets stretched. My content area is completely top to bottom but only left of the triangle.

More on Content

Content placement is very important. Having our content too close to the edge will result in buttons and boxes being cut off. Our three images on the right show that our content area (purple) is nicely placed within the grey area of the image meaning buttons and boxes and text will only be placed within that region.

Even More on Content

In this example my content area fills the whole of the black section. The images on the right show the black area completely covered with purple. Buttons placed say at the bottom of this image will probably be cut off as they will be too close to the bottom. Likewise if they are placed left or right they will also be cut off being too close to those edges.

Correct Left to Right

Here we see a better left to right content placement. Notice the images on the right. The purple does not cover the whole of the black area. Any buttons or boxes placed left to right will be moved in towards the center more away from the edges.

A Trick Ive Learned

Modifying .9.png images with image editing software will most likely break the 9patch if not done properly. In this example of the proper way of doing it I have my image open in Adobe Fireworks and I have selected the area that contains the image ONLY. I can now modify this image by changing its color or I can cut this image out and place a new image in. My 9patches will remain intact and draw9patch will NOT be needed.

Parting Words
This has been a very basic tutorial. Practice along with trial and error are needed before you may see perfect results. You can always grab source images to compare the patched areas against what you are trying to achieve. In addition modifying source images the way that I explained in the last slide will keep you from having to fix a 9patched image. I hope this has been helpful, happy moddingExplodingboy70 (Simply Galaxy Team)