Implementing Pull To Refresh In Android

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 about how to implement pull to refresh to refresh the recyclerview with example.

Let’s getting started to coding part.

Add SwipeRefreshLayout Dependency

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"

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

implementation "androidx.recyclerview:recyclerview:1.1.0"
implementation "androidx.cardview:cardview:1.0.0"

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

Recyclerview Android Example [Beginners]

Cardview Android Example [Beginners]

Since, we are using retrofit to fetch data from the API and loading image from URL using glide. 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'

Create Layout For Pull To Refresh

To work with pull to refresh in 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>

Setup Recyclerview With Data

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

Recyclerview Android Example

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

Retrofit Android Example Kotlin[Step By Step]

Glide Library – Image Loading Library For Android

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

Setup SwipeRefreshLayout

create OnRefreshListener

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

private val refreshListener = OnRefreshListener {
        swipeRefreshLayout.isRefreshing = true
       // call api to reload the screen
    }

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 then set it into to refresh layout.

swipeRefreshLayout.setOnRefreshListener(refreshListener);

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

After done with your operations, Use setRefreshing(false) 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()
            }
        })
    }

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

Thanks for reading.

You can download this example in GITHUB.

Leave a Reply

Your email address will not be published. Required fields are marked *