Implementing Pull To Refresh In Android With Example

Do you want to refresh the layout or screen easily? Then, use this Swipe to Refresh Layout to refresh the layout by pulling the screen from the top.

Android SwipeRefreshLayout should be used whenever the user can refresh the contents of a view via a vertical swipe gesture. The activity that instantiates this view should add an OnRefreshListener to be notified whenever the swipe-to-refresh gesture is completed.

The SwipeRefreshLayout will notify the listener each and every time the gesture is completed again. the listener is responsible for correctly determining when to actually initiate a refresh of its content.

If the listener determines there should not be a refresh, it must call setRefreshing(false) to cancel any visual indication of a refresh. If an activity wishes to show just the progress animation, it should call setRefreshing(true).

To disable the gesture and progress animation, call setEnabled(false) on the view.

In this tutorial, I am going to explain how to implement pull to refresh the recyclerview with examples.

Let’s get started with the coding part.

Add SwipeRefreshLayout Dependency

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"Code language: CSS (css)

Also, we are going to refresh the recyclerview, So we need to add recyclerview and cardview dependencies.

implementation "androidx.recyclerview:recyclerview:1.1.0"
implementation "androidx.cardview:cardview:1.0.0"Code language: CSS (css)

Already, I have created tutorials on recyclerview and cardview, check the below links to learn in detail.

Recyclerview Android Example [Step by Step]

Cardview Android Example [Beginners]

Since we are using it to fetch data from the API and loading images from URL using. So, add those dependencies also.

implementation 'com.squareup.retrofit2:retrofit:2.1.0'
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'
implementation 'com.github.bumptech.glide:glide:4.7.1'Code language: JavaScript (javascript)

Create a Layout For Pull To Refresh

To work with pull to refresh your layout, you need to wrap your views with SwipeRefreshLayout.

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        tools:listitem="@layout/recyclerview_adapter"
        tools:itemCount="5"/>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>Code language: HTML, XML (xml)

Setup Recyclerview With Data

As we are using recyclerview in this example, I am not going deeper into recyclerview in this tutorial. check the below link to set up recyclerview.

Recyclerview Android Example [Beginners] – Howtodoandroid

Also, Check about glide, Retrofit check the below tutorials.

Retrofit Android Example With Recyclerview – Howtodoandroid

now, we are done with the basic recyclerview with data from API.

Setup SwipeRefreshLayout

create OnRefreshListener

We need to create OnRefreshListener to listen to the pull event in the activity.

private val refreshListener = OnRefreshListener {
        swipeRefreshLayout.isRefreshing = true
       // call api to reload the screen
    }Code language: PHP (php)

inside the listener block, we need to added a method to recall the API or do whatever what to refresh the layout.

Set Listener to SwipeRefreshLayout

Once, created the listener is then set to refresh the layout.

swipeRefreshLayout.setOnRefreshListener(refreshListener);Code language: CSS (css)

Use setRefreshing(true) to show the Refreshing view at the top of the screen.

After done with your operations, Use setRefreshing(false) it to show the Refreshing view at the top of the screen.

private fun fetchMovieList() {
        apiInterface.clone().enqueue(object : Callback<List<Movie>> {
            override fun onResponse(call: Call<List<Movie>>, response: Response<List<Movie>>) {
                swipeRefreshLayout.isRefreshing = false
                if (response.body() != null)
                    recyclerAdapter.setMovieListItems(response.body())
            }

            override fun onFailure(call: Call<List<Movie>>, t: Throwable?) {
                swipeRefreshLayout.isRefreshing = false
                Toast.makeText(this@MainActivity, t.toString(), Toast.LENGTH_SHORT).show()
            }
        })
    }Code language: PHP (php)

That’s it. we have implemented the pull to refresh in android.

Also, check out my other post on kotlin,

Android capture image from the camera programmatically

Popupwindow Android example in Kotlin

Android Image Slider With Indicator Example

Thanks for reading.

You can download this example in GITHUB.