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.

CodeVsColor

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:

Android Project:

You might also like: