Android 101: How to create an options menu for the Action Bar

A menu is useful to provide access to different parts of your application. It's easy to add a menu to an Android application. Let's see how to do it.

Create a menu resource file

The first step is to create a menu folder under the res folder of your application.

Then add a new Android XML File.

Define individual options using the item element. Specify the id, icon and title for each option. Here is the menu file for the Honeybuzz application:

<?xml version="1.0" encoding="utf-8"?>
<menu
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menuRefresh"
          android:icon="@android:drawable/ic_popup_sync"
          android:title="@string/menu_refresh"
          android:alphabeticShortcut="r"
          android:showAsAction="always" />
    <item android:id="@+id/menuProgress"
          android:actionLayout="@layout/progress"
          android:showAsAction="always" />
    <item android:id="@+id/menuNewBuzz"
          android:icon="@android:drawable/ic_input_add"
          android:title="@string/menu_new_buzz"
          android:alphabeticShortcut="n"
          android:showAsAction="ifRoom|withText" />
    <item android:id="@+id/menuAccounts"
          android:icon="@android:drawable/ic_lock_lock"
          android:title="@string/menu_accounts"
          android:alphabeticShortcut="a"
          android:showAsAction="withText" />
    <item android:id="@+id/menuPreferences"
          android:icon="@android:drawable/ic_menu_preferences"
          android:title="@string/menu_preferences"
          android:alphabeticShortcut="s"
          android:showAsAction="withText" />
    <item android:id="@+id/menuAbout"
          android:icon="@android:drawable/ic_menu_info_details"
          android:title="@string/menu_about"
          android:alphabeticShortcut="b"
          android:showAsAction="withText" />
</menu>

The showAsAction attribute allows you to specify when and how the option appears in the ActionBar (the ActionBar is the title bar that appears on top of an Android application starting with Honeycomb). Available values are: ifRoom, withText, never and always.

Inflate the menu and handle menu options

Next you want to update the Activity where you want the menu to appear. You need to override onCreateOptionsMenu for inflating your menu file and override onOptionsItemSelected for handling the menu options. Here is how we build the menu for the Honeybuzz applcation:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    this.menuHandler = menu;

    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu, menu);
    hideProgress();

    return super.onCreateOptionsMenu(menu);
}

public void showProgress() {
    this.menuHandler.findItem(R.id.menuRefresh).setVisible(false);
    this.menuHandler.findItem(R.id.menuProgress).setVisible(true);
}

public void hideProgress() {
    this.menuHandler.findItem(R.id.menuProgress).setVisible(false);
    this.menuHandler.findItem(R.id.menuRefresh).setVisible(true);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            // go home
            Intent intent = new Intent(this, HoneybuzzListActivity.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            return true;
        case R.id.menuNewBuzz:
            startActivity(new Intent(this, HoneybuzzAddActivity.class));
            return true;
        case R.id.menuAccounts:
            showDialog(DIALOG_ACCOUNTS);
            return true;
        case R.id.menuPreferences:
            startActivity(new Intent(this, HoneybuzzPreferences.class));
            return true;
        case R.id.menuRefresh:
            // refresh buzzes (handled on child Activity)
            return true;
            case R.id.menuAbout:
            loadAboutDialog(getString(R.string.about_title));
            return true;
    }

    return super.onOptionsItemSelected(item);
}

The Action Bar appears by default in Honeycomb. It sits at the top of the screen and includes the application's icon. The menu will be added to the Action Bar and depending on the settings of each option, some options will appear as buttons with only an icon, while the remainder will be available as text options via a dropdown.

For each option selected we usually start a new Activity. Because most Activities will inherit from this main Activity, they will also share the same menu. The showProgress/hideProgress methods are called when the application is busy processing information. There is a refresh button that can be clicked to reload the data and when the application is processing the refresh button will be replaced by a progress indicator.

For handling the home button (the icon button of your application that sits at the top left) you compare the item ID to android.R.id.home.

How to generate icons for menu options and the Action Bar

To display your menu options you will generally want an icon. You have to build several images to accommodate for different screen sizes. The Android Asset Studio is a useful utility that generates the different image files. You have to provide an image or select one from the clipart gallery and you can provide text as well. There are a few other configuration options (padding, trim, theme) and at the end you can download a zip archive with all the images.

The Android Asset Studio can also be used for generating icons for other parts of your application (launcher, action bar, etc.) and is part of the android-ui-utils, which also provides Photoshop icon templates that follow the icon design guidelines for Android.

Besides creating your own icons you can also use Android's own icons. Android comes with a set of drawables that can be used in many different situations. For example, for Froyo (Android 2.2) you can check the Android Drawables explorer to see what is available. You access these resources like this: android.R.drawable.ic_menu_save.

For checking the drawables available in Honeycomb (or any other version) I recommend that you add an ImageView to a layout file, using the "Graphical Layout" view. Then if you choose "System Resources" you will see all the available options as well as a preview image.

More resources

Nuno Freitas
Posted by Nuno Freitas on November 28, 2011

Related articles