How to highlight ImageView when focused or clicked? How to highlight ImageView when focused or clicked? android android

How to highlight ImageView when focused or clicked?


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.


If you don't have another drawable for the pressed state you can use setColorFilterto achieve a simple tint effect.

It behaves just like pressed state selector so when the image is pressed it changes the background to light grey color.

final ImageView image = (ImageView) findViewById(R.id.my_image);image.setOnTouchListener(new View.OnTouchListener() {        private Rect rect;        @Override        public boolean onTouch(View v, MotionEvent event) {            if(event.getAction() == MotionEvent.ACTION_DOWN){                image.setColorFilter(Color.argb(50, 0, 0, 0));                rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());            }            if(event.getAction() == MotionEvent.ACTION_UP){                image.setColorFilter(Color.argb(0, 0, 0, 0));            }            if(event.getAction() == MotionEvent.ACTION_MOVE){                if(!rect.contains(v.getLeft() + (int) event.getX(), v.getTop() + (int) event.getY())){                    image.setColorFilter(Color.argb(0, 0, 0, 0));                }             }            return false;        }    });

It handles moving finger outside the view boundaries, thus if it occurs, it restores a default background.

It's important to return false from onTouch method when you want to support onClickListner too.


Use selectableItemBackground as a background:

android:background="?android:attr/selectableItemBackground"