Free Shipping

Secure Payment

easy returns

24/7 support

  • Home
  • Blog
  • A Reusable Pull to Refresh Widget – Android PullToRefresh

A Reusable Pull to Refresh Widget – Android PullToRefresh

 July 15  | 0 Comments

Introduction to PullToRefresh

Android-PullToRefresh is a library which was originally based on Johan Nilsson’s library.
By using this library in our application, we can refresh the page by pulling down from the top as well as pulling up from the bottom.
It also supports graphics and animation effects.
We can use this feature with ListView, GridView, ExpandableListView, WebView etc.

Real Time Example:
We can see this feature in many applications like TweetCaster for Twitter, The Verge etc.

Example With Code:
⦁ Create an Application AndroidPullToRefreshExample.
⦁ Download the zip file of Android-PullToRefresh library from the official website.
⦁ Import the library in your workspace and add this in your application.
Now, we are ready to use this feature in our application.

Requirements:
This application shows ListView and GridView. We can customize it more and add many options according to the need of the application.
MainActivity.java, PullToRefreshListViewActivity.java, PullToRefreshGridViewActivity.java, activity_pull_to_refresh_list_view.xml, activity_pull_to_refresh_grid_view.xml.
Now, do it one by one

MainActivity.java :
This activity extends ListActivity. Here, it shows a ListView to navigate one for PullToRefresh ListView and other for PullToRefreshGridView.

Add the code
public static final String[] options = { “AndroidPullToRefresh ListView”, “AndroidPullToRefresh GridView”};

Add the code in onCreate(){..}
setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, options));

On list Item click we set the intent to other activities.

activity_pull_to_refresh_list_view.xml

This XML file is for a ListView. It replaces a standard ListView widget.

Add the code inside LinearLayout.

<com.handmark.pulltorefresh.library.PullToRefreshListView
android:id="@+id/pull_to_refresh_listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000"
android:divider="#19000000"
android:dividerHeight="4dp"
android:fadingEdge="none"
android:fastScrollEnabled="false"
android:footerDividersEnabled="false"
android:headerDividersEnabled="false"
android:smoothScrollbar="true" />

PullToRefreshListViewActivity.java
Create this Activity in our application to show the PullToRefresh feature in a Listview. Listview extends ListActivity.
Add the code:
Initialize the Variables:
private PullToRefreshListView mPullRefreshListView;

Add the code in onCreate(){…}
Take the reference of PullToRefreshListView and set the listener when list refreshed.

mPullRefreshListView = (PullToRefreshListView) findViewById(R.id.pull_to_refresh_listview);
mPullRefreshListView.setOnRefreshListener(new OnRefreshListener<ListView>() {
@Override
public void onRefresh(PullToRefreshBase<ListView> refreshView) {
new GetDataTask().execute();
}
});

Create AsyncTask for this and add the items when list is refresh in onPostExecute() method.

mListItems.addFirst("Added after refresh...");
mAdapter.notifyDataSetChanged();
mPullRefreshListView.onRefreshComplete();

activity_pull_to_refresh_grid_view.xml
Create an XML file for GridView and add the code inside LinearLayout, same as we had done for ListView.

<com.handmark.pulltorefresh.library.PullToRefreshGridView
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:id="@+id/pull_to_refresh_gridview"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="1dp"
android:horizontalSpacing="1dp"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:gravity="fill"
ptr:ptrMode="both"
/>

PullToRefreshGridViewActivity.java:
Create this Activity in our application to show the Pull to Refresh feature, like we do in ListView. Here we show to pull on both sides from top and bottom.

Add the code:
Initialize PullToRefreshGridView

private PullToRefreshGridView mPullRefreshGridView;

Add the code in onCreate(){..}

mPullRefreshGridView = (PullToRefreshGridView) findViewById(R.id.pull_to_refresh_gridview);
mGridView = mPullRefreshGridView.getRefreshableView();

Set the listener when view is refreshed.

mPullRefreshGridView.setOnRefreshListener(new OnRefreshListener2<GridView>() {
@Override
public void onPullDownToRefresh(PullToRefreshBase<GridView> refreshView) {
Toast.makeText(PullToRefreshGridViewActivity.this, "Pull Down!", Toast.LENGTH_SHORT).show();
new GetDataTask().execute();
}
@Override
public void onPullUpToRefresh(PullToRefreshBase<GridView> refreshView) {
Toast.makeText(PullToRefreshGridViewActivity.this, "Pull Up!", Toast.LENGTH_SHORT).show();
new GetDataTask().execute();
}
});

Add the code in onPostExecute() method when view has been refreshed.

mListItems.addFirst("Added after refresh...");
mListItems.addAll(Arrays.asList(result));
mAdapter.notifyDataSetChanged();
mPullRefreshGridView.onRefreshComplete();

OutPut

   Main Activity

 

Refreshing ListView

 

Refresh Finished

 

Pull Down GridView 

 

Pull Down GridView Refresh Finished

 

 Pull Up GridView Refreshing 

Download Source Code: GitHub

Conclusion

So, this was all about the Android-PullToRefresh. We can create an application by using this library very easily. As I discussed above there are many real-time applications which use this functionality. We can also add animations, graphics, etc by using this library and add pull feature on both sides of top and bottom to refresh the page. This functionality is quite popular in Android development.

Hope you find this Blogspot helpful and keep visiting www.acadgild.com for more updates on the courses.

>