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 version = "1.0" encoding = "utf-8" ?>
<!--on below line we are creating a swipe to refresh layout--> < androidx.swiperefreshlayout.widget.SwipeRefreshLayout
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.
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 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" >
<!--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.
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.
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: