324 CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual
It’s important to note that if you place the mouse in the left editing pane over the center section of
the NinePatch definition, and then hold it there, a tool-tip pop-up will appear giving you the precise
pixel patch coordinates for the final NinePatchDrawable definition, which you may want to know
about for the XML markup or Java code.
In our case, this will show that you have utilized 256 pixels minus 26 pixels, or 230 pixels of our total
280-pixel image dimension, for our center scalable area. Note that 256 is a numeric value that scales
quite well, as it is the “power of 2” data value (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024). This means
that you have used 25 pixels, or half of the 50 remaining pixels, for the actual image assets (bars
and screws) that will be scaled. The reason this is not 26 pixels is because the NinePatchDrawable
image format uses that one-pixel border to define its patches.
This also means that the fixed areas of this 9-patch, in this case, it is a corner of the frame with a
standard screw in it (to hold the frame in place, of course, or so it appears) will thus each be exactly
25 pixels square in size. These corner areas of the NinePatchDrawable will not be distorted in the X
or Y dimensions, although they may be uniformly scaled as needed. There are enough corner pixels
(more than two dozen) to be able to scale up, if it is used on higher pixel density (resolution) screens,
and to have the detail to appear photo-real if scaled down.
As you can see in Figure 9-13, on the right-hand side of the Draw 9-patch application preview
pane, our scaling picture frame graphic looks extremely crisp, and quite realistic. If you scroll the
preview pane, this holds across all of the scaling orientation previews. Now it is time to Save our
NinePatchDrawable image asset. Do this by using the File menu and the File ➤ Save 9-patch
menuing sequence, which you can see in Figure 9-13.
Figure 9-13. Final patch definition and using the File menu and Save 9-patch menu option to save a 9-patch