Android Pull to Refresh with RecyclerView in Kotlin
Pull to Refresh is used to update the data within the list in our android application. For implementing this we have to use Swipe to Refresh Layout. Using this widget when the user swipes down the list which is being displayed on the screen is updated. In this article, we will be building a simple application in which we will be displaying a list view inside which we will be implementing a pull to refresh within our application.
Note: If you want to implement Pull to Refresh with RecyclerView using Java. Check out the following article: Pull to Refresh with RecyclerView in Android with Example
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Adding dependencies in build.gradle file
Navigate to Gradle Scripts > build.gradle file and add below dependency in build.gradle file in the dependencies section.
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
After adding this dependency simply sync your project to install it.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<? 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 > |
Step 4: Creating a modal class for storing our data
Navigate to app>java>your app’s package name>Right click on it>New>Kotlin class and name the file as CourseRVModal and add the below code to it. Comments are added in the code to get to know in detail.
Kotlin
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 ) |
Step 5: Creating an item for displaying in our RecyclerView
Navigate to app>res>layout>Right click on it>New Layout resource file and name it as course_rv_item and add the below code to it. Comments are added in the code to get to know in detail.
XML
<? 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 > |
Step 6: Creating a new Adapter class for setting data to every item of RecyclerView.
Navigate to app>java>your app’s package name>Right click on it>New>Kotlin class and name it as CourseRVAdapter and add the below code to it. Comments are added in the code to get to know in detail.
Kotlin
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) } } |
Step 7: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
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 with 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() } } } |
Now run your application to see the output of it.
Output: