Android REFRESH ITEM INSIDE ACTION BAR USING CIRCULAR PROGRESSBAR

This android tutorial is about adding a refresh item in the action bar. When refreshing is disabled, a simple image is shown. When refreshing is running, a circular progressbar is shown. Let’s see the screenshots below to show the results.

Test before
If you wish to test before, you can install the application with the following link (Airport AsyncTask on the main screen). The whole source code of the project is also available on github.

Tutorial

1) First, let’s create the xml to describe the menu of the action bar. Create a file into directory res/menuwith the following content. In my example, the filename is airport_menu.xml. The menu contains an itemairport_menuRefresh, it uses icon ic_menu_refresh, and will always be placed in the action bar.

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/airport_menuRefresh"
         android:icon="@drawable/ic_menu_refresh"
         android:title="@string/menuitem_refresh"
         android:alphabeticShortcut="r"
         android:orderInCategory="1"
         android:showAsAction="always" />
</menu>

2) Then, create the layout that contains the progressbar. This layout is used when refresh is running. Just create a file named actionbar_indeterminate_progress.xml inside folder res/layout with the following content :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_height="wrap_content"
   android:layout_width="56dp"
   android:minWidth="56dp">
    <ProgressBar android:layout_width="32dp"
       android:layout_height="32dp"
       android:layout_gravity="center"/>
</FrameLayout>

3) In your activity, add an instance attribute to preserve a link to the Menu :

private Menu optionsMenu;

4) In your activity, override the methode onCreateOptionsMenu so you can inflate the menu :

public boolean onCreateOptionsMenu(Menu menu) {
    this.optionsMenu = menu;
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.airport_menu, menu);
    return super.onCreateOptionsMenu(menu);
}

5) Override method onOptionsItemSelected to handle the click on the refresh item

public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.airport_menuRefresh:

        // Complete with your code
    return true;
    }
    return super.onOptionsItemSelected(item);
}

6) In your activity, add this method that will allow you enable/disable the circular progressbar :

public void setRefreshActionButtonState(final boolean refreshing) {
    if (optionsMenu != null) {
        final MenuItem refreshItem = optionsMenu
            .findItem(R.id.airport_menuRefresh);
        if (refreshItem != null) {
            if (refreshing) {
                refreshItem.setActionView(R.layout.actionbar_indeterminate_progress);
            } else {
                refreshItem.setActionView(null);
            }
        }
    }
}

7) Finally, add calls to setRefreshActionButtonstate(true) and setRefreshActionButtonstate(false). This depends on your application. To see a complete example, download on github the source code of the whole project : the interesting class is AirportActivity.