320 CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual
Finally, at the top of the editing area, there is a Show bad patches button, which will add a red
border around patch areas which may produce artifacts in the graphic when it is scaled. Visual
excellence for your scaled images will be achieved if you strive to eliminate all bad patches in your
NinePatchDrawable design.
Now it is time to draw in our left one-pixel border, as shown in Figure 9-9.
Figure 9-9. Draw down a vertical Y patch, using the left one-pixel black line segment to define the Y-axis patch scale
As you can see in Figure 9-9, I didn’t draw this one-pixel black border line all the way down the
left side. I did this so that you could visualize how well this Show patches option works. This
option will allow us to visualize exactly what we are doing right down to the pixel level, as you can
see in Figure 9-9, when you look at the color areas and how they “blend” with the transparency
checkerboard pattern and the source PNG32 image asset. This precision is absolutely necessary if
we want to define the perfect 9-patch image asset for use in our NinePatchDrawawble object.
Figure 9-10 now shows your NinePatchDrawable PNG32 image asset with both the top, as well as
the left, one-pixel (border) black line definitions in place. As you can now visualize, thanks to the
Show patches option, we have now defined our static areas, shown as clear (no coloration), which
will not scale, and our scalable areas, shown using a green overlay. The Show patches option has
allowed us to do this with surgical pixel precision.