All CategoriesAndroid App Development

Android Swipe Down To Refresh ListView

Android Swipe Down to Refresh ListView

There are many options for refreshing the page, but Android gives us a brand new, exciting feature called SwipeRefreshLayout. It comes from android.support.v4.widget.SwipeRefreshLayout Library.
By swiping down from the top of the page it shows a circular loader and it refreshes the page. Here in this example, we are going to see swipe down to refresh ListView.
The circular loader will disappear after refreshing the page or when the content is loaded.
SwipeRefreshLayout supports only single ListView or GridView child. Here in this application, we are going to implement this feature in ListView.
We saw how to add this widget SwipeRefreshLayout in our layout file as a parent of ListView and how to add refresh action behavior so that user can easily swipe down the page and refresh the screen.
We can also use this widget with ListFragment.
Normally we see some apps like weather forecasting app which automatically takes updates and shows the latest data. But also Android gives the functionality to the users to refresh the page or screen by using vertical swipe.

Respond to the Refresh Gesture:

When the user performs swipe down to refresh, it shows the progress indicator and triggers the method where this method is used for updating the app data.
For this, we have to implement the interface i.e. SwipeRefreshLayout.OnRefreshListener and onRefresh() method which we will describe later.
We can also create a separate method for updating the data. Here in this method, we will put the whole code like fetching the data remotely or static data. Call this update method from onRefresh() method.
When the update is finished, your update method has to be called setRefreshing(False).
After this, the new content is refreshed and our progress bar is stopped.
Let’s see how we can do it
/*
* Sets up a SwipeRefreshLayout.OnRefreshListener that is invoked when the user
* performs a swipe-to-refresh gesture.
*/

mySwipeRefreshLayout.setOnRefreshListener(
new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
Log.i(LOG_TAG, "onRefresh called from SwipeRefreshLayout");
// This method performs the actual data-refresh operation.
// The method calls setRefreshing(false) when it's finished.
myUpdateOperation();
}
}
);

Real Time Example:

Nowadays we can see so many applications using this functionality like Facebook, G+, Twitter etc.
Important method and Interface:
Interface:

SwipeRefreshLayout.OnRefreshListener:

This is an interface which is implemented to notify when the user swipes down to refresh the page. After this onRefresh() method is triggered.

Method:

onRefresh():

This is an override method when we implement above the interface. It is called when the user swipes down the view or refreshes the page. Inside this method, we can also fetch the data remotely.
This is a method where we can take many actions like fetching the latest data or do http call.

Example with code:

Now it’s time to do it programmatically, here in this example we are going to create a ListView where it shows some items by default and after which the user refreshes the page, it adds a new item in that ListView.
Create an Application SwipeRefreshLayoutListViewExampleAndroid.

Requirements:

MainActivity.java, activity_main.xml, colors.xml.
These are the required files to create a simple example of swipe down to refresh listview.
Let’s create it one by one in our application.

activity_main.xml:

Create this XML file inside RelativeLayout. It is our main layout file which shows the ListView under SwipeRefreshLayout element. As we discussed above, here we use the SwipeRefreshLayout widget and it is the parent of single child i.e. ListView.

Add then code here:

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</ListView>
</android.support.v4.widget.SwipeRefreshLayout>

colors.xml:

Here in this file, we will add some colors for the circular loader.

Add the code here:

<color name="orange">#FF9900</color>
<color name="green">#009900</color>
<color name="blue">#000099</color>

MainActivity.java:

This is our Main Activity where we can take the reference of ListView and SwipeRefreshLayout and set other properties for refresh by implementing the interface and its overriding method onRefresh() as we discussed above.
Add the code here:

Initialize:

ListView mListView;
SwipeRefreshLayout mSwipeRefreshLayout;
ArrayList<String> listItems;

Add the code in onCreate(…){..}:

Take the reference of SwipeRefreshLayout and ListView from our layout file.

mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
mListView = (ListView) findViewById(R.id.listview);

Now, add some items in the array list. Here, we will show the static data in our ListView. We can also fetch the data remotely and make our custom adapter it is dependent on the need of an application.

listItems = new ArrayList<String>();
listItems.add("List Item 1");
listItems.add("List Item 2");
listItems.add("List Item 3");
listItems.add("List Item 4");
listItems.add("List Item 5");

Now, add our list data in ArrayAdapter and set the adapter of ListView.

final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, listItems);
mListView.setAdapter(adapter);

We can see, it shows the normal ListView, but when the user swipes down then we have to implement the interface and the methods as we have discussed above.
Set the color schemes for the circular loader. Here we can add 3 different colors for our progress bar or circular loader.

mSwipeRefreshLayout.setColorSchemeResources(R.color.orange, R.color.green, R.color.blue);

Now implement the interface and its overriding method onRefresh() and other properties of ListView.
Here, when the user swipes down this method called, as we discussed above, add one new item every time.
 

mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
//handling swipe refresh
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
mSwipeRefreshLayout.setRefreshing(false);
listItems.add(0,"New Item Added");
mListView.setAdapter(adapter);
adapter.notifyDataSetChanged();
mListView.smoothScrollToPosition(0);
}
}, 2000);
}
});

We can see very well that it implements the interface and its methods and inside onRefresh() method. We add the code for new item added.

Output:

Before Refresh

Refreshing

After Refresh

Download Code: Github

Conclusion:

This is a simple example of Swipe Down to Refresh ListView with the help of Android Support Library. We can simply refresh the page by swiping down the page and the new content is loaded. We can also get the data remotely, here in this example, it shows the static data. We can customize it according to the requirement. This feature has turned out to be a very popular feature of Android and is being used in a wide array of applications.
Keep visiting www.acadgild.com for more updates on the courses.
Android Programming
 

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close