How to highlight ImageView when focused or clicked?

Question

A good example of this is either on the Twitter launch screen (the screen with the large icons that is seen when the application is first launch) or even just look at the application tray when you focus an application icon.

Basically I need to highlight an ImageView where the highlight contours to the image within the ImageView and looks like it's a border to that image. I would also like to customize the highlight to have it be a certain color and for it to fade out.

Thanks,

groomsy

Answer 1

You need to assign the src attribute of the ImageView a state list drawable. In other words, that state list would have a different image for selected, pressed, not selected, etc. - that's how the Twitter App does it.

So if you had an ImageView:

<ImageView style="@style/TitleBarLogo"
            android:contentDescription="@string/description_logo"
            android:src="@drawable/title_logo" />

The src drawable (title_logo.xml) would look like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/title_logo_pressed"/>
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/title_logo_pressed"/>
    <item android:state_focused="true" android:drawable="@drawable/title_logo_selected"/>
    <item android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/title_logo_default"/>
</selector>

The Google IO Schedule app has a good example of this.