Android ImageButton with disabled interface

Question

I have an ImageButton that is disabled (not clickable or set as disabled). I want to give the user interface a user that it is disabled without using any other image.

Is there any way to do this?

Answer 1

Unlike a regular Button , ImageButton or Button , which has an image background, is not disabled when disabled. You really have to use another image or process it in such a way that it looks gray.

If using another image in order, you can do this using <selector> (here associated with a regular Button , but this is among 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> 

Note that in the selector logic applies a sequential path, an element for each element. Here button_red used all the time, but when the button is disabled or pressed.

• 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 if a problem with another image is a problem, other answers (e.g. @Tronman or @ southerton's) give you ways to programmatically process the image as if it is gray.

Answer 2

@ Oleg Vaskevich gave another solution to the problem here: disable the ImageButton button

Its solution allows you to ImageButton without creating additional images or using <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 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 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; } 

Answer 3

I preferred to override the setEnabled() method in ImageButton to change the alpha property of the image accordingly. Therefore, when the button is disabled, the image will be partially transparent and more disabled.

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

Answer 4

By developing @tronman’s answer, you can also create a function that will highlight dynamically loaded drawings (that is, not from a resource, for example, downloaded 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 an opaque background available (with android: background), refer to the Android selectors : how to make a moveable selector to also change the background.

Answer 5

You can set it without clickability, as well as adjust alpha to show the feeling you are talking about.

Answer 6

 public static void setImageButtonEnabled(@NonNull final ImageView imageView, final boolean enabled) { imageView.setEnabled(enabled); imageView.setAlpha(enabled ? 1.0f : 0.3f); final Drawable originalIcon = imageView.getDrawable(); final Drawable icon = enabled ? originalIcon : convertDrawableToGrayScale(originalIcon); imageView.setImageDrawable(icon); } private static Drawable convertDrawableToGrayScale(@NonNull Drawable drawable) { final ColorMatrix matrix = new ColorMatrix(); matrix.setSaturation(0); final ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix); final Drawable mutated = drawable.mutate(); mutated.setColorFilter(filter); return mutated; } 

If you use Kotlin, you can create an extension function instead to make it look more elegant:

 fun ImageView.setImageButtonEnabled(enabled: Boolean){ //Above implementation here } 

and name it using:

 yourImageView.setImageButtonEnabled(true/false) 

Answer 7

In Kotlin, you can use extension functions.

 fun ImageButton.enable() { this.isEnabled = true this.imageAlpha = 0xFF } fun ImageButton.disable() { this.isEnabled = false this.imageAlpha = 0x3F } myButton.enable() myButton.disable() 

Answer 8

Solution using only XML resource files:

  <ImageButton style="@style/your-style" android:tint="@color/but_color" android:src="@drawable/button" /> 

and color resource but_color (in the res / color folder):

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:color="#888" /> <item android:color="?android:attr/colorAccent" /> </selector> 

That is, we set the color tone of the button (works fine on every version of Android, if the AndroidX support library is used). The shade itself is a list of colors. Set the colors as you need, here is gray for the off state and highlight the color from the theme for the on state.
We only change color, and we need only one image for drawing. But note that the entire color of the button will be changed.

Answer 9

Using setImageAlpha on ImageButton, this can be done

When turned on,

  ((ImageButton) findViewById(R.id.btnImageButton1)).setEnabled(true); ((ImageButton) findViewById(R.id.btnImageButton1)).setImageAlpha(0xFF); 

when disconnected,

  ((ImageButton) findViewById(R.id.btnImageButton1)).setEnabled(false); ((ImageButton) findViewById(R.id.btnImageButton1)).setImageAlpha(0x3F); 

As @SnoopDougg suggested, a custom ImageButton class might be a good idea, extending ImageButton and setting ImageAlpha inside; have not tried it yet.

Answer 10

No, your image is a differentiation factor. Therefore, if you do not want to change the image, then you cannot indicate whether the image button is disabled, enabled, pressed.