How do I partially gray out an image when pressed?

Question

I have an image that I use as a button. It is an ImageView within a RelativeLayout. The RelativeLayout is the View that receives the touch events. While touched, I want to partially gray out the image as feedback. How do I do this?

The best way I can think of is to place another View with a black background on top of the ImageView and style it normally 100% transparent, but only 50% transparent when touched. Is there a way to style the RelativeLayout or ImageView directly without using an additional View?

Thanks in advance...

Answer 1

One way you could do it would be to add an onclick method for the ImageView and set a tag for it once it's grayed out and a ColorFilter to gray the view. Then you can un-gray it (provided you want the gray out to be toggled) when clicked again. Here's an example:

Add this to the xml:

<ImageView
   ...
   android:onClick="grayOut"/>

Then in the Activity or View class

public void grayOut(View view) {
  // if not grayed
  if(view.getTag() != "grayed") {
    view.setColorFilter(Color.argb(150,200,200,200));
    view.setTag("grayed");
  } else {
    view.setColorFilter(null);
    view.setTag("");
  }
}

Answer 2

Use a color filter with a transparent grey color on the view when touched and remove it when you want to remove the grey color. It will be imageView.setColorFilter(transparent grey color); When you want to remove it just set the color filter to null.