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