Android ImageButton with disabled UI feel

I have an ImageButton which is disabled (non clickable or set as disabled). I want to give an UI feel to the user that it is disabled without using any other image.

Is there any way to do this?

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;
}

I preferred overriding the setEnabled() method in the ImageButton to change the image's alpha property accordingly. So when the button is disabled, the image will be partially transparent and more disabled-looking.

public class CustomImageButton extends ImageButton {
    //...

    @Override
    public void setEnabled(boolean enabled) {
        if(this.isEnabled() != enabled) {
            this.setImageAlpha(enabled ? 0xFF : 0x3F);
        }
        super.setEnabled(enabled);
    }
}

Elaborating on @tronman answer you can also compose a function that will gray out dynamically loaded drawables (i.e. not from resource, - for example loaded from raw svg files and converted to BitmapDrawables on the fly).

/**
 * Sets the specified image buttonto the given state, while modifying or
 * "graying-out" the icon as well
 *
 * @param enabled The state of the menu item
 * @param item The menu item to modify
 * @param originalIcon The drawable
 */
public static void setImageButtonEnabled(Context ctxt, boolean enabled, ImageButton item, Drawable originalIcon) {
    item.setEnabled(enabled);

    Drawable res = originalIcon.mutate();
    if (enabled)
        res.setColorFilter(null);
    else
        res.setColorFilter(Color.GRAY, PorterDuff.Mode.SRC_IN);
}

If you also have a non-transparent drawable on background (set with android:background) refer to selectors Android: How to Make A Drawable Selector to also modify background.

You can set it to non clickable and also set the alpha to show that feeling that you mention.