How to add pull to refresh/ swipe refresh in an Android project in Kotlin

How to add pull to refresh/ swipe refresh in an Android project in Kotlin:

In this post, I will show you how we can implement pull to refresh in an Android studio project. Pull-to-refresh widget is used in lists like RecyclerView where we don’t have any other way to update the list. For example, if we load one recyclerview with a set of data, and if the data is updated on server, we have to restart the App to fetch and load the new set of data.

Pull-to-refresh enables users to pull down the screen to load new data and update a recyclerview. This widget is commonly used in almost all applications like social media, news etc.

Android Project:

We are using the same android project we used in our previous tutorials. You can check the other past tutorials to learn what we did.

Swipe to refresh is a widget we need to add to our Android project separately. Add the below dependency line to your app level build.gradle file :

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"

Sync your project. It will add SwipeRefreshLayout to the Android project.

Create one SwipeRefreshLayoue variable in the MainActivity class:
```
private lateinit var swipeRefresh: SwipeRefreshLayout
```

In the xml file of ActivityMain, i.e. activity_main.xml, add SwipeRefreshLayout component above RecyclerView in the ConstraintLayout :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
tools:context=".MainActivity">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/swipeRefresh">
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="1dp"
    android:layout_marginLeft="1dp"
    android:layout_marginTop="25dp"
    android:layout_marginEnd="1dp"
    android:layout_marginRight="1dp"
    android:layout_marginBottom="1dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

In the onCreate method of MainActivity, initialize swipeRefresh variable and set one refresh listener to it.

swipeRefresh = findViewById(R.id.swipeRefresh)

swipeRefresh.setOnRefreshListener {
    getAllData()
}

So, everything is handled. We just need to use the setOnRefreshListener listener.

But we need to stop the animation once we receive data from the API.

fun getAllData(){
        ....
        if(swipeRefresh.isRefreshing){
            swipeRefresh.isRefreshing = false
        }
        ...
        ....
        ...
    }

Here, we are stopping the refreshing of SwipeRefreshLayout if it is refreshing. It is checked by isRefreshing boolean value and we are assigning it to false to stop the refreshing.

Source code:

You can download the source code from Github here: https://github.com/nkaushikd/recyclerview-kotlin

checkout this tag : tut-swiperefresh

git clone https://github.com/nkaushikd/recyclerview-kotlin.git git checkout tags/tut-swiperefresh

CodeVsColor

How to add pull to refresh/ swipe refresh in an Android project in Kotlin