Blue highlight over an ImageView when the user taps it

Question

I have a LinearLayout "card" with an ImageView and a TextView. I want the card to be highlighted when the user taps it. See http://www.youtube.com/watch?v=Yx1l9Y7GIk8&feature=share&t=15m17s for an example.

This is easily done for the TextView by setting android:background="@drawable/blue_highlight". Below is res/drawable/blue_highlight.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true" android:drawable="@color/selected"/>
  <item android:state_pressed="true" android:drawable="@color/pressed"/>
  <item android:drawable="@color/bg_window"/>
</selector>

But this does not work for the ImageView because the image is in front and the background is not visible. How can I have the touch highlight effect with a semi-transparent color for an ImageView?

Answer 1

Amazingly, FrameLayout has the foreground attribute which can be used for this. The disadvantage is that you have to add an extra FrameLayout element. The implementation is simple, so until you have time to implement fancy image processing (de-colorize the image a bit, then apply the highlight) and building state drawables dynamically, this seems good enough.

So in my case this would be:

<FrameLayout
    android:foreground="@drawable/blue_highlight_image"
    >
  <ImageView ...>
</FrameLayout>

@drawable/blue_highlight_image uses a new @color/pressed_image value which is similar with @color/pressed but has an alpha channel, for example: #81CFEB -> #AA81CFEB.

Thanks @Vang for the suggestion.

Answer 2

You are on the right way. Try to use the blue_highlight.xml as your drawable but instead using colors in there use the image you want to show and define a second drawable that adds a color filter to the image when highlighted.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true" android:drawable="@drawable/yourdrawable_with_colorfilter"/>
  <item android:state_pressed="true" android:drawable="@drawable/yourdrawable_with_colorfilter"/>
  <item android:drawable="@drawable/your_drawable"/>
</selector>