How to use Pull To Refresh (SwipeRefreshLayout) in Android

Hi everyone !

In this article, you will learn how to implement quicly and simply a working Pull To Refresh feature in your app using the SwipeRefreshLayout in Android.

Step 1 : Import SwipeRefreshLayout to your Android project

First of all, your Android Support Library version should be at least version 19.1.0. The best is to get the latest available version, check your build.gradle, you should have it already implemented.

implementation 'com.android.support:support-v4:19.1.0' or higher

Okay, now you can use our pretty SwipeRefreshLayout, let’s get started !

Step 2 : Add it to your View layout

Create an activity and open it.

Open the corresponding layout, now we are going to add the SwipeRefreshLayout, wrap the component you want. Get in mind that you will have to perform the Pull To Refresh action on the wrapped component.

For instance, I have a list of items. I would like to refresh it when I do the Pull To Refresh action on it :

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swiperefresh_items"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@android:id/listview_items"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.v4.widget.SwipeRefreshLayout>

Okay, that’s all for the layout, it’s already implemented, now let’s code a little bit !

Step 3 : Implement the Pull To Refresh behavior

Go to your activity backend.

At the top of your activity, add a new variable which will be your SwipeRefreshLayout :

public class TimelineActivity extends Activity {
    private SwipeRefreshLayout mSwipeRefreshLayout;
    ...
}

Simply link mSwipeRefreshLayout to your layout component on activity creation :

@Override protected void onCreate(Bundle savedInstanceState) {
    mSwipeRefreshLayout = findViewById(R.id.swiperefresh_items);
}

Done. Now we are going to define the pull to refresh behavior of our mSwipeRefreshLayout using setOnRefreshListener method.

We are going to respond to the onRefresh event triggered when we will do the Pull To Refresh action. Better to add it to the onCreate method.

mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        // Your code to make your refresh action
        // CallYourRefreshingMethod();
   }
});

Call your UI/Data refreshing method from onRefresh .

Basically we’re done, you now have to write some code and test your SwipeRefreshLayout.

However, let’s go a bit deeper in the behavior.

Step 4 : Let’s customize our Pull To Refresh action

Once you’ll do the action, the spinning arrow will not stop by itself, even though your refreshing method is finished. So we are going to mimic a timer to stop this animation.

@Override
public void onRefresh() {
    // Your code to make your refresh action
    // CallYourRefreshingMethod();
    final Handler handler = new Handler();
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {
           if(mySwipeRefreshLayout.isRefreshing()) {
               mySwipeRefreshLayout.setRefreshing(false);
           }
        }
    }, 1000);
}

For the purpose of this example, I’ve created the Handler directly in the onRefresh method, but it is better to make it visible for the whole class by putting it at the top of the activity as a private variable. Also, the duration is set to 1000 ms, feel free to put whatever value you want. The higher you set, the longer will be the spinning animation.

In case you’re getting data from an external API / database, you won’t know the exact duration of the data retrieving process. Just call the setRefreshing wherever you need it.

Congrats ! You now have a working Pull To Refresh action in your app.

Feel free to give any feedback or ask questions 😎

See you soon !