CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual 327The default image for your ImageButton UI widget, which defines its normal state, can be defined
statically by using the android:src XML parameter in a
XML layout container UI definition, as you did for the ImageButton UI elements that you used in the
SlidingPaneLayout in Chapter 8. You can also define a default image for the ImageButton UI widget,
which defines its normal state, dynamically (at run-time) in your Java code; you can implement this
by using the .setImageResource( ) method.
We will be using XML to define our UI designs, which the Android OS prefers that we do, for this
book. If you use the android:src parameter to reference image assets, this will put an image on
the ImageButton, as you saw in Chapter 8. It is important to note developers can use both the
android:background parameter, which allows a background image plate, or layer, to be added
to the ImageButton element, as well as the android:src parameter, which allows you to install
the foreground image plate (layer). This enables you to perform image compositing inside of the
ImageButton UI element itself.
If you do this, you will want to use alpha channels in your images, as we have been, and will be,
doing in this chapter. This is why I have been getting into alpha channels so deeply, as they allow
you greater flexibility inside of your Android graphic design pipeline.
The reason that you would want to define both a foreground image plate and a background image
plate at the same time, in the same UI element, would be so that you could take advantage of the
power of digital image compositing which Android affords you by allowing multiple image plates
(parameters that support Drawable objects). You can also set the ImageButton background color
value to transparent (#00000000) if you want to composite with other UI elements behind the
ImageButton, such as using a background image asset for your parent layout container, for instance.
The States: Normal, Pressed, Focused, Hovered
An ImageButton class allows you to define custom image assets for each of the states for a UI
button. States include normal (the default or not in use), pressed (a user touching, or pressing down
on, device click selection hardware), focused (recently touched and released, or recently clicked and
released) and hovered (a user is over an ImageButton with the mouse or navigation keys, but has
not touched it, or clicked on it, as yet).
The hovered state was added recently in Android 4, API Level 14, possibly in anticipation of using
the Android OS for the Google Chromebook product or in anticipation of the Amazon Fire TV or the
Dell Wyse Cloud Connect Android HDMI PC product, or other products such as 2K (1920 by 1080)
iTV sets or 4K (4096 by 2016) iTV sets that come with a mouse, keyboard and game controllers.
I’ve summarized the four currently supported ImageButton states as of Android OS 4.4.4, called
KitKat, along with their mouse event programming equivalents that would be used on non-
touchscreen devices, in Table 9-1.