Wednesday, July 24, 2013

Progress bar in action bar

Today I am describing , how to add the loading bar in action bar in android.

Steps to add refreshing button in action bar that convert to loading bar during network call-


1) First, let’s create the xml to describe the menu of the action bar. Create a file into directory res/menu with the following content. In my example, the filename is menu.xml. The menu contains an item 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/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 method onCreateOptionsMenu so you can inflate the menu :

public boolean onCreateOptionsMenu(Menu menu) {
    this.optionsMenu = menu;
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.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.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.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) in your network code.

Note:  If you want to modify the options menu based on events that occur during the activity lifecycle, you can do so in the onPrepareOptionsMenu() method. This method passes you the Menu object as it currently exists so you can modify it, such as add, remove, or disable items. (Fragments also provide an onPrepareOptionsMenu() callback.)

On Android 2.3.x and lower, the system calls onPrepareOptionsMenu() each time the user opens the options menu (presses the Menu button).

On Android 3.0 and higher, the options menu is considered to always be open when menu items are presented in the action bar. When an event occurs and you want to perform a menu update, you must call invalidateOptionsMenu() to request that the system call onPrepareOptionsMenu().

2 comments:

  1. Nice rip off http://www.michenux.net/android-refresh-item-action-bar-circular-progressbar-578.html publishing something as your own work

    ReplyDelete
  2. Peter, anyway, the original is still the best one :)

    ReplyDelete