Android SwipeRefresh Layout

Jul 21, 2015 By: Dr. Droid Android RecyclerView, Android SwipeRefresh Layout, Android ViewPager Comments: 0

You might have noticed that lot of android apps like Twitter, Google+ provides an option to swipe / pull down to refresh it’s content. Whenever user swipes down from top, a loader will be shown and will disappear once the new content is loaded. In this tutorial we are going to learn how to provide the same option to your apps too.

Previously we used to implement a custom swipe view to detect the swipe down. But android made our day easier by introducing SwipeRefreshLayout in android.support.v4 to detect the vertical swipe on any view.

Methods of SwipeRefresh are quite few:

– setOnRefreshListener(OnRefreshListener): adds a listener to let other parts of the code know when refreshing begins.
– setRefreshing(boolean): enables or disables progress visibility.
– isRefreshing(): checks whether the view is refreshing.
– setColorScheme(): it receive four different colors that will be used to colorize the animation.

Example

In this tutorial, we are going to learn how to use Swipe Down Refresh Layout.

VIDEO DEMO

In last tutorial we learned about RecyclerView. So i am going to use the same tutorial for SwipeRefresh. You can check RecyclerView tutorial here.

1. Android SwipeRefreshLayout

Implementing SwipeRefreshLayout is very easy. Whenever you want to detect the swipe down on any view, just the wrap the view around SwipeRefreshLayout element. In our case, we are going to use it with RecyclerView. And implement your activity class from SwipeRefreshLayout.OnRefreshListener. When user swipes down the view, onRefresh() method will be triggered. In you need to take appropriate action in that function like making an http call and fetch the latest data.

<?xml version="1.0" encoding="utf-8"?>
<!-- Swipe refresh layout -->
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/refreshview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <!-- place your view here -->

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

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/refreshview"

android:layout_width="match_parent"

android:layout_height="wrap_content" >

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

2. SwipeRefreshLayout Code

First find the id of Swipe View.
Set the color schemes for refresh view circular bar.
Finally set the refresh listener for refreshing view. In onRefresh() you can call the refreshing method to refresh view.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    swipeLayout = (SwipeRefreshLayout) findViewById(R.id.refreshview);
// set color schemes on refresh view
    swipeLayout.setColorSchemeResources(R.color.blue, R.color.red,
				R.color.orange, R.color.pink, R.color.yellow, R.color.black,
				R.color.cyan);
// implement refresh listener
		swipeLayout .setOnRefreshListener(new OnRefreshListener() {

			@Override
			public void onRefresh() {

				// call this method for repopulating recycler view with new data
				refreshRecyclerView();
			}
		});
}
 
 

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

swipeLayout = (SwipeRefreshLayout) findViewById(R.id.refreshview);

// set color schemes on refresh view

swipeLayout.setColorSchemeResources(R.color.blue, R.color.red,

R.color.orange, R.color.pink, R.color.yellow, R.color.black,

R.color.cyan);

// implement refresh listener

swipeLayout .setOnRefreshListener(new OnRefreshListener() {

@Override

public void onRefresh() {

// call this method for repopulating recycler view with new data

refreshRecyclerView();

}

});

}

3. Refresh Code

Here you can see that i am using a handler so that refresh view should be visible for that because i am populating adapter from local data and it won’t take too long but if you are fetching data from server then you don’t need to use handler.

There is RandomGenerator() method that i used in last RecyclerView tutorial. This method will return random numbers between 0-9.

Finally after refreshing adapter we have to setRefreshing(false);

private void refreshRecyclerView() {

		// Handler to show refresh for a period of time you can use async task
		// while commnunicating serve
		new Handler().postDelayed(new Runnable() {

			@Override
			public void run() {

				// Loop for 3 items
				for (int i = 0; i < 3; i++) {
					int value = RandomGenerator();// Random value

					// add random data to arraylist
					gridArrayList.add(new Data_Model(getTitle[value],
							getLocation[value], getYear[value], images[value]));
				}
				adapter.notifyDataSetChanged();// notify adapter
				gridSwipeRefresh.setRefreshing(false);// set swipe refreshing
														// false

				// Toast for task completion
				Toast.makeText(getActivity(), "Items refreshed.",
						Toast.LENGTH_SHORT).show();

			}
		}, 5000);
	}

private void refreshRecyclerView() {

// Handler to show refresh for a period of time you can use async task

// while commnunicating serve

new Handler().postDelayed(new Runnable() {

@Override

public void run() {

// Loop for 3 items

for (int i = 0; i < 3; i++) {

int value = RandomGenerator();// Random value

// add random data to arraylist

gridArrayList.add(new Data_Model(getTitle[value],

getLocation[value], getYear[value], images[value]));

}

adapter.notifyDataSetChanged();// notify adapter

gridSwipeRefresh.setRefreshing(false);// set swipe refreshing

// false

// Toast for task completion

Toast.makeText(getActivity(), "Items refreshed.",

Toast.LENGTH_SHORT).show();

}

}, 5000);

}

4. Source Code

The rest of the code is same as RecyclerView tutorial by adding this RefreshView Code.

Finally you are all done. Now, you can use swipe refresh into your app to refresh ListView, GridView and RecyclerView. This is easy to implement in minimum number of lines.

Thanks.