[Captivate Themes and Apps] jmtheiss:
I think I'm finally understanding how the draw9patch tool works, and with that, how .9.png files work as well. Just because it wasn't clearly explained in anything else I saw (well, clearly to me, anyway), I'm going to try to do a quick explanation of how it works.

The first thing to remember about the draw9patch tool is that it's generally for use after you've already edited a .9.png file, and that a .9.png file is built to be stretched. To start editing .9.png files, just decompile the source apk (usually something like framework-res.apk) with the apk manager or apktool.

Open the .9.png file in Photoshop and edit everything except for an area 1 pixel wide around the edges of the image. That area is sacred. There is probably already something there - if so, leave it.

If you want an easy way to make sure it stays clean, just create a new layer, use the "select single row/column" tool in photoshop to select those single pixel borders one at a time. Using the bucket tool, fill in that single pixel border with a solid color as a visual reminder. Keep that layer in place as you edit as a guide, and when you get ready to save the file, make that the active layer, and use the magic wand to select the area inside the border, then invert the selection (so you just have the one pixel border around the outside selected). Go through any other layers you have in the drawing with that selection still selected and delete anything inside the selection. That will keep the area clear on all layers. Once you've done this, delete the layer with the border and save your .9.png.

Once your .9.png file is saved, start the draw9patch tool (usually in android-sdk-windows/tools/draw9patch.bat).

When you fire up the draw9patch tool in the android SDK, you'll see an arrow on the screen. The easiest option is to just drag the .9.png file into the window. It will open it, but it might be hard to see. If that's the case, drag the "Zoom" slider as far to the left as you can until you can see the entire image.

The first thing you'll want to do is activate the buttons that will best show you how your .9.png file will stretch and move. Here's what each button/setting will show you:

Show/Hide bad patches - this will show you areas where it will stretch, but it will probably look bad. Go ahead and make this show bad patches (the button will say "hide bad patches" if you are currently showing bad patches)

Show lock - I honestly don't know. I haven't yet seen this setting work for anything. Leave it unchecked.

Show patches - This will show you where your image is going to stretch. Check it.

Show content - This will show you where things get written/overlayed on your image. Check it.

Zoom - Zooms the image.

Patch Scale - adjusts the preview of how your image will stretch at different scales.

Now, you're probably wondering how .9.png files determine how the image stretches, and where stuff gets written. That's what the 1 pixel border tells it (except for where two borders overlap - that's a dead area). Here's the way it works:

The border on the top of the screen controls the area of the image that stretches left-to-right. Every black pixel you put in this border selects a portion of the drawing that will be repeated when Android needs to stretch the image in the landscape direction.

The border on the left side of the screen controls the area of the image that stretches up-and down. Every black pixel here will set a repeating area as the image stretches in the portrait direction.

The border on the right side of the screen sets how much area in the portrait direction is available to have items drawn inside of it. If you have some text that will be written on your image by Android (a clock, for example), it will check the black pixels on the right side of the screen to determine where it can put them.

The border on the bottom of the screen works in conjucntion with the border on the right side to determine the landscape portion of the area where things can be drawn.

One thing you'll notice with draw9patch is that it will only let you draw in the 1-pixel borders. This makes it generally easier than Photoshop to work with.

To start, just draw a few pixels at the top and left side borders, then look in the preview pane on the right side of the window. That will show you how those areas will repeat. If you adjust the scale, you can see how it will repeat over a greater area. If a patch isn't going to work, it will show up highlighted in a red border. If you need to erase, just hold shift and then click on the pixels you need to get rid of.

Once you have a stretchable area that works for you, put some pixels in the bottom and right borders until you're happy with the area that will accept drawing items. If you look in the window on the right, you'll see a blue area highlighted where that stuff would go. As long as that looks ok to you, you're good to go.

After you've checked everything and it all looks like it will stretch well, you can just use the File-Save command, and it will save a good .9.png file that (should) compile properly.

A quick pointer that I'm discovering: If you have an image that really won't stretch well in any direction, just delete everything two pixels in from each edge, leaving a transparent line just inside the 1-pixel border. Then select those areas as your repeating areas. It may mean your item shrinks on the screen, but it also means it will look the way you intended.