I struggled with this concept myself, and spent many hours searching for answers that I failed to find! It is actually quite easy.
It will require a few things, and having these installed correctly are beyond the scope of this tutorial!
First you will need the Android SDK installed and working!
Second, you will need xUltimates d9pc compiler for your system
I chose to extract xUltimates tool into my SDK\tools folder since that is where the drawpatch9.bat file is ran from anyhow!
First create your image and save it as the same name as the .9.png you are replacing without the.9 (This example uses popup_full_dark.9.png, we will save it in our photo editor as popup_full_dark.png) Saving it to the desktop is most efficient!
Enter the SDK\tools directory
Double click drawpatch9.bat
The tool now opens. Minimize the application and drag your saved photo overtop the taskbar icon of the tool, wait for the window to maximize, and let go of the mouse.
Make sure to uncheck Show Lock!
Make sure to check show patches and show content boxes!
Left clicks add marks, and right clicks erase marks.
The bottom and right sides control where content can be displayed in the image!
The top and left side control what portion of the image is expanded as needed!
First thing to do is decide where you want content to fit in your image. I know that this is a large dialogue box so i'm going to add a 1 pixel padding inside the border of the box. This way text or images are not touching the sides of the box. I add myself a few guidelines along the top and left to help me get my content area set.
So now if I stay just on the insides of the green marks along the bottom and right sides, I will have my 1 pixel padding area where no content will be displayed! Guides along the bottom and right should be a continueous line from beginning of context area to the end!
Notice the area to the right of the window. This shows you how your image will look and react if saved right now. The blue area is our context area! This is the area we just defined with the black guide marks along the edge.
Now those marks along the top and left were just guides so right click them to erase them.
Since our gradient runs horizontally I place a single mark in the center of the image along the top to tell the image that if it needs to be wider than it is now, this is the exact pixel line that I want you to replicate!
The same rule applies to the mark on the left. However since there is a horizontal gradient you are stuck with 2 options! Normally I simply choose the Exact middle pixel line on the left because it is the purest red color in the gradient. You will notice in the pics how the preview pane on the right reflects what the image will look like stretched. That single pixel mark compared to replicating the whole gradient have different effects on what the image will look like stretched. I have tried to replicate entire gradients before and they looked pixelated, thats another reason i choose the single pixel. Also if the box or button or bar or whatever image you are changing is a single color, then you simply use the single pixel method anyways.
After you make all your guide marks, click on File in the upper left hand corner, then click save! In the save dialogue box, navigate to the desktop, then scroll until you see the name of your image and click on it, then click save. This will save the patched .9 image on your desktop. The old one will be ther as well, and should be deleted. The new one will have .9.png at the end. Close drawpatch9 application.
Go back to you SDK\tools folder (this is where I chose to extract xUltimates tool to!) or go wherever you extracted it to. You will see the xUltimate-d9pc.exe, a music folder, an example1 folder, and an example2 folder. All folders must be there, but only example1 matters to us. Open up example1 folder and then open the res folder. Finally, open the drawable-hdpi folder and delete ALL of its contents! Now drag your image saved to the desktop with a .9.png extension into the drrawable-hdpi folder.
Brows back to the directory where all the folder and the exe are located. Double click the xUltimate-d9pc.exe file. A small command window will pop up.
Let it finish. The window will disappear and you will have a new folder named done. Open that folder, and the one inside it, and the one inside it, until you find your image.
That image is patched and ready to be pushed back into the apk!
You must remember to delete the done folder before you run the tool again!
Here are a few other examples of patching.
This image is one of the tab buttons. Pretty self explanatory, think about where the content should go (once again I left a 1 pixel padding on sides and 2 on top and bottom) and what pixels should be stretched!
This next one is the status bar "handle". On my Droid it is approximately 840 pixels wide. This image is only 100 pixels wide. Notice the Guide marks along the top!
Along the top and left, where we tell the image what pixels to replicate when it needs stretched, I have a few scattered. Here's the deal, if two dots are along the top, this tells the image to stretch between those two points. Its the same as setting the content area with a solid black line, but ONLY on the top and left can we skip the solid black line and use two endpoints instead! Obviously as seen in the pic, using four black dots tells the image that there are 2 starting points, and 2 ending points!
The line representation above is what the image sees! Stretch the image between the 2 sets of points! You can always check the right window pane, to see how your guide placement is affecting things!
And finally you will notice that i chose to replicate all pixels on left except the border pixels. This is so if it stretches the middle lines it stretches them evenly!