318 CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual
Defining Your NinePatchDrawable Scalable Areas
To define how your NinePatchDrawable asset will scale from side to side (along the X axis), click in
the top one-pixel transparent perimeter on the right side, near the corner, as shown in Figure 9-7,
and drag to the left. This will draw out a one-pixel black line, which will define your X-dimension
scalable patch. Once you draw in the rough approximation of what you want, you can fine-tune
the line using the fine gray lines at each end of the one-pixel line segment. If you place the
mouse over these gray lines, the cursor will change into a double arrow and you can then click
and drag the grayed-out area, until it fits pixel-perfectly with the transparency area in the
center of the NinePatchFrame PNG32 source image which you are using to create the
NinePatchDrawable asset.
You can also right-click (or if you use a Macintosh, hold the Shift key and click) to erase any
previously drawn lines. As you can see in the preview pane on the right side of Figure 9-7, you’re
still not getting the visual result that we are going for here, as the NinePatchDrawable asset is quite
distorted. Let’s continue on, and define your left side, one-pixel black border, Y-dimension scalable
patch, to see if we can correct this Y-scaling distortion.
First, let’s use one of the more colorful Draw 9-patch software options, the Show patches check
box option. This is located at the very bottom of the Draw 9-patch editing pane. This option is there
so that you can visualize the patch X and Y settings visually, using different colors. Look for the
empty check box next to this Show patches option, and check it to turn this feature on. As seen
in Figure 9-8, this option will provide coloration for your selected areas, by using a combination of
purple and green colors. This will make it more clear to you during your editing process which areas
of the image asset are being affected by the patch definition which you are implementing by using
these one-pixel black perimeter lines.