A (175)

(Tuis.) #1
CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual 321

Also notice in Figure 9-10 on the right-hand preview side of the Draw 9-patch software tool that
the results for your NinePatchDrawable PNG32 image asset patch scale definition is giving you a
professional scaling result.


If you grab that scrollbar on the right side of the preview pane area of the screen and pull it up or
down, you will see that the NinePatch scales in a portrait as well as in a landscape container shape,
with perfect visual results, regardless of the aspect ratio (shape) of the container which is holding
your NinePatch asset.


Defining Your NinePatchDrawable Padding Areas


Now that we have defined the scalable areas of the NinePatch image asset, it is time to define the
padding areas for the NinePatch image asset. This is accomplished by using the one-pixel black
border lines on the right and bottom of the editing pane.


As you can see in Figure 9-11, I have drawn in, on the right-hand side, the one-pixel black border
line segment which is needed to define the Y image dimension for our center (padding) area for the
9-patch image asset. The center area in the case of the PNG32 asset contains an alpha channel
value of #00000000, or 100% transparency, which you could also define, as you now well know,
using any other color value, such as white, or #00FFFFFF.


Figure 9-10. Both your horizontal and vertical patch one-pixel black line segments now define active axis areas

Free download pdf