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?

Transudate

I believe you can put your LinearLayout into FrameLayout and set foreground attribute for it. – Adviser

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.

Transudate

For the default blue color, you can use this: ?android:attr/selectableItemBackground. – Schottische

This works great, and as @Transudate mentioned it, I used alpha 30% to make it look like highlight (30% alpha = 4D in hex). – Amatory

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>

Tinned

Thanks. Might work great for static images. More difficult to implement if the images are from a database or downloaded. – Transudate

You are right. But you did not mention this. For being more dynamic you can programm the selector. Here you can find a good example (the accepted answer). – Tinned