We are going to be using the Draw 9-patch tool from Android* to do this.
Note: Any PNG image editor that can mark pixels in a transparent color can be used.
Step 1: Launch Tool. Draw9patch.bat is part of Android* SDK and can be launched from the sdk/tools folder.
Step 2: Import your PNG image to the tool by either dragging it into the window or locate the file using Ctrl+O.
Step 3: Analyze your image and decide which areas you want to preserve (make non-scalable) and which areas you would like to stretch (will distort).
Here is what the original image looks like:
Here is how it will look like when the device stretches it vertically and horizontally (this can be viewed on the preview area – right pane of the tool)
We want the HTML5 logo to be centered in the middle, the ‘android’ text above the logo and the ‘Nine Patch Image Test Loading…’ text at the bottom of the image. This leaves the areas in grey open for stretching:
Step 4: Specify areas for stretching in Draw 9-patch tool.
Check the ‘Show lock’ Checkbox (found at the bottom pane of the tool). When you mouse over, it will show you the non-drawable area of the image. You will find a small one pixel perimeter around the image where you can draw a line to specify areas you want to stretch.
Check the ‘Show patches’ checkbox which shows the stretchable patches in pink on the image. Click within the 1 pixel perimeter to draw lines that define the stretchable patches. Draw lines only on the top and left borders. The pink patch areas will be stretched if the splash screen needs to be resized.
On the preview pane, you can see how your 9-patch image now looks when stretched vertically and horizontally:
Step 5: Save 9-patch image (File > Save 9-patch) which would save it with the .9.png extension. Android* will identify your image as a nine-patch graphic using this extension so do not change it.
Step 6: Create three more 9-patch images for your other image sizes.