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.
In this tutorial, we are going to learn how to use Swipe Down Refresh Layout.
In last tutorial we learned about RecyclerView. So i am going to use the same tutorial for SwipeRefresh. You can check RecyclerView tutorial here.
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.
1 2 3 4 5 6 7 8 9 10 11 |
<?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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@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(); } }); } } |
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);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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); } |
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.
Subscribe to us and get the latest news.