A (175)

328 CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual

ImageButton UI elements are time-consuming to create, because you will want to create a unique
digital image asset for each ImageButton state. Different images will visually indicate to a user a
different ImageButton state. The reason this can be difficult is not because of the XML markup that is
involved, but rather due to extensive digital imaging work which you will need to do for each button,
across several ImageButton states and across several different resolution densities.

We will be using GIMP 2.8.10 (or later, if it’s out) in the next section of the chapter, to create your
digital image assets for these ImageButton UI states for each of the three galaxy ImageButtons that
we’re going to implement.

We are going to create these 12 image assets, that is, 3 ImageButton graphics asset sets for each
of 4 states, in each of the 5 mainstream resolution densities that are required by Android, as defined
by the folder names which Eclipse ADT created for you when you created your HelloUniverse
application bootstrap back in Chapter 3. So to do things correctly, and be able to span across all
of the different device types, screen sizes, and resolutions from smartwatch to 4K iTV sets, you’re
about to create 60 (5 times 12) ImageButton assets.

After we learn the lengthy work process for creating the five dozen digital image assets, you will
need to create your XML structures which will implement these multi-state ImageButton UI elements.
We will then move on to learn the standard work process for defining each ImageButton state. This
is done using an XML Drawable asset in the form of an image selector definition file, which lives in
your “root” /res/drawable folder. This file will use the parent tag with child tags.
The tags will define each of your ImageButton’s states, using digital image asset references.
Once this XML definition is set up, Android will handle changing the image state for you based on
what the end-user is doing with the device hardware.

Creating Multi-State Imagery: Using GIMP

Let’s launch GIMP and use a File ➤ Open menu sequence to access an Open Image dialog, seen in
Figure 9-14.

Table 9-1. The Android ImageButton Class Primary Image Asset State Constants and Mouse Usage Equivalents

ImageButton State Description of Button State along with its Mouse Event Equivalent

NORMAL Default ImageButton State when not in use. Equivalent: Mouse Out

PRESSED ImageButton State when touched or clicked. Equivalent: Mouse Down

FOCUSED ImageButton State when touched and released. Equivalent: Mouse Up

HOVERED (API 14) ImageButton State if focused (not touched) Equivalent: Mouse Over