Android Pull to Refresh con RecyclerView en Kotlin

Pull to Refresh se usa para actualizar los datos dentro de la lista en nuestra aplicación de Android. Para implementar esto, tenemos que usar Swipe to Refresh Layout. El uso de este widget cuando el usuario desliza hacia abajo la lista que se muestra en la pantalla se actualiza. En este artículo, construiremos una aplicación simple en la que mostraremos una vista de lista dentro de la cual implementaremos un pull para actualizar dentro de nuestra aplicación. 

Nota : si desea implementar Pull to Refresh con RecyclerView usando Java. Consulte el siguiente artículo: Tire para actualizar con RecyclerView en Android con ejemplo

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 . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: Agregar dependencias en el archivo build.gradle

Vaya a Gradle Scripts > archivo build.gradle y agregue la dependencia a continuación en el archivo build.gradle en la sección de dependencias. 

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"

Después de agregar esta dependencia, simplemente sincronice su proyecto para instalarlo. 

Paso 3: 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 . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<!--on below line we are creating a swipe to refresh layout-->
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--on below line we are creating a
        recycler view for displaying our courses-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVCourses"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
 
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Paso 4: Crear una clase modal para almacenar nuestros datos 

Vaya a aplicación>java>nombre del paquete de su aplicación>haga clic con el botón derecho en él>Nuevo>clase Kotlin y nombre el archivo como CourseRVModal y agregue el código a continuación. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
data class CourseRVModal(
    // on below line we are creating a two variable one
    // for course name and other for course image.
    var courseName: String,
    var courseImg: Int
)

Paso 5: crear un elemento para mostrar en nuestro RecyclerView

Vaya a app>res>layout>Haga clic con el botón derecho en él>Nuevo archivo de recursos de diseño y asígnele el nombre Course_rv_item y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
       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="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="4dp">
     
      <!--on below line we are creating a
        linear layout for grid view item-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
 
        <!--on below line we are creating a simple image view-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:padding="5dp"
            android:src="@mipmap/ic_launcher" />
 
        <!--on below line we are creating a simple text view-->
        <TextView
            android:id="@+id/idTVCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:padding="4dp"
            android:text="@string/app_name"
            android:textAlignment="textStart"
            android:textColor="@color/black"
            android:textStyle="bold"
            tools:ignore="RtlCompat" />
 
    </LinearLayout>
 
</androidx.cardview.widget.CardView>

Paso 6: crear una nueva clase de adaptador para configurar datos en cada elemento de RecyclerView. 

Vaya a aplicación>java>nombre del paquete de su aplicación>haga clic con el botón derecho en él>Nuevo>clase Kotlin y asígnele el nombre CourseRVAdapter y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
 
// on below line we are creating a course rv adapter class.
class CourseRVAdapter(
    // on below line we are passing variables
    // as course list and context
    private val courseList: ArrayList<CourseRVModal>,
    private val context: Context
) : RecyclerView.Adapter<CourseRVAdapter.CourseViewHolder>() {
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): CourseRVAdapter.CourseViewHolder {
        // this method is use to inflate the layout file
        // which we have created for our recycler view.
        // on below line we are inflating our layout file.
        val itemView = LayoutInflater.from(parent.context).inflate(
            R.layout.course_rv_item,
            parent, false
        )
        // at last we are returning our view holder
        // class with our item View File.
        return CourseViewHolder(itemView)
    }
 
    override fun onBindViewHolder(holder: CourseRVAdapter.CourseViewHolder, position: Int) {
        // on below line we are setting data to our text view and our image view.
        holder.courseNameTV.text = courseList.get(position).courseName
        holder.courseIV.setImageResource(courseList.get(position).courseImg)
    }
 
    override fun getItemCount(): Int {
        // on below line we are returning
        // our size of our list
        return courseList.size
    }
 
    class CourseViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // on below line we are initializing our course name text view and our image view.
        val courseNameTV: TextView = itemView.findViewById(R.id.idTVCourse)
        val courseIV: ImageView = itemView.findViewById(R.id.idIVCourse)
    }
}

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 com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.RecyclerView
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
import java.util.*
import kotlin.collections.ArrayList
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating variables for our swipe
    // to refresh layout, recycler view, adapter and list.
    lateinit var swipeRefreshLayout: SwipeRefreshLayout
    lateinit var courseRV: RecyclerView
    lateinit var courseRVAdapter: CourseRVAdapter
    lateinit var courseList: ArrayList<CourseRVModal>
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // on below line we are initializing our views ith their ids.
        swipeRefreshLayout = findViewById(R.id.container)
        courseRV = findViewById(R.id.idRVCourses)
 
        // on below line we are initializing our list
        courseList = ArrayList()
 
        // on below line we are initializing our adapter
        courseRVAdapter = CourseRVAdapter(courseList, this)
 
        // on below line we are setting adapter to our recycler view.
        courseRV.adapter = courseRVAdapter
 
        // on below line we are adding data to our list
        courseList.add(CourseRVModal("Android Development", R.drawable.android))
        courseList.add(CourseRVModal("C++ Development", R.drawable.c))
        courseList.add(CourseRVModal("Java Development", R.drawable.java))
        courseList.add(CourseRVModal("Python Development", R.drawable.python))
        courseList.add(CourseRVModal("JavaScript Development", R.drawable.js))
 
        // on below line we are notifying adapter
        // that data has been updated.
        courseRVAdapter.notifyDataSetChanged()
 
        // on below line we are adding refresh listener
        // for our swipe to refresh method.
        swipeRefreshLayout.setOnRefreshListener {
 
            // on below line we are setting is refreshing to false.
            swipeRefreshLayout.isRefreshing = false
 
            // on below line we are shuffling our list using random
            Collections.shuffle(courseList, Random(System.currentTimeMillis()))
 
            // on below line we are notifying adapter
            // that data has changed in recycler view.
            courseRVAdapter.notifyDataSetChanged()
        }
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: