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" ?>
< androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id = "@+id/container"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< 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(
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
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:layout_margin = "5dp"
app:cardCornerRadius = "5dp"
app:cardElevation = "4dp" >
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal" >
< 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" />
< 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
class CourseRVAdapter(
private val courseList: ArrayList<CourseRVModal>,
private val context: Context
) : RecyclerView.Adapter<CourseRVAdapter.CourseViewHolder>() {
override fun onCreateViewHolder(
parent: ViewGroup,
viewType: Int
): CourseRVAdapter.CourseViewHolder {
val itemView = LayoutInflater.from(parent.context).inflate(
R.layout.course_rv_item,
parent, false
)
return CourseViewHolder(itemView)
}
override fun onBindViewHolder(holder: CourseRVAdapter.CourseViewHolder, position: Int) {
holder.courseNameTV.text = courseList.get(position).courseName
holder.courseIV.setImageResource(courseList.get(position).courseImg)
}
override fun getItemCount(): Int {
return courseList.size
}
class CourseViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
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() {
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)
swipeRefreshLayout = findViewById(R.id.container)
courseRV = findViewById(R.id.idRVCourses)
courseList = ArrayList()
courseRVAdapter = CourseRVAdapter(courseList, this )
courseRV.adapter = courseRVAdapter
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))
courseRVAdapter.notifyDataSetChanged()
swipeRefreshLayout.setOnRefreshListener {
swipeRefreshLayout.isRefreshing = false
Collections.shuffle(courseList, Random(System.currentTimeMillis()))
courseRVAdapter.notifyDataSetChanged()
}
}
}
|
Now run your application to see the output of it.
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...