Implementing Pull to Refresh Guide

Overview

In Android, the common "pull to refresh" UX concept is not built in to a ListView/RecyclerView. However, many Android applications would like to make use of this concept for their feeds. This is useful for all sorts of feeds such as a Twitter timeline. This effect can be achieved using the SwipeRefreshLayout from the support library, which was recently introduced and back-ported to all versions down to Android API level 4.

 

Using SwipeRefreshLayout

SwipeRefreshLayout is a ViewGroup that can hold only one scrollable view as a child. This can be either a ScrollView or an AdapterView such as a ListView or a RecyclerView.

Note: This layout only exists within more recent versions of support-v4 as explained in this post. Edit your app/build.gradle file to include a support library later than version 19:

apply plugin: 'com.android.application'

//...

dependencies {
    // ...
    implementation 'com.android.support:support-v4:27.1.1'
}

Make sure your support library is up to date by adding to your root gradle.file:

allprojects {
    repositories {
        // requires Gradle v4.1+
        google()
    }
}

RecyclerView with SwipeRefreshLayout

Step 1: Wrap RecyclerView

Just like the previous section, wrap the scrollable view, in this case a RecyclerView with a SwipeRefreshLayout in the XML layout:

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

  <android.support.v7.widget.RecyclerView
      android:id="@+id/rvItems"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true" />

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

Step 2: Update RecyclerView.Adapter

Make sure to have helper methods in your RecyclerView adapter to clear items from the underlying dataset or add items to it.

/* Within the RecyclerView.Adapter class */

// Clean all elements of the recycler
public void clear() { 
    items.clear(); 
    notifyDataSetChanged(); 
}

// Add a list of items -- change to type used
public void addAll(List<Tweet> list) { 
    items.addAll(list); 
    notifyDataSetChanged(); 
}

Step 3: Setup SwipeRefreshLayout

Next, we need to configure the SwipeRefreshLayout during view initialization in the activity. The activity that instantiates SwipeRefreshLayout 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.

You can do this the same way you can configure the SwipeRefreshLayout for a ListView as shown in Setup SwipeRefreshLayout section.

SwipeRefreshLayout with ListView

Step 1: Setting SwipeRefreshLayout

Set SwipeRefreshLayout at the Layout you want the SwipeRefresh functionality

activity_main.xml

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

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

Step 2: Set your ListView inside Layout

activity_main.xml

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

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </ListView>

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

You could use a ScrollView instead a ListView

Step 3: Now in your main_activity set your code

In the activity who points to activity_main.xml, which is main_activity(in this example), this code should be enough

main_activity.java

public class MainActivity extends AppCompatActivity {
    SwipeRefreshLayout swipeLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Getting SwipeContainerLayout
        swipeLayout = findViewById(R.id.swipe_container);
        // Adding Listener
        swipeLayout.setOnRefreshListener(new OnRefreshListener() {
            @Override
            public void onRefresh() {
                // Your code here
                Toast.makeText(getApplicationContext(), "Works!", Toast.LENGTH_LONG).show();
                // To keep animation for 4 seconds
                new Handler().postDelayed(new Runnable() {
                    @Override public void run() {
                        // Stop animation (This will be after 3 seconds)
                        swipeLayout.setRefreshing(false);
                    }
                }, 4000); // Delay in millis
            }
        });

        // Scheme colors for animation
        swipeLayout.setColorSchemeColors(
                getResources().getColor(android.R.color.holo_blue_bright),
                getResources().getColor(android.R.color.holo_green_light),
                getResources().getColor(android.R.color.holo_orange_light),
                getResources().getColor(android.R.color.holo_red_light)
        );
    }
}

Now just run your application!

You could check this example on GitHub.

Troubleshooting

If you aren't able to get the swipe to refresh working, check the following tips:

• Did you accidentally call setContentView twice? Ensure that inside your activity, you've only called setContentView once as the 2nd line of your onCreate method.

• Did you invoke setRefreshing(false) after data finished loading? With the swipe to refresh control, you are responsible for notifying the system once the new data has been loaded into the list. You must make sure to invoke setRefreshing only after the data has come back and not before. This means if you are loading data from the network, calling this within the onSuccess method.

• Did you clear out the old items before updating the list? Make sure that in order for the new items to be displayed that you clear the list of any old items if needed. In other words, if you are replacing items in the list with new versions, be sure to remove the old versions from the adapter first with adapter.clear();

• Are you using CoordinatorLayout? If you are using a CoordinatorLayout to manage scrolling, be sure to move the app:layout_behavior="@string/appbar_scrolling_view_behavior" property to the SwipeRefreshLayout rather than the child RecyclerView or ListView.

References

• http://antonioleiva.com/swiperefreshlayout/