Efecto Ripple en Android Lollipop CardView

android-layout android-5.0-lollipop

Question

Estoy tratando de obtener un CardView para mostrar el efecto dominó cuando se toca estableciendo el atributo android: backgound en el archivo XML de actividad como se describe here en la página de Desarrolladores de Android, pero no está funcionando. Sin animación, pero se llama al método en onClick. También intenté crear un archivo ripple.xml como se sugiere here , pero el mismo resultado.

CardView tal como aparece en el archivo XML de la actividad:

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="155dp"
android:layout_height="230dp"
android:elevation="4dp"
android:translationZ="5dp"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:onClick="showNotices"
android:background="?android:attr/selectableItemBackground"
android:id="@+id/notices_card"
card_view:cardCornerRadius="2dp">
</android.support.v7.widget.CardView>

Soy relativamente nuevo en el desarrollo de Android, por lo que podría haber cometido algunos errores obvios.
Gracias por adelantado.

Answer 1

Agregue estos dos como código funcionan como un amuleto para cualquier vista como Botón, Diseño lineal o CardView Simplemente ponga estas dos líneas y vea la magia ...

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

Answer 2

Deberías agregar lo siguiente a CardView :

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

Answer 3

El efecto dominó se omitió en la biblioteca de soporte de appcompat, que es lo que estás usando. Si desea ver la onda, use la versión Android L y pruébela en un dispositivo con Android L. Por el sitio de AppCompat v7:

"¿Por qué no hay ondas en pre-Lollipop? Mucho de lo que permite que RippleDrawable funcione sin problemas es el nuevo RenderThread de Android 5.0. Para optimizar el rendimiento en versiones anteriores de Android, hemos dejado RippleDrawable por el momento".

Mira este enlace here para más información

Answer 4

Evento de ondulación para control Cardview Android:

<android.support.v7.widget.CardView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true" android:layout_marginBottom="4dp"
android:layout_marginTop="4dp" >
</android.support.v7.widget.CardView>

Answer 5

Me las arreglé para obtener el efecto dominó en el cardview por:

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:clickable="true"
android:foreground="@drawable/custom_bg"/>

y para custom_bg que puede ver en el código anterior, debe definir un archivo xml para los dispositivos tanto lollipop (en el paquete drawable-v21) como pre-lollipop (en el paquete dibujable). para custom_bg en el paquete drawable-v21 el código es:

<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item
android:id="@android:id/mask"
android:drawable="@android:color/white"/>
</ripple>

para custom_bg en el paquete dibujable, el código es:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="@color/colorHighlight"></solid>
</shape>
</item>
<item>
<shape>
<solid android:color="@color/navigation_drawer_background"></solid>
</shape>
</item>
</selector>

por lo tanto, en los dispositivos pre-piruletas tendrá un efecto de clic sólido y en los dispositivos piruletas tendrá un efecto dominó en la vista card.

Answer 6

No estaba contento con AppCompat, así que escribí mi propio CardView y las ondas backported. Aquí funciona en Galaxy S con Gingerbread, por lo que definitivamente es posible.

Para más detalles, consulte la demo .

Answer 7

Para aquellos que buscan una solución al problema del efecto dominó que no funciona en un CardView creado programáticamente (o en mi caso vista personalizada que extiende CardView) que se muestra en un RecyclerView, lo siguiente funcionó para mí. Básicamente, declarar declarativamente los atributos XML mencionados en las otras respuestas de forma declarativa en el archivo de diseño XML no parece funcionar para un CardView creado mediante programación, o uno creado a partir de un diseño personalizado (incluso si la vista raíz es CardView o se usa elemento de fusión), tienen que establecerse programáticamente de esta manera:

private class MadeUpCardViewHolder extends RecyclerView.ViewHolder {
private MadeUpCardView cardView;
public MadeUpCardViewHolder(View v){
super(v);
this.cardView = (MadeUpCardView)v;
// Declaring in XML Layout doesn''t seem to work in RecyclerViews
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
int[] attrs = new int[]{R.attr.selectableItemBackground};
TypedArray typedArray = context.obtainStyledAttributes(attrs);
int selectableItemBackground = typedArray.getResourceId(0, 0);
typedArray.recycle();
this.cardView.setForeground(context.getDrawable(selectableItemBackground));
this.cardView.setClickable(true);
}
}
}

Donde MadeupCardView extends CardView Kudos a esta respuesta para la parte TypedArray .

Answer 8

Para mí, agregar el foreground a CardView no funcionó (razón desconocida: /)

Agregar el mismo a su diseño infantil hizo el truco.

CÓDIGO:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:focusable="true"
android:clickable="true"
card_view:cardCornerRadius="@dimen/card_corner_radius"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:id="@+id/card_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
android:padding="@dimen/card_padding">
</LinearLayout>
</android.support.v7.widget.CardView>

Answer 9

Si hay un diseño raíz como RelativeLayout o LinearLayout que contienen todo el componente del elemento adaptador en CardView, debe establecer el atributo de fondo en ese diseño raíz. me gusta:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/touch_bg"/>
</android.support.v7.widget.CardView>

Answer 10

Si la aplicación minSdkVersion que está trabajando es de nivel 9, puede usar:

android:foreground="?selectableItemBackground"
android:clickable="true"

En cambio, a partir del nivel 11, utiliza:

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

De la documentación:

clickable : define si esta vista reacciona a los eventos de clic. Debe ser un valor booleano, ya sea "verdadero" o "falso".

foreground : define el dibujable para dibujar sobre el contenido. Esto se puede usar como una superposición. El primer plano dibujable participa en el relleno del contenido si la gravedad está configurada para llenarse.

Answer 11

Agregue estos dos códigos de línea en su vista xml para dar un efecto dominó a su cardView.

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

Answer 12

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

Solo funciona api 21 y usa esto no usa esta vista de lista de filas