Pull To Refresh on Android with SwipeRefreshLayout

In March of 2014, without much fanfare, Google added the SwipeRefreshLayout widget to the Android SDK. This addition formalizes the pull-to-refresh mechanism on Android. Let's take a look at how we'll use it.

First, make sure you have R19.1.0 or newer version of the Android Support Library in your project. R20 is the first version of the library to include the new layout. Once it's in your project, create a simple activity layout with the SwipeRefreshLayout at the top of the view hierarchy. While this isn't explicitly necessary, it makes sense that the entire activity be pulled down to refresh.

It is explicitly necessary that this layout have only one child. In this example, we'll make the only child a TextView for simplicity. Here's a look at our activity layout:

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

   <TextView android:id="@+id/text1" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="@string/hello_world" />

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



Now that we have the layout added, we'll need a little code to make the refresh happen. The new layout has a method to setOnRefreshListener. So let's take a look at our activity with that listener connected:


public class MainActivity extends Activity { 

   SwipeRefreshLayout layout; 
   TextView text1; 

   OnRefreshListener refreshListener = new OnRefreshListener() { 
      @Override public void onRefresh() { 
         text1.setText(new Date().toString()); 
         layout.setRefreshing(false); 
      } 
   }; 

   @Override protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       layout = (SwipeRefreshLayout)findViewById(R.id.layout); 
       text1 = (TextView)findViewById(R.id.text1);
       layout.setOnRefreshListener(refreshListener);
       layout.setColorSchemeResources(color.holo_blue_dark, color.holo_blue_light,color.holo_orange_dark, color.holo_green_light); 
   } 
}



Notice that we need to call layout.setRefreshing(false) when our refresh code is finished. This method stops the animation and let's the layout know that our work is done. Typically this would be called when a loader in the activity completes. 

Also, take a look at SwipeRefreshLayout.setColorSchemeResources. This method allows you to choose 4 colors to be in the animated bar while the layout is refreshing. 

SwipeRefreshLayout is a great addition to the SDK and goes a long way to standardizing a user interaction method. Implementing will give your users comfort that their app is acting in a standard fashion and also save you space on the ActionBar where your refresh button previously would have been!