CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual 325Saving Your NinePatchDrawable Asset in Android
Your Draw 9-patch software tool’s File Save dialog will automatically save your 9-patch image
assets with the required .9.png file name extension, which is required by Android OS, when using
NinePatchDrawable assets.
When Android sees this type of PNG file in your /res/drawable-dpi folders, it automatically sets it up
using the NinePatch class to load it, and converts it into a NinePatchDrawable image asset once
it’s referenced in XML.
It is important to note here that there is also an Open 9-patch menu option, seen in Figure 9-13,
which opens a normal (non-9-patched) PNG file (*.png). We used this earlier to load the PNG asset
and add the empty one-pixel border around the image, allowing us to create guides showing where
to scale patches and place content.
If you use this menu command to open up previously saved 9-patch PNG files (*.9.png), the 9-patch
PNG asset will be loaded into the Draw 9-patch tool as previously modified with no one-pixel border
drawing areas added, because these one-pixel patch definition areas already exist within the file,
due to the previous editing session!
One final caveat for the File Save dialog is that it will not show (preview) this .9.png extension
in the dialog itself, but will insert it on your hard disk drive, when it saves your file out as the new
NinePatchDrawable image asset. This can be somewhat confusing the first time that you utilize this
software utility, as the file it says in the File Save dialog that it’s going to save is NinePatchFrame.
png, but what it actually saves out is NinePatchFrame.9.png.
Make sure to keep this caveat in mind when you go into the File Save dialog, so that you don’t write
out a NinePatchFrame.9.9.png file! Even if you do this, the next step in the work process would be
to go into your OS’s file management utility and simply rename the file to be filename.9.png. While
you’re there, take a look at your original file, as well as the new 9-patch version, and see how much
data footprint “weight” the 9-patch definition has added to your file.
To find out your exact file size delta, or difference, between these two files, you will want to right-click
on each of the two PNG file assets and use the properties option. This will allow you to see what
the actual file size data footprint for each file actually is. Your original PNG32 was 19.7 kilobytes, and
the new NinePatch PNG is 20.2 kilobytes. This means that the NinePatch definition guides added
one-half of a kilobyte to this 280-pixel square image asset, or about 2.5% more data. This is really
not too bad, considering that you just added an X-axis and a Y-axis (independent of each other)
flexible image scaling capability right into the PNG32 image asset itself!
Now that you have created a usable NinePatchDrawable asset, let’s go into your XML markup for the
SlidingPaneLayout that you started creating in the previous chapter, and we’ll finish learning what
the ImageButton class can do. We will do this by implementing a NinePatchDrawable asset inside
of a multi-state ImageButton which we will create next, so that you can learn not only how to create
your own UI Button graphics, but how to make these graphics morph and animate relative to what
the user of the application is doing on the screen at the time.