Home Tutorials Training Consulting Products Books Company Donate Contact us









Online training

Events

Quick links

Share

(c) 2016 vogella GmbH Version 0.1, 18.06.2016

This tutorial contains information how to implement the swipe to refresh design pattern.

1. Supporting swipe to refresh

Android provides a widget that implements the swipe-to-refresh design pattern, which allows the user to trigger an update with a vertical swipe.

This is implemented by the SwipeRefreshLayout widget, which detects the vertical swipe, displays a distinctive progress bar, and triggers callback methods in your app. To support this, add the widget to your layout file as the parent of the relevant view, and implementing the refresh behavior that gets invoked when the user swipes.

To use the swipe to refresh widget ensure you have a dependency to the support library in your application Gradle build file.

dependencies {
    compile 'com.android.support:support-v4:25.3.1'
}
<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">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

</android.support.v4.widget.SwipeRefreshLayout>
Even if you provide the swipe-to-refresh design pattern, you should still add a refresh button to your overflow menu in your toolbar to support the refresh for users unable to swipe.

In the SwipeRefreshLayout.OnRefreshListener method you implement the logic to update your view.

mySwipeRefreshLayout.setOnRefreshListener(
    new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            doYourUpdate();
        }
    }
);


private void doYourUpdate() {
   // TODO implement a refresh
   setRefreshing(false); // Disables the refresh icon
}

If you also added a refresh action to your overflow menu in your toolbar ensure that you also show the refresh indicator.

public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {

        case R.id.menu_refresh:
            // signal SwipeRefreshLayout to start the progress indicator
            mySwipeRefreshLayout.setRefreshing(true);
            doYourUpdate();

            return true;
    }
    return super.onOptionsItemSelected(item);
}

3. vogella training and consulting support

Copyright © 2012-2018 vogella GmbH. Free use of the software examples is granted under the terms of the Eclipse Public License 2.0. This tutorial is published under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Germany license.