Monday, June 11, 2012

How to implement Android Pull-to-Refresh


In Android applications such as Twitter (official app), when you encounter a ListView, you can pull it down (and it will bounce back when released) to refresh the content.



I wonder what is the best way, in your opinion, to implement that?



Some possibilities I could think of:



  1. An item on top of the ListView - however I don't think scrolling back to item position 1 (0-based) with animation on the ListView is an easy task.

  2. Another view outside the ListView - but I need to take care of moving the ListView position down when it is pulled, and I'm not sure if we can detect if the drag-touches to the ListView still really scroll the items on the ListView.



Any recommendations?



P.S. I wonder when the official Twitter app source code is released. It has been mentioned that it will be released, but 6 months has passed and we haven't heard about it since then.


Source: Tips4all

7 comments:

  1. I've made an attempt to implement a pull to refresh component, it's far from complete but demonstrates a possible implementation, https://github.com/johannilsson/android-pulltorefresh.

    Main logic is implemented in PullToRefreshListView that extends ListView. Internally it controls the scrolling of a header view using smoothScrollBy (API Level 8). The widget is now updated with support for 1.5 and later, please read the README for 1.5 support though.

    In your layouts you simply add it like this.

    <com.markupartist.android.widget.PullToRefreshListView
    android:id="@+id/android:list"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    />

    ReplyDelete
  2. I've also implemented a robust, open source, easy to use and highly customizable PullToRefresh library for Android. You can replace your ListView with the PullToRefreshListView as described in the documentation on the project page.

    https://github.com/erikwt/PullToRefresh-ListView

    ReplyDelete
  3. I've written a pull to refresh component here: https://github.com/guillep/PullToRefresh
    It works event if the list does not have items, and I've tested it on >=1.6 android phones.

    Any suggestion or improvement is appreciated :)

    ReplyDelete
  4. Not sure if this would help, but this is the Pull-to-refresh code that's used on iOS devices like Twitter, Facebook, etc.

    https://github.com/enormego/EGOTableViewPullRefresh

    Implementation:

    https://github.com/enormego/EGOTableViewPullRefresh/blob/master/EGOTableViewPullRefresh/Classes/View/EGORefreshTableHeaderView.m

    Perhaps you could re-use some code for Android if you're familiar enough with Objective-C and the Cocoa-Touch Framework.

    ReplyDelete
  5. Johan used the first method, and I decided to try it using the second method. You can find the code here: https://github.com/timahoney/Android-Pull-To-Refresh/

    It's not complete, and I wouldn't use it in production code, but it might help.

    ReplyDelete
  6. If you don't want your program to look like an iPhone program that is force fitted into Android, aim for a more native look and feel and do something similar to Gingerbread:

    ReplyDelete