Adding Swipe-to-Refresh To Your App

The swipe-to-refresh user interface pattern is implemented entirely within the SwipeRefreshLayout widget, which detects the vertical swipe, displays a distinctive progress bar, and triggers callback methods in your app. You enable this behavior by adding the widget to your layout file as the parent of a ListView or GridView, and implementing the refresh behavior that gets invoked when the user swipes.

This lesson shows you how to add the widget to an existing layout. It also shows you how to add a refresh action to the action bar overflow area, so that users who may be unable to use the swipe gesture can trigger a manual update with an external device.

Add the SwipeRefreshLayout Widget

To add the swipe to refresh widget to an existing app, add SwipeRefreshLayout as the parent of a single ListView or GridView. Remember that SwipeRefreshLayout only supports a single ListView or GridView child.

The following example demonstrates how to add the SwipeRefreshLayout widget to an existing layout file containing a ListView:

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

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

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

You can also use the SwipeRefreshLayout widget with a ListFragment. If the layout contains a ListView with the ID "@android:id/list", the swipe-to-refresh functionality is automatically supported. However, explicitly declaring the ListView in this way supersedes the default ListFragment view structure. If you want to use the default view structure, you will have to override parts of the SwipeRefreshLayout and ListFragment behavior. For an example of how to do this, see the SwipeRefreshListFragment sample app.

Add a Refresh Action to the Action Bar

You should add a refresh action to your app's action bar to ensure that users who may not be able to perform a swipe gesture can still trigger a manual update. For example, users with accessibility issues can trigger action bar actions using external devices, such as keyboards and D-pads.

You should add the refresh action as a menu item, rather than as a button, by setting the attribute android:showAsAction=never. If you display the action as a button, users may assume that the refresh button action is different from the swipe-to-refresh action. By making the refresh action less conspicuous in the action bar, you can encourage users to perform manual updates with the swipe gesture while still maintaining the accessible option in a place where D-pad users would look for it.

The following code demonstrates how to add the swipe-to-refresh action to the overflow area:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/menu_refresh"
        android:showAsAction="never"
        android:title="@string/menu_refresh"/>
</menu>