I'm a 27 year old software developer that mainly focuses on software development. As everyone i have taken a side in the Apple vs Android game. My choice is Android because of oh so many reasons :-) By contributing to the Android developers content online ( in the form of writing Android tutorials ), I hope to convince others to make the same decision and help them make nice content for the Android platform. Mark is a DZone MVB and is not an employee of DZone and has posted 20 posts at DZone. You can read more from them at their website. View Full User Profile

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

08.21.2011
| 6503 views |
  • submit to reddit

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.
-->
<com.markupartist.android.widget.PullToRefreshListView
android:id="@+id/android:list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
/>

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() {
@Override
public void onRefresh() {
// Do work to refresh the list here.
new GetDataTask().execute();
}
});

private class GetDataTask extends AsyncTask<Void, Void, String[]> {
...
@Override
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();
super.onPostExecute(result);
}

}

 

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

References
Published at DZone with permission of Mark Mooibroek, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)