Tech and Media Labs
This site uses cookies to improve the user experience.




Android ActionBar

Jakob Jenkov
Last update: 2014-11-06

The Android ActionBar component is the top menu bar in Android apps. This screenshot shows an Android ActionBar at the top of the screenshot:

Android ActionBar

Android's ActionBar can contain menu items which become visible when the user clicks the "menu" button on Android phones, or the "menu" button in the ActionBar on tablets. The menu button on tablets is the "hamburger" icon (the three horizontal stripes under each other) in the upper right corner.

In this text I will explain how to add menu items to the Android ActionBar. You can add menu items and decide if they should be visible in the ActionBar always, if there is space for them, or only be visible in the menu shown when the user clicks the menu button.

Please note, that from Android 5 and forward there is a new Toolbar widget which can do the same things as the ActionBar and more. From Android 5 and forward you should probably use the Toolbar instead of the ActionBar.

Adding an ActionBar

All activities that use the theme Theme.Holo or a theme derived from Theme.Holo will automatically contain an ActionBar. You can see what theme your app uses in the src/main/res/values/styles.xml.

Adding Menu Items to the ActionBar

You add menu items to the ActionBar in the menu XML file src/main/res/meny/???.xml file. The menu file is not actually called ???.xml. The menu file is typically called the same as the activity it belongs to, but without the "activity" part. Thus, if the activity the menu belongs to is called MyActivity the menu file will be named my.xml .

Here is an example of a menu XML file:

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

    <item android:id="@+id/action_favourite"
        android:icon="@drawable/ic_action_favorite"
        android:title="@string/action_favorite"
        android:showAsAction="ifRoom" />

    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        android:showAsAction="never" />
</menu>

This menu file contains two item elements. Each item element defines a menu item in the ActionBar. The first item element contains 4 attributes:

  • android:id
  • android:icon
  • android:title
  • android:showAsAction

The android:id attribute specifies the id of the menu item. This works like ids anywhere else in your Android app. An android:id value starting with a @+id/ will create a constant in the R.menu constant collection.

The android:icon attribute references an icon in the drawable directories. Remember to create one icon for each screen resolution. You can read more about how to do that in Android's official Iconography guide. This guide also contains a link to downloading a set of standard icons you can use, so you don't have to draw every single icon yourself.

The android:title attribute value contains the title of the menu item. In the example above the attribute value @string/action_settings references a string defined in the src/main/res/values/strings.xml .

The android:showAsAction attribute specifies how the menu item is to be displayed. You can use one of these values:

  • never
  • ifRoom
  • ifRoom|withText
  • collapseActionView
  • always

The value never means that the menu item will never visible in the ActionBar as an icon. It will only be visible when the menu button is clicked, in the menu that is popping up.

The value ifRoom means that the menu item will be visible in the ActionBar if there is room for it. Different size devices have space for a different number of menu items, so if a given device has room for the menu item in its ActionBar, the menu item will be displayed.

The value ifRoom|withText means that the menu item should be displayed with both icon and title if there is room for it. If there is not room for both icon and title, Android will attempt to show just the icon (still, only if there is also room for the icon).

I don't yet know exactly what the collapseActionView value means. The explanation in the official Android documentation is a bit weak about its meaning.

The value always means that the menu item should always be displayed in the action bar.

Inflating the Menu Into the ActionBar

In order for the menu items defined in the menu XML file to be displayed, you need to inflate the menu file. You do so inside the onCreateOptionsMenu() method of the activity you want to add the ActionBar to. Here is an example:

public boolean onCreateOptionsMenu(Menu menu) {

    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.my, menu);
	
    return super.onCreateOptionsMenu(menu);
}

Notice the call to inflater.inflate(R.menu.my, menu). The R.menu.my parameter is the constant referring to the menu XML file. The menu parameter is the menu into which you want to inflate the menu items. This parameter is passed as parameter from Android to the onCreateOptionsMenu().

Handling ActionBar Item Clicks

You can respond to clicks on the ActionBar menu items inside the onOptionsItemSelected() method of the activity hosting the ActionBar. Here is an example:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	int id = item.getItemId();
	
	if (id == R.id.action_favorite) {
	    // Mark the currently visible content (e.g. article) in the activity as a favorite
		// - requires app specific code which is omitted here.
		
		// Tell Android that the item click has been handled. 
		return true;
	}
	return super.onOptionsItemSelected(item);
}

This example first looks at the item id of the MenuItem passed as parameter to the onOptionsItemSelected() method. This MenuItem parameter represents the menu item that was clicked.

If the id of the clicked menu item is equal to R.id.action_favorite (the id defined for this menu item in the menu XML file), then the app will do something related to the favorite menu item. Typically some action will be performed which remembers that whatever is visible in the hosting activity should be marked as a favorite. This code is left out here, because how something is marked as a favorite, and what that even means, is specific to the app doing it.

If the item click was handled by the app, then the onOptionsItemSelected() method should return true. Else it should return super.onOPtionsItemSelected(item), giving the superclass of your activity class a chance to handle the menu item click.

Showing and Hiding the ActionBar

You can hide the ActionBar from anywhere inside the hosting activity, using this code:

ActionBar actionBar = getActionBar();
actionBar.hide();

If the ActionBar is hidden you can show it again using this code:

ActionBar actionBar = getActionBar();
actionBar.show();

The getActionBar() method is inherited from Activity so it is available anywwhere in your Activity subclass.

A Full ActionBar Example

Here is the code for a full ActionBar example:

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.my, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
  
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

The menu layout XML file looks just like shown earlier in this text.

Here is a screenshot of how the ActionBar looks:

Android ActionBar with one menu item visible

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC