322 CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual
Also notice in Figure 9-11 that I am in the process of drawing in the second, one-pixel black border
line segment at the bottom of the image. I am doing this in order to define the X dimension for the
center padding area, which will define where other (composited) image assets in our user interface
design can show through this NinePatchDrawable image asset. If I didn’t have transparency in this
graphic, image assets behind it (those on a lower z-order layer) would not show through. Due to
the padding, images on top of it would draw inside the NinePatch image. So if your NinePatch had
a white interior and you used it in the background UI plate, the image in the source UI plate would
“respect” this padding (interior) area and be drawn on top of it (background is behind foreground).
Notice the muted colors in Figures 9-11 and 9-12, which are used to show different layers of the
scalable versus padding area definitions. The padding definitions use a gray overlay on a green
or purple (or pink, if you prefer) scalable area definition. As you can see on the right side, the
NinePatchDrawable scaling result is giving us exceptionally professional results, regardless of the
source image’s orientation or dimensions, which the 9-patch image asset is being scaled into. Notice
in Figure 9-12 that I’m pulling the right side one-pixel black border line segment up, showing the
patch adjust guides, and how you can adjust padding parameters precisely.
Figure 9-11. Define the padding areas using the one-pixel black line segments on the right and bottom