CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual 317
Both of these approaches are shown in Figure 9-6; however, I’m going to use the conservative route,
and use the Open dialog, which you can see in the bottom left-hand corner of the screenshot. For
faster work process during production, you can simply drag your PNG file out of your file manager
utility and drop it right into (onto) the Draw 9-patch tool.
Once you find the NinePatchFrame.png 32-bit PNG32 source image asset, select it, and click on
the Open button. You will then see your Draw 9-patch software, with your PNG file in the editing and
preview areas.
Exploring Your New Draw 9-patch Editing Software
The left pane is the NinePatch editing pane, where you can create your one-pixel wide black lines,
which allows you to define “patches.” These patches will tell the NinePatch class “engine” in Android
what the scalable areas are for this NinePatchDrawable, as well as defining where your center (called
the padding area in a NinePatch) content area will be.
The right pane is the resulting NinePatch previewing pane, as you can see on the right side in
Figure 9-7, where you can see what your NinePatch drawable asset will look like when it is scaled
according to the one-pixel black border line definitions which you are in the process of defining in
the left editing pane of the software.
Figure 9-7. Draw out a horizontal patch at the top one-pixel black line segment to define the active X-axis area