¿Cómo resaltar ImageView cuando se enfoca o se hace clic?

Un buen ejemplo de esto es la pantalla de inicio de Twitter (la pantalla con los íconos grandes que se ve cuando la aplicación se inicia por primera vez) o simplemente mire la bandeja de la aplicación cuando enfoca el ícono de una aplicación.

Básicamente, necesito resaltar un ImageView donde el resaltado se contornea a la imagen dentro de ImageView y parece que es un borde de esa imagen. También me gustaría personalizar el resaltado para que tenga un color determinado y se desvanezca.

Gracias,

acicalado

Tienes que asignar el src atributo de la ImageView una lista de estados dibujable. En otras palabras, esa lista de estados tendría una imagen diferente para seleccionado, presionado, no seleccionado, etc. – así es como lo hace la aplicación de Twitter.

Entonces, si tuviera un ImageView:

<ImageView style="@style/TitleBarLogo"
            android:contentDescription="@string/description_logo"
            android:src="https://stackoverflow.com/questions/4185930/@drawable/title_logo" />

El src dibujable (title_logo.xml) se vería así:

<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>

los Aplicación Google IO Schedule tiene un buen ejemplo de esto.

Si no tiene otro dibujable para el estado presionado, puede usar setColorFilterpara lograr un efecto de tinte simple.

Se comporta como un selector de estado presionado, por lo que cuando se presiona la imagen, cambia el fondo a un color gris claro.

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;
        }
    });

Maneja el movimiento del dedo fuera de los límites de la vista, por lo tanto, si ocurre, restaura un fondo predeterminado.

es importante volver false de onTouch método cuando quieras apoyar onClickListner también.

Use selectableItemBackground como fondo:

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

Esta es una extensión de mklimek. No pude hacer que funcionara correctamente a partir de su fragmento. edité un poco

 ImageView testImage = (ImageView)findViewById(R.id.imageView);
 testImage.setOnTouchListener(listener);

 View.OnTouchListener listener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {


            ImageView image = (ImageView) v;
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    image.getDrawable().setColorFilter(0x77000000,PorterDuff.Mode.SRC_ATOP);
                    image.invalidate();                        
                    break;

                case MotionEvent.ACTION_UP:                        
                case MotionEvent.ACTION_CANCEL: {
                    //clear the overlay
                    image.getDrawable().clearColorFilter();
                    image.invalidate();
                    break;
                }
            }

            return true;
        }
    };

Para mostrar imágenes dinámicas, puede usar un LayerDrawable para la fuente de la imagen.

LayerDrawable d = new LayerDrawable(new Drawable[]{new BitmapDrawable(myBmp), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);

Solo para completar la respuesta de Josh Clemm. También puede mantener la misma imagen definida por src, pero cambiar o resaltar solo el fondo. Esto sería más o menos así:

logo_box.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/background_normal"/>
    <item android:state_pressed="false" android:drawable="@drawable/background_pressed"/>
</selector>

Y luego definiendo el fondo de su botón como logo_box:

<ImageView
    android:contentDescription="@string/description_logo"
    android:src="https://stackoverflow.com/questions/4185930/@drawable/logo"
    android:background="@drawable/logo_box" />

Donde background_normal y background_pressed pueden ser tan complejos como quieras, o tan simples como un @color 🙂

Mi solución, atributo personalizado para ImageView:
https://github.com/henrychuangtw/Android-ImageView-hover

Paso 1: declarar-estilo

<declare-styleable name="MyImageViewAttr">
    <attr name="hover_res" format="reference" />
</declare-styleable>

Paso 2: ImageView personalizado

public class MyImageView extends ImageView {

int resID, resID_hover;

public MyImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}
public MyImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub

    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
    resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
    if(resID_hover != -1){
        int[] attrsArray = new int[] {
                android.R.attr.src 
            };

        TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
        resID = ta.getResourceId(0 , View.NO_ID);           
        ta.recycle();

        setOnTouchListener(listener_onTouch);
    }

    array.recycle();

}
public MyImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    // TODO Auto-generated constructor stub
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
    resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
    if(resID_hover != -1){
        int[] attrsArray = new int[] {
                android.R.attr.src 
            };

        TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
        resID = ta.getResourceId(0 , View.NO_ID);           
        ta.recycle();

        setOnTouchListener(listener_onTouch);
    }

    array.recycle();
}



OnTouchListener listener_onTouch = new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            setImageResource(resID_hover);
            break;

        case MotionEvent.ACTION_MOVE:

            break;

        case MotionEvent.ACTION_UP:
            setImageResource(resID);
            break;

        default:
            break;
        }


        return false;
    }
};

}

Paso 3: declarar myattr: xmlns:myattr=”http://schemas.android.com/apk/res-auto” en el diseño xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:myattr="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

Paso 4: configura myattr:hover_res para MyImageView

<dev.henrychuang.component.MyImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        myattr:hover_res="@drawable/icon_home_h"
        android:src="https://stackoverflow.com/questions/4185930/@drawable/icon_home"/>