Android ImageButton Widgets

The ImageButton is a use­ful wid­get if you want to cre­ate a cus­tom designed but­ton. An ImageButton lets you spe­cify a default, hover and dis­abled state (among oth­ers), each with a cus­tom image of your choosing.

To cre­ate an ImageButton we need to:

  1. Add our images to our resources folder.
  2. Define a new ImageButton as an XML resource.
  3. Add our new but­ton to our XML.

Create ImageButton

Place your XML in res > drawable > mybutton.xml

First step, add your images to the rel­ev­ant draw­able folders. You need at least a default but­ton state, but it’s nice to add a “pressed” state too.

Second step is to cre­ate the XML defin­i­tion of your but­ton in res > drawable-somedpi > my_button.xml, repla­cing somedpi with any DPI of your choosing.

Use the fol­low­ing XML tem­plate as an example:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/info_pressed" android:state_pressed="true" />
<item android:drawable="@drawable/info_pressed" android:state_focused="true" />
<item android:drawable="@drawable/info_enabled" android:state_enabled="true" />
<item android:drawable="@drawable/info_disabled" />
</selector>
  1. Default State

    default-fs8

    Other states aren’t active.

  2. state_enabled

    state_enabled

    The but­ton is enabled.
    android:state_enabled="true"

  3. state_pressed

    state_pressed

    The but­ton is being pressed.
    android:state_pressed="true"

The @drawable/somename entries refer to the images you pre­vi­ously added, without the file exten­sion. In the above example, you can see I’ve defined the following:

  1. state_pressed
  2. state_focused
  3. state_enabled: the default state of a newly cre­ated but­ton in Android.
  4. A fall­back “dis­abled” state. This will show when we dis­able the but­ton later on.

Using an ImageButton

To use an ImageButton, you can define it in your XML view.

<ImageButton
android:id="@+id/btnMyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:contentDescription="A description of my button"
android:onClick="btnMyButton"
android:src="@drawable/my_button" />

In the above example, I have defined:

  1. id — An ID for my but­ton so we can refer to it later in  our code if need be.
  2. back­ground — Set to null to remove a solid back­ground col­our. This is use­ful when using PNG images to make sure the image doesn’t appear in a square box.
  3. con­tent­De­scrip­tion — This is the alt text, and is essen­tial to make sure our app is access­ible if the user is using access­ib­il­ity tools.
  4. onClick — This points to a method in our activ­ity that will be called when the but­ton is clicked.
  5. src — This tells the ImageButton to use the set­tings we defined in my_button.xml.

Disabled ImageButtons

If you want to dis­able an ImageButton so it can’t be clicked, you will need to do the following:

  1. Disable the button.
  2. Make the but­ton unclickable.

This can’t be done in the view defin­i­tion, but you can do it in your code:

ImageButton ib = (ImageButton)findViewById(R.id.btnMyButton);
ib.setEnabled(false);
ib.setClickable(false);

Android doesn’t provide a “dis­abled” state in our ini­tial XML declar­a­tion so we need to ensure that the default but­ton state in our defin­i­tion is the dis­abled image. We can then spe­cify a sep­ar­ate state_enabled image which will be used when the but­ton is enabled.

Leave a Reply