All CategoriesAndroid App Development

How to Create ActionBar-PullToRefresh in Android

Introduction ActionBar-PullToRefresh

ActionBar-PullToRefresh is a library which is used to refresh the page. It interacts with the application ActionBar.
It provides us a new UI pattern which improves the usability of the application.
Real Time Example:
We can see this feature very well in many applications like Facebook, Gmail, Twitter etc.

Add Libraries Before Creating Application:
To use this feature in our application, we have to download some external libraries and import it into our workspace.
ActionBar-PullToRefresh & SmoothProgressBar , both are the libraries which are available on official website, are required in creating the ActionBar-PullToRefresh example.
After importing, add SmoothProgressBar as a library in ActionBar-PullToRefresh.

Example with Code:
Here in this example, I will show ListView and Webview implementation.
⦁ Create an Application ActionBarPullToRefreshExampleAndroid.
⦁ Add ActionBar-PullToRefresh as a library in your project.

Requirements:
MainActivity.java, ListViewActivity.java, WebViewActivity.java, activity_main.xml, activity_list_view.xml, activity_web_view.xml, base_menu.xml.
Now, do it one by one.

base_menu.xml:
Create this file in menu folder

Add the code

<item
android:id="@+id/action_listview"
android:showAsAction="ifRoom|withText"
android:title="ListView"/>
<item
android:id="@+id/action_webview"
android:showAsAction="ifRoom|withText"
android:title="WebView"/>

These are the items on ActionBar.

MainActivity.java:

This activity acts as a Base Activity which supports the views like ListView and Webview.

Add the code in onOptionsItemSelected() method{…}

case R.id.action_listview:
Toast.makeText(this, "Pull to Refresh in ListView", Toast.LENGTH_SHORT).show();
Intent listIntent=new Intent(this,ListViewActivity.class);
startActivity(listIntent);
return true;
case R.id.action_webview:
Toast.makeText(this, "Pull to Refresh in Web View", Toast.LENGTH_SHORT).show();
Intent webIntent=new Intent(this,WebViewActivity.class);
startActivity(webIntent);
return true;

activity_list_view.xml:

Add the Code

<uk.co.senab.actionbarpulltorefresh.library.PullToRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ptr_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="@+id/ptr_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</uk.co.senab.actionbarpulltorefresh.library.PullToRefreshLayout>

ListViewActivity.java:

Here, this class extends MainActivity.

Add the code in this file:

Inside this create an inner class SimpleListFragment which extends ListFragment and implements OnRefreshListener .

Now, Initialize the variables:

int i=0;
private PullToRefreshLayout mPullToRefreshLayout;
ArrayAdapter<String> adapter;
List<String> list;

Add the code in onViewCreated() method:

mPullToRefreshLayout = new PullToRefreshLayout(viewGroup.getContext());

Now set the PullToRefreshLayout.

ActionBarPullToRefresh.from(getActivity())
.insertLayoutInto(viewGroup)
.theseChildrenArePullable(android.R.id.list, android.R.id.empty)
.listener(this)
.setup(mPullToRefreshLayout);

Set the adapter in onActivityCreated() method.

setListAdapter(adapter);
setListShownNoAnimation(true);

Add the code in onRefreshStarted() method

To notify layout that the refresh is finished, in onPostExecute() add this

adapter.notifyDataSetChanged();
mPullToRefreshLayout.setRefreshComplete();

activity_web_view.xml:

Add the code in this file:

<uk.co.senab.actionbarpulltorefresh.library.PullToRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:id="@+id/ptr_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
ptr:ptrViewDelegateClass="uk.co.senab.actionbarpulltorefresh.library.viewdelegates.WebViewDelegate" />
</uk.co.senab.actionbarpulltorefresh.library.PullToRefreshLayout>

WebViewActivity.java:

We will also extend this class with our MainActivity and implements onRefreshlistener.

Initialize

private PullToRefreshLayout mPullToRefreshLayout;
private WebView mWebView;

Add the code in onCreate(){…}

Here we take the reference of variables, set the PullToRefreshLayout and Load the URL to show on WebView.

mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new SampleWebViewClient());
mPullToRefreshLayout = (PullToRefreshLayout) findViewById(R.id.ptr_layout);
ActionBarPullToRefresh.from(this)
.allChildrenArePullable()
.listener(this)
.setup(mPullToRefreshLayout);
mWebView.loadUrl("https://acadgild.com/blog/");

Reload the refresh event in onRefreshStarted() method

mWebView.reload();

Implement the SampleWebViewClient class which extends WebViewClient.

Add the code in onPageFinished() method.

@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (mPullToRefreshLayout.isRefreshing()) {
mPullToRefreshLayout.setRefreshComplete();
}
}

AndroidManifest.xml:

Add the internet permission in this file.

<uses-permission android:name="android.permission.INTERNET" />

Conclusion

This is a simple example of ActionBar-PulltoRefresh in Android. It increases the usability of the application by adding two libraries. As discussed above we can create this example easily. These days, this functionality is used in many applications. We can customize it according to our need of the application. This is a very important feature in Android Development.

Output

This is our Home Screen, we can navigate from here.

   ListView when Refresh occurs

                                                                               Refresh finished  

                                                                     WebView when Refresh Finished

Download Code: GitHub

Keep visiting www.acadgild.com for more updates on the courses.
 

Android Programming

Tags

Leave a Reply

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

Related Articles

Close