{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner

Project spotlight: Pull down to refresh ( like the official Twitter client )

Hey all, and welcome to a new category of Programmer XR called: Project spotlight!

In this category i will highlight original and functional (open source) projects and i will explain the inner workings. If you come across such a project and you want to share it? Just drop me an e-mail through the contact form. Follow this link if you want to see more featured Android projects/libraries.

The first project i will put in the spotlight is: Pull To Refresh for Android

“Pull To Refresh” is a UI gesture made popular by the Twitter for Iphone app. It allows a user to refresh a list by pulling down and releasing from the top of the list. After that the component will be able to request new data from e.g. a server.

So how does this work :-) Well let me explain:

Its basically a custom ListView that includes a special header. The list is initially displayed with the first item selected. This hides the header from view.

Read more about this project + implementation

Now when you drag your finger down, the header will become visible. When you drag down far enough, the header changes from a "Pull down" message to a "Release me" message ( see image below ). Once its released, the header remains visible with the “loading” message until the view is told the refresh is complete, then it resets the header so its hidden once again.  Here is an image that shows the 3 states of the header: Pull down, Release me and Loading.

3 header states
3 header states of the ListView

To implement this in your application replace your standard ListView with this:

The PullToRefreshListView replaces a standard ListView widget.

Then in your Activity you can hook up some functionality into the refresh method like so:

Its as simple as that. This nice library is compatible up to Android 1.5 so you can implement it to a wide variety of application without having to worry about compatibility.
// Set a listener to be invoked when the list should be refreshed.
((PullToRefreshListView) getListView()).setOnRefreshListener(new OnRefreshListener() {
public void onRefresh() {
// Do work to refresh the list here.
new GetDataTask().execute();

private class GetDataTask extends AsyncTask<Void, Void, String[]> {
protected void onPostExecute(String[] result) {
//put in some very complex data fetching algoritm!
mListItems.addFirst("Added after refresh...");

// Call onRefreshComplete when the list has been refreshed.
((PullToRefreshListView) getListView()).onRefreshComplete();



Do you want to feature you own project? Drop me an email and let me know!

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks