All CategoriesAndroid App Development

A Reusable Pull to Refresh Widget – Android PullToRefresh

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.

100% Free Course On Big Data Essentials

Subscribe to our blog and get access to this course ABSOLUTELY FREE.

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.

Suggested Reading

ExpandableListview in Android

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close