Android Pull to Refresh with RecyclerView in Kotlin
Last Updated :
15 Dec, 2022
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:
Similar Reads
Pull to Refresh with RecyclerView in Android with Example
The SwipeRefreshLayout widget is used for implementing a swipe-to-refresh user interface design pattern. Where the user uses the vertical swipe gesture to refresh the content of the views. The vertical swipe is detected by the SwipeRefreshLayout widget and it displays a distinct progress bar and tri
7 min read
Android - RecyclerView as Staggered Grid with Kotlin
Staggered Grid View has been seen in most applications such as Pinterest in which each item of grid view takes its own height and aligns within the grid view according to that. In this article, we will look at how to implement Staggered Grid Layout Manager to our Recycler View in Android. Note: If y
5 min read
Android RecyclerView in Kotlin
In this article, you will know how to implement RecyclerView in Android using Kotlin . Before moving further let us know about RecyclerView. A RecyclerView is an advanced version of ListView with improved performance. When you have a long list of items to show you can use RecyclerView. It has the ab
4 min read
Android - SearchView with RecyclerView using Kotlin
Many apps display vast amounts of data within their in the form of a list and the user is not able to go through each item within the list to get the item that he wants. For filtering these lists within the android application we can use SearchView to filter it. In this article, we will be building
7 min read
Expandable RecyclerView in Android with Kotlin
In this article, we will get to know how to implement the expandable RecyclerView. In General, we will show the list of items in the listview but in some situations like if you want to show the sub-list items, then we have to use an expandable list. See the below image for a better understanding. ex
7 min read
Android - Swipe to Delete and Undo in RecyclerView with Kotlin
We have seen many android applications in which data is being displayed in the form of a list. If we want to delete any item from that recycler view we can simply swipe that item to delete it. We can see this type of feature in the Gmail application in which when an email is swiped to the right it i
7 min read
SearchView in Android with RecyclerView
Many apps represent data in the form of huge lists and for filtering these lists we have seen the SearchView present inside these apps. So for filtering this list of data we generally use a SearchView. In this article, we will take a look at the implementation of Search View in Android with a Recycl
10 min read
Implement Android Pull-to-Refresh with ListVIew using Kotlin
Swipe to Refresh Layout is used in most social media applications such as Facebook or Instagram. In these applications, users can simply swipe down to refresh the posts or feeds within the applications to load the new ones. Swipe to refresh layout detects vertical swipe and displays a progress bar.
7 min read
Two Dimensional RecyclerView in Android with Example
In many cases, we have to display the horizontally scrollable list in such a way that we also have to show headers on it to indicate the list belongs to which category. So for that, we have to create a two-dimensional Recycler-View in our app. In this article, we will take a look at creating a 2-dim
9 min read
Android - RecyclerView using GridLayoutManager with Kotlin
RecyclerView is an improved version of List View in which we can add customization to each item of our recycler view according to our requirements. We can change the orientation of our recycler view depending on our requirements. We can create a simple grid layout, vertical and horizontal recycler v
5 min read