Crear animación flotante para elementos RecyclerView en Android

En Android, RecyclerView es un elemento de la interfaz de usuario que se usa para mostrar un tipo de elementos de diseño en forma de lista. Esta lista es desplazable y se puede hacer clic en cada elemento de la lista. Puede encontrar más información sobre cómo crear RecyclerView en este artículo: RecyclerView en Android con ejemplo . RecyclerView por defecto no tiene animación de entrada o salida. Sin embargo, las animaciones se pueden crear y aplicar a un RecyclerView. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin. 

Entonces, en este artículo, le mostraremos cómo puede agregar una animación de entrada a un RecyclerView en Android. Siga los pasos a continuación una vez que el IDE esté listo, pero primero, es importante comprender la aplicación que creamos y explicamos en este artículo.

Comprender la estructura de la aplicación

La aplicación recuerda un RecyclerView básico en el archivo activity_main.xml . Los elementos que se muestran en RecyclerView son una array de strings generadas en el código principal. El diseño del elemento RecyclerView es recycler_view_item_layout.xml y el adaptador RecyclerView es MyAdapter.kt . El código principal es MainActivity.kt, donde se implementa el adaptador para enviar las strings generadas a RecyclerView.

La animación, es decir , right_to_left.xml y el diseño de animación, es decir   , layout_right_to_left.xml , se crean en la carpeta anim . Para crear una carpeta anim, haga clic derecho en la carpeta res, seleccione nueva, haga clic en Directorio de recursos de Android. Aparece una ventana Nuevo directorio de recursos. Establezca el nombre del directorio como anim , el tipo de recurso como transición y haga clic en Aceptar. Una vez que se crea la carpeta anim, haga clic con el botón derecho en ella, seleccione nuevo y haga clic en Archivo de recursos de animación. Establezca el Nombre de archivo como de derecha a izquierda y Elemento raíz para configurar y haga clic en Aceptar. Repita el mismo proceso para layout_right_to_left, asígnele un nombre y establezca el elemento raíz en layoutAnimationy haga clic en Aceptar. Ahora tanto los archivos de diseño de animación como los de animación están listos. La animación está programada dentro de right_to_left.xml y el diseño de la animación en layout_right_to_left.xml . La animación se llamaría estáticamente en el archivo de diseño de animación y el archivo de diseño de animación se llamaría dinámicamente en el código principal para aplicar este diseño a RecyclerView.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: Trabajando en anim > right_to_left.xml

A continuación se muestra un ejemplo de código de animación de derecha a izquierda. Esta animación comenzaría y se completaría en 0,5 segundos/500 milisegundos.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromXDelta="100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toXDelta="0" />
    <alpha
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

Paso 3: anim > layout_right_to_left.xml

A continuación se muestra un código de diseño simple. La animación anterior se agrega en los atributos de diseño. El retraso se aplica a los siguientes elementos para que no aparezcan todos a la vez.

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/right_to_left"
    android:animationOrder="normal"
    android:delay="15%" />

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Agregue un RecyclerView y un botón flotante como se muestra a continuación. RecyclerView se usaría para mostrar las strings y Button se usaría para mostrar RecyclerView al hacer clic.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floating_button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="20sp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20sp"/>
 
</RelativeLayout>

Paso 5: recycler_view_item_layout.xml

El código de disposición del artículo se muestra a continuación. Consiste en un TextView para mostrar una string.

<?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:weightSum="2">
 
    <TextView
        android:id="@+id/text_view_rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:layout_weight="1"/>
 
</LinearLayout>

Paso 6: trabajar con el archivo MyAdapter.kt

El siguiente código es para el adaptador RecyclerView. La explicación de un código similar está disponible en el artículo mencionado en la introducción de este artículo.

package org.geeksforgeeks.recyclerviewfloatanimation
 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
 
class MyAdapter(mData: ArrayList<String>): RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    private val mDataCopy = mData
    inner class ViewHolder(view: View): RecyclerView.ViewHolder(view), View.OnClickListener {
 
        val tvCard: TextView = view.findViewById(R.id.text_view_rv)
 
        override fun onClick(v: View?) {
            TODO("Not yet implemented")
        }
    }
 
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
 
        return ViewHolder(
            LayoutInflater.from(parent.context)
            .inflate(R.layout.recycler_view_item_layout, parent, false))
    }
 
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvCard.text = mDataCopy[position]
    }
 
    override fun getItemCount(): Int {
        return mDataCopy.size
    }
}

Paso 7: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package org.geeksforgeeks.recyclerviewfloatanimation
 
import android.annotation.SuppressLint
import android.os.Bundle
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.floatingactionbutton.FloatingActionButton
 
class MainActivity : AppCompatActivity() {
    @SuppressLint("NotifyDataSetChanged")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Declaring and initializing the
        // RecyclerView from the layout file
        val mRecyclerView = findViewById<RecyclerView>(R.id.recycler_view_1)
        mRecyclerView.layoutManager = LinearLayoutManager(this)
 
        // Generating data (array of strings)
        val mDataArray = mGenerateData()
 
        // Initializing the adapter
        val mAdapter = MyAdapter(mDataArray)
 
        // Declaring and initializing the
        // Floating Button from the layout file
        val mFloatingButton = findViewById<FloatingActionButton>(R.id.floating_button_1)
         
        // When Button is clicked, animation is applied
        // to the RecyclerView and RecyclerView is displayed
        mFloatingButton.setOnClickListener{
            val controller = AnimationUtils.loadLayoutAnimation(this, R.anim.layout_right_to_left)
            mRecyclerView.layoutAnimation = controller
            mAdapter.notifyDataSetChanged()
            mRecyclerView.scheduleLayoutAnimation()
            mRecyclerView.adapter = mAdapter
        }
    }
 
    // Sample function to return array
    // of strings (Item 1, Item 2, Item 3,.....)
    private fun mGenerateData(): ArrayList<String> {
        val mArrayList = arrayListOf<String>()
        for (i in 0..10) {
            mArrayList.add("Item $i")
        }
        return mArrayList
    }
}

Producción:

Puede ver que la animación se aplica a los elementos de RecyclerView al hacer clic en el botón flotante.