Question

I tried enough to find in google & android this question. Also did several trials & errors, but couldn’t get this question.
I was learning Android’s “Draw Nine Patch” images. One basic I know is that, whatever image you process must be in .png format (if it’s already in .9.png then it will be ignored by tool). However,

1. I couldn’t understand what it literally means by “stretchable patches” ?
2. What exactly happens when you draw black dots outside the .png image ? (preview pane shows changes happening, but I am unclear on how it makes those)
3. When I draw black dots in left/top sides of image it shows some changes in preview; but why isn’t there any effect when you do the same on right/bottom side of the image ?
4. Why this tool is used primarily for background, when we try to process on the image itself ?
5. I am trying to modify a simple button.png (given in android sdk). Whenever I use this tool & draw black lines, it reduces the size of the image instead of ‘stretching’ it! Why ?
6. What is the significance of options given below like, “show lock”, “show content”, “Patch scale” and so on ?

I apologize for asking so many questions, but in Android online docs they haven’t explained well for novice. If someone can answer these, it will become ready reference for all the begineers who search this forum.

Answer 1

By stretchable patches, you’re basically telling Android which rows and columns of pixels in the image that you want to repeat. When you stretch a standard image, there are two possibilities: One, it is scaled proportionally, but still loses sharpness due to interpolation; Two, it is scaled disproportionately, and loses not only its sharpness, but its shape as well. An example of a disproportionate scaling is below:

So the purpose of the black lines it tell Android what areas of the image are safe to repeat. The top corner defines the column(s) that it can stretch, while the left corner defines the row(s) that can stretch. The bottom and right corners just define the actual content area (e.g. where the button is allowed to place text), you can reserve extra space to pad the frame. In the image below, you can see that the two black pixels on the outside of the frame define rows on the image, while the one on top defines a column.

And below, this shows the result of a 9-patched stretched out to various sizes. If it’s enlarged to be wider, the halves of the image on the left and right of the defined stretchable column are aligned to the left and right of the new size, and the defined column is repeated to fill the space in between. Same thing happens with the defined rows; if you use multiples (I don’t believe you can use more than 2 stretch rows/columns) it just evenly pads the space with both of them; in this case I used it to keep the gradient evenly split down the middle.