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.