Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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!

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Mark Mooibroek, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}