Android ImageButton with disabled UI feel

Unlike a regular Button, an ImageButton or a Button that has an image background is not grayed when disabled. You actually have to use another image or to process it in a way it appears grayed.

Should using another image be ok, you can do this by using a <selector> (here associated to a regular Button but this amongs to the same):

  • /drawable/my_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false"
            android:drawable="@drawable/button_gray" /> ***button_gray is a Drawable image***
        <item android:state_pressed="true"
            android:drawable="@drawable/button_gray" /> 
        <item android:drawable="@drawable/button_red" /> ***button_red is a Drawable image*** 
    </selector>
    

Please note that in a selector the logic applies a sequential way, item per item. Here, button_red is used all the time but when the button is disabled or being pushed.

  • Your layout.xml:

    <Button android:id="@+id/myButton"
            android:background="@drawable/my_selector" ***this is a reference to the selector above ***
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
    />
    

And should using another image be a problem, other answers (such as @Tronman's or @southerton's) give you ways to programmatically process the image in a way it appears grayed.


@Oleg Vaskevich gave a different solution to the problem here: Disable an ImageButton

His solution allows you to gray-out an ImageButton without creating additional images or using a <selector>.

/**
 * Sets the image button to the given state and grays-out the icon.
 * 
 * @param ctxt The context
 * @param enabled The state of the button
 * @param item The button item to modify
 * @param iconResId The button's icon ID
 */
public static void setImageButtonEnabled(Context ctxt, boolean enabled, 
        ImageButton item, int iconResId) {

    item.setEnabled(enabled);
    Drawable originalIcon = ctxt.getResources().getDrawable(iconResId);
    Drawable icon = enabled ? originalIcon : convertDrawableToGrayScale(originalIcon);
    item.setImageDrawable(icon);
}

/**
 * Mutates and applies a filter that converts the given drawable to a Gray
 * image. This method may be used to simulate the color of disable icons in
 * Honeycomb's ActionBar.
 * 
 * @return a mutated version of the given drawable with a color filter applied.
 */
public static Drawable convertDrawableToGrayScale(Drawable drawable) {
    if (drawable == null) 
        return null;

    Drawable res = drawable.mutate();
    res.setColorFilter(Color.GRAY, Mode.SRC_IN);
    return res;
}

Tags:

Image

Android