5

I am trying to have an ImageButton that initially has a gray effect on it & turns into its original color when selected. I'm trying to achieve something like this. I know this can be done in CSS, but was wondering if any Android attribute / function equivalent to it existed.

I read a post here that seems to suggest that I have to maintain a different gray copy of the same Image in order to achieve this. But it would consume a lot of memory to maintain 2 copies of the same Image if I have, lets say 100+ ImageButtons.

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.

So is there really no way to achieve in Android what could be achieved using grayscale in CSS?

Thank You for your time!!

Community
  • 1
  • 1
Auro
  • 1,578
  • 3
  • 31
  • 62

2 Answers2

10

If you are using .png images, you could use the ImageView color filter attribute.

public void setDisabled(ImageView imageView) {
    final ColorMatrix grayscaleMatrix = new ColorMatrix();
    grayscaleMatrix.setSaturation(0);
    imageView.setColorFilter(new ColorMatrixColorFilter(grayscaleMatrix));
}
Sachin Rajput
  • 4,326
  • 2
  • 18
  • 29
Danail Alexiev
  • 7,624
  • 3
  • 20
  • 28
  • Well, that does do what I want, but was wondering if the same could be applied to an `ImageButton` & if yes, how. I want the button itself to gray out when clicked. – Auro Jul 07 '16 at 03:39
  • `ImageButton` extends `ImageView`, so the same code should be applicable. – Danail Alexiev Jul 07 '16 at 07:25
3

I know I might be very late, but there's also another option to this - I came across the same situation which I tried to solve and found some straightforward alternative.

Specifically for ImageButton I have used setAlpha(floatValue);

Example:

private ImageButton btnPlay;
[...]
btnPlay.setAlpha(0.5f);

Another method for setting Alpha effect for ImageView (technically speaking also to ImageButton, which extends ImageView) is setImageAlpha(inValue between 0 and 255) - but for me it did not work also for the ImageButton.

A downside of this approach could be though that it is not an actual "gray-out". By setting the transparency, you might be at risk if the background behind the button is a texture or an image. This solution works best with plain backgrounds, like black, dark, white, gray etc. that will also help create the "gray-out" feel.

Thanks for the comments that helped figure out this downside.

student0495
  • 171
  • 3
  • 15
  • 2
    Not bad, but this sets the transparency and does not gray out the image. – gil.fernandes Aug 29 '20 at 10:18
  • 1
    Indeed, you are right - in the context I have used it, with black background or something white, it looked neat (like a gray-out effect). However looking back to setting alpha value, I can see a major downside if, for example, the background behind the button is a texture or image. I will edit the response adding this note of the possible downside. – student0495 Sep 02 '20 at 10:14
  • Thanks for the alternative! I've decided to use it as a 'solution' for the same problem. – Leo Oct 22 '22 at 21:05