314 CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual
The most recommended image format for use in Android application development is called the PNG,
or Portable Network Graphic, file format. PNG is pronounced Ping in the digital image industry.
PNG has both an indexed color version, called PNG8, or PNG5, if you only needed to use 32 colors,
as we saw earlier in the chapter, and a truecolor version, called PNG24, and a truecolor with alpha
version, called PNG32.
The PNG8, PNG24 and PNG32 numbering extensions I am using represent the bit-depth of color
support, so a truecolor PNG which has an alpha channel would technically be referred to as a
PNG32. Similarly, a PNG using 16 colors would be said to be a PNG4, a PNG using 64 colors could
be referred to as a PNG6, and a PNG using 128 colors could be referred to as a PNG7, and so
forth. The reason PNG is the recommended format for use with Android is because it uses lossless
compression, and yields high image quality along with a very decent (respectable) compression
efficiency.
The most recent image format was added to Android when Google acquired ON2 and is called
the WebP image format. The format is supported under Android 2.3.7 for image read, or playback
support, and in Android 4.0 or later for image write, or file saving support. Image write support in
Android, in case you might be wondering, would be used with the Android device camera, so that
your users can save (write) images to their SD card or to the “cloud” via remote web server. WebP is
a static image version of the WebM video file format, which is also known in the industry as the ON2
VP8 codec, which was acquired by Google and released as open source.
Creating Android NinePatchDrawable Assets
This section of the chapter will outline how to create a NinePatch graphic, using the Android Draw
9-patch tool. NinePatchDrawable objects are unique to Android, although there is some movement
to add the format to the HTML5 standard as well. A NinePatch image uses the PNG image format,
and is designed to be able to tile efficiently in either the X or the Y image dimension, or in both
dimensions at the same time. This allows a NinePatch image to be able to morph to fit different size
and shape UI widgets and/or display screens, if used as a border element.
You will need a source PNG image with which to create your NinePatchDrawable object. I have
provided a PNG32 (truecolor with alpha channel) digital image asset, which you can find in
the project assets repository for this book. The reason I am using an alpha channel to define
transparency in the center area of the 9-patch that we’re about to create is so that any image layers
(intended composites) which are behind the image asset inside Android will composite perfectly with
the 9-patch image asset in the image compositing stack that we will be implementing using XML UI
layout design definition markup later on in this chapter.
Installing Your Android Draw 9-patch Software
Let’s get started by locating the Draw 9-patch tool in your Android SDK folder hierarchy, in the tools
sub-folder. Open your OS file navigation utility, for Windows 8 it is the Explorer, as shown in Figure 9-4.
As you can see, I named my Android SDK folder Android, and inside of it is an
adt-bundle-windows-x86_64 folder that I unzipped to install the SDK. Under this folder is an /sdk
sub-folder, and underneath that is the /tools sub-folder.