Discovered an interesting thing about Android today: the fairly ugly default ImageButton can be replaced with a custom drawable while retaining the very user-friendly highlighting behavior.

I was trying to create three buttons for an application I am working on: zoom-in, zoom-out, and next. For development purposes, I had just been using regular (text-only) Buttons, but for the final product I wanted something a little snazzier. While it is certainly possible to create your own button functionality, I’m guessing it is wise to stick to the defaults when possible – enter the ImageButton class. It works the same as a Button, but shows an image instead of text. The problem is, the default look was gonna be kinda ugly in my application.

My first thought was – well, maybe I can just set the background to black. That works, but you lose the highlighting that makes the ImageButton nice in the first place. So, a few searches later, here is what you do – this example is for a two-state (“normal” and “pressed”) button called “Next”:

1. Create two image files (one for the “normal” state and one for the “highlighted” state

2. Create an XML Drawable (that is, a .xml file in your /resources/drawable/ directory

3. Paste the following XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="@drawable/btn_next_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="@drawable/btn_next_normal" />
<item android:state_pressed="true"
android:drawable="@drawable/btn_next_pressed" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="@drawable/btn_next_pressed" />
<item android:state_enabled="true"
android:drawable="@drawable/btn_next_normal" />
<item android:state_focused="true"
android:drawable="@drawable/btn_next_normal" />
<item android:drawable="@drawable/btn_next_normal" />
</selector>

4. In your Java code (should also work in XML), use it just like any other Drawable:

ImageButton next = new ImageButton(this);
  next.setImageResource(R.drawable.btn_next);
  next.setScaleType(ScaleType.CENTER_INSIDE);
  next.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
    //do stuff here
  }
});

Note that this button only shows two images “normal” and “pressed” because that seems sufficient for my situation, but the XML allows 7 views depending on the state of the button.

For more information, see:

http://stackoverflow.com/questions/606694/android-different-image-for-rollover-on-imagebutton

http://groups.google.com/group/android-developers/msg/ef6014f46c35a824