android - ejemplo - Agregar efecto dominó al elemento RecyclerView

recyclerview android studio ejemplo

Question

Estoy tratando de agregar Ripple Effect al elemento de RecyclerView. Eché un vistazo en línea, pero no pude encontrar lo que necesitaba. Supongo que tiene que ser un efecto personalizado. He intentado el atributo android: background para el RecyclerView y lo configuré como "? Android: selectableItemBackground" pero no funcionó .:

    <android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:clickable="true"
    android:background="?android:selectableItemBackground"
    android:id="@+id/recyclerView"
    android:layout_below="@+id/tool_bar"/>

Este es el RecyclerView al que estoy tratando de agregar el efecto:

Answer 1

Como ya se respondió, la solución más simple es agregar uno de los siguientes como fondo de la fila RecyclerView :

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

Sin embargo, si tiene problems con este método o si desea un control más fino sobre los colores, puede hacer lo siguiente.

Efecto ondulado personalizado

Esta respuesta comienza con este sencillo ejemplo de Android RecyclerView . Se verá como la siguiente imagen.

Agregar selector para dispositivos pre API 21

Antes de API 21 (Android 5.0 Lollipop), al hacer clic en un elemento RecyclerView solo se cambiaba el color de fondo (sin efecto dominó). Eso es lo que vamos a hacer también. Si todavía tiene usuarios con esos dispositivos, están acostumbrados a ese comportamiento, por lo que no nos preocuparemos demasiado por ellos. (Por supuesto, si realmente quieres el efecto dominó para ellos, también puedes usar una biblioteca personalizada ).

Haga clic con el botón derecho en su carpeta res/drawable y elija New> Drawable resource file . Llámalo custom_ripple . Haga clic en Aceptar y pegue el siguiente código.

custom_ripple.xml

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

Utilicé colorAccent como el color de resaltado para el estado presionado porque ya estaba disponible, pero puede definir el color que desee.

Agregue Ripple Effect para dispositivos API 21+

Haga clic con el botón derecho en su carpeta res/drawable y elija New> Drawable resource file . Llámalo custom_ripple nuevamente. Sin embargo, no hagas clic en Aceptar, pero esta vez. En la lista de calificadores disponibles, elija Versión , luego haga clic en el botón >> y escriba 21 para el nivel de API de plataforma . Ahora haga clic en Aceptar y pegue el siguiente código.

v21 / custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

Nuevamente, usé colorAccent para el color colorAccent porque estaba disponible, pero puede usar el color que desee. La máscara limita el efecto dominó solo al diseño de la fila. El color de la máscara aparentemente no importa, así que solo usé un blanco opaco.

Establecer como fondo

En el diseño raíz de su elemento RecyclerView, establezca el fondo en la onda personalizada que creamos.

android:background="@drawable/custom_ripple"

En el proyecto de ejemplo con el que comenzamos, se ve así:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/custom_ripple"
    android:padding="10dp">

    <TextView
        android:id="@+id/tvAnimalName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>

</LinearLayout>

Terminado

Eso es. Debería poder ejecutar su proyecto ahora. Gracias a esta respuesta y a este video de YouTube por ayuda.

Answer 2

Creo que hay un pequeño detalle que se pierde.

Si aún no obtiene el efecto dominó después de agregar android:background="?android:attr/selectableItemBackground" intente agregar estas líneas en la raíz del diseño.

android:clickable="true"
android:focusable="true"

Esto asegurará que se pueda hacer clic en la vista y habilitará el efecto dominó con el atributo de fondo mencionado anteriormente

Answer 3

Me di cuenta de. Lo único que tuve que hacer es agregar este atributo:

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

al elemento raíz del diseño que mi adaptador RecyclerView infla así:

<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="wrap_content"
                android:paddingTop="8dp"
                android:paddingBottom="8dp"
                android:background="?android:attr/selectableItemBackground"
                tools:background="@drawable/bg_gradient">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="17sp"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp"
        android:id="@+id/shoppingListItem"
        android:hint="@string/enter_item_hint"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/shopping_list_item_checkbox_label"
        android:id="@+id/shoppingListCheckBox"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:checked="false"/>
</RelativeLayout>

Resultado: