-
Notifications
You must be signed in to change notification settings - Fork 0
Implementing Pull to Refresh
In Android, the common "pull to refresh" UX concept is not built in to a ListView. However, many Android applications would like to make use of this concept for their feeds. This is useful for all sorts of feeds such as a Twitter timeline.
Thankfully, there is an excellent third-party pull-to-refresh library that can be used to make this interaction extremely easy to implement.
Download the zip of pull-to-refresh and then import the library folder into Eclipse with File => Import => Existing Android Code Into Workspace. Call the project "PullToRefresh" and then start the import. This folder is now a "library project" and can then be included as a library in your Android apps. Make sure to mark this project as a library and then include the library in your application Check the Detailed Instructions Here for a step-by-step of this process.
Next, for each ListView that we want to add pull-to-refresh functionality to, we need to replace the ListView
in the XML with the new third-party eu.erikw.PullToRefreshListView
which has all the same features of a ListView. For example:
<ListView
android:id="@+id/pull_to_refresh_listview"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />
would be replaced with:
<eu.erikw.PullToRefreshListView
android:id="@+id/pull_to_refresh_listview"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />
All other properties in the XML can stay the same.
Now, we need to specify a OnRefreshListener
for each PullToRefreshListView
which describes the process for refreshing the contents. This is usually an asynchronous network request for new data from an API. For example:
public class TimelineActivity extends Activity {
PullToRefreshListView lvTweets;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_timeline);
lvTweets = (PullToRefreshListView) findViewById(R.id.lvHomeTimeline);
// Set a listener to be invoked when the list should be refreshed.
lvTweets.setOnRefreshListener(new OnRefreshListener() {
@Override
public void onRefresh() {
// Your code to refresh the list contents
// Make sure you call listView.onRefreshComplete()
// once the loading is done. This can be done from here or any
// place such as when the network request has completed successfully.
fetchTimelineAsync(0);
}
});
}
public void fetchTimelineAsync(int page) {
client.getHomeTimeline(0, new JsonHttpResponseHandler() {
public void onSuccess(JSONArray json) {
// ...the data has come back, finish populating listview...
// Now we call onRefreshComplete to signify refresh has finished
lvTweets.onRefreshComplete();
}
public void onFailure(Throwable e) {
Log.d("DEBUG", "Fetch timeline error: " + e.toString());
}
});
}
}
The library has rich support for customizing the refresh graphics. To do so, override the style attributes to your liking, like the following example:
<style name="ptr_text">
<!-- Change the text style and color -->
<item name="android:textStyle">bold|italic</item>
<item name="android:textColor">#cccccc</item>
</style>
The various styles you can override are;
- ptr_headerContainer
- ptr_header
- ptr_arrow
- ptr_spinner
- ptr_text
Check out the official library readme for more details.
- https://github.com/erikwt/PullToRefresh-ListView - Third-party library for pull to refresh