android - Touch feedback con RecyclerView y CardView

android-recyclerview android-cardview

Question

Me encantaría habilitar los comentarios táctiles para mi biblioteca de código abierto.

CardView RecyclerView y CardView . CardView contiene diferentes áreas con diferentes acciones onClick . Ahora me encantaría activar el efecto Ripple si un usuario hace clic en algún lugar de la tarjeta, pero no puedo lograr este comportamiento.

Este es mi elemento de lista, también lo puedes encontrar en GitHub: https://github.com/mikepenz/AboutLibraries/blob/master/library/src/main/res/layout/listitem_opensource.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:background="@drawable/button_rect_normal"/>

<LinearLayout
    android:padding="6dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:gravity="center_vertical"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/libraryName"
            android:textColor="@color/title_openSource"
            android:textSize="@dimen/textSizeLarge_openSource"
            android:textStyle="normal"
            android:layout_width="0dp"
            android:layout_weight="5"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"/>

        <TextView
            android:id="@+id/libraryCreator"
            android:textColor="@color/text_openSource"
            android:textStyle="normal"
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:gravity="right"
            android:maxLines="2"
            android:textSize="@dimen/textSizeSmall_openSource"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginTop="4dp"
        android:background="@color/dividerLight_openSource"/>

    <TextView
        android:id="@+id/libraryDescription"
        android:textSize="@dimen/textSizeSmall_openSource"
        android:textStyle="normal"
        android:textColor="@color/text_openSource"
        android:padding="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="20">
    </TextView>

    <View
        android:id="@+id/libraryBottomDivider"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginTop="4dp"
        android:background="@color/dividerLight_openSource"/>

    <LinearLayout
        android:id="@+id/libraryBottomContainer"
        android:gravity="center_vertical"
        android:paddingLeft="8dp"
        android:paddingTop="4dp"
        android:paddingRight="8dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/libraryVersion"
            android:textColor="@color/text_openSource"
            android:textStyle="normal"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:maxLines="1"
            android:textSize="@dimen/textSizeSmall_openSource"/>

        <TextView
            android:id="@+id/libraryLicense"
            android:textColor="@color/text_openSource"
            android:textStyle="normal"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:maxLines="1"
            android:textSize="@dimen/textSizeSmall_openSource"/>
    </LinearLayout>
</LinearLayout>

Y el onClick está configurado en 3 partes de este diseño. libraryCreator , libraryDescription y libraryBottomContainer .

Espero que alguien tenga una idea de lo que está mal aquí.

Gracias por tu ayuda.

Answer 1

Ahora pude resolver el problema.

El problema es que uso onClickListener en TextViews y este escucha de clic evita que se notifique al RippleForeground sobre el evento táctil. Entonces la solución es implementar un TouchListener en esos TextViews y pasar por el evento táctil.

La clase es realmente simple y puede usarse en todas partes:

package com.mikepenz.aboutlibraries.util;

import android.support.v7.widget.CardView;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by mikepenz on 16.04.15.
 */
public class RippleForegroundListener implements View.OnTouchListener {
    CardView cardView;

    public RippleForegroundListener setCardView(CardView cardView) {
        this.cardView = cardView;
        return this;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // Convert to card view coordinates. Assumes the host view is
        // a direct child and the card view is not scrollable.
        float x = event.getX() + v.getLeft();
        float y = event.getY() + v.getTop();

        if (android.os.Build.VERSION.SDK_INT >= 21) {
            // Simulate motion on the card view.
            cardView.drawableHotspotChanged(x, y);
        }

        // Simulate pressed state on the card view.
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                cardView.setPressed(true);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                cardView.setPressed(false);
                break;
        }

        // Pass all events through to the host view.
        return false;
    }
}

Se puede usar agregando esto como TouchListener:

RippleForegroundListener rippleForegroundListener = new RippleForegroundListener();
older.libraryCreator.setOnTouchListener(rippleForegroundListener);

Este oyente simplemente pasará por el evento táctil al CardView y activará el efecto Ripple correcto. (También puede modificar esto para tomar cualquier vista. No debe limitarse a una vista de tarjeta)

Answer 2

Asumiendo que está usando el tema Material / Appcompat y Lollipop, hice que esto funcione al hacer que CardView tenga los siguientes atributos:

android:focusable="true"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"

Answer 3

CardLayout es solo una subclase de ViewGroup, entonces configuración:

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

debería hacer el truco.

ACTUALIZAR:

(Parece que está intentando usar un color de rizado personalizado).

Intente usar un dibujo ondulable con un color personalizado como fondo (no lo he usado, así que no puedo verificar este comportamiento). Consulte: la documentation o esta question para comenzar.

Answer 4

En mi caso, también tuve que mostrar un fondo personalizado y un efecto dominó. Entonces, la forma en que logré esto es aplicando estos dos atributos en el diseño raíz de mi elemento de vista de reciclador:

android:background="@drawable/custom_bg"
android:foreground="?android:attr/selectableItemBackground"

Answer 5

Ninguna de las respuestas anteriores funcionó para mí o fue demasiado complicada.

Entonces me di cuenta de que tenía que establecer las siguientes propiedades en EL DISEÑO DEL ADAPTADOR DE RECYCLERVIEW.

android:background="?android:attr/selectableItemBackground"
android:focusable="true"
android:clickable="true"

Luego lo hice funcionar.

Answer 6

Tenía el mismo problema que Jiang:

Tengo que establecer los atributos para el archivo de diseño, que está inflando el RecycleView.

Mi diseño principal: ( ¡No agregue las propiedades aquí!)

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">


<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</RelativeLayout>

Mi RecycleViewAdapter:

            View v = inflater.inflate(R.layout.list_center_item, parent, false);

Mi list_center_item.xml (¡ Agregue las propiedades aquí! )

<?xml version="1.0" encoding="utf-8"?>


<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"


android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
/>

Answer 7

para mi:

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

finalmente lo hizo funcionar. vea el fondo de recyclerView / content detrás del artículo, y también vea el efecto dominó utilizado con recyclerView.

Answer 8

CardView agregar las siguientes líneas en el diseño que está utilizando en CardView

android:clickable="true"
android:focusable="true"
android:background="@drawable/my_ripple"

Ejemplo

<android.support.v7.widget.CardView android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="@drawable/my_ripple">

Answer 9

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

Si usa fondo en primer plano en lugar de fondo, no necesita utilizar clicable o enfocable