Using Android's Action Bar

  • Written by  Clive

Where's the action?

Action Bar iconThe Action Bar

Android Action Bar

The Action Bar is at the top of every activity screen

The app icon displays in it by default.

You can replace the app icon with your company logo if you wish.

You can also include tabs, drop-down lists, pop-ups and menus in the Action Bar.

I’ll show you how to include menu items as Action items in the Action Bar.

Use the Action Bar on all devices, well almost…

The Action Bar has been available since Android 3.0 (Honeycomb, API level 11).

The Support Library

Using the support library makes the Action Bar available since Android 2.1 (API level 7).

We’ll be using the support library in our tutorial.

Adding an Action Bar

Import the ActionBar class

Make sure that you import the correct ActionBar class:

Action Bar support class import

We’re using the support library class because we’re targeting earlier devices

Which class you import depends on the devices that you target:

  • API level 11 and above – import ActionBar
  • API level 10 and below – import This is the one we’ll import

Create the activity

Create the activity by extending the ActionBarActivity class.

Include a theme

Action Bar support theme

Edit the AndroidManifest.xml file to include the Theme.AppCompat.Light theme

Hiding the Action Bar

You can hide the Action Bar:

Hide the Action Bar

Use getSupportActionBar() to get an instance of the Action Bar then call hide() to hide it

Showing the Action Bar

You can show the Action Bar by getting an instance of the Action Bar and then call show():

Show the Action Bar

Showing the Action Bar

Brand your app. Use your logo

Narrow Action Bar

The image on the left can either be the app icon or your company logo

Which image is displayed depends on these settings in the manifest:

The icon attribute image is the default

Include the logo attribute and this image will replace the icon image.

But there’s a catch…

The logo image will not show on any device running Android 10 and lower. Unless…

You include this code in your activity:

Get an instance of the action bar by calling getSupportActionBar(). Then call setLogo() to set the logo

If you use this workaround then you don’t have to include the logo attribute in the manifest.

Action items

Action items are menu options.

You can display the most important action items in the Action Bar.

Action items that are not important or cannot fit in the Action Bar end up in the action overflow.

Action Bar overflow button

You can access the action overflow by pressing the action overflow button

Action Bar overflow items

Pressing the overflow button reveals the Settings item. The Help and Phone items are displayed as Action Buttons in the Action Bar

Creating the action items

Create the action items in a menu file and save it in the res>menu folder.

Here’s a code snippet:

Action items xml code

Note the following:

  • icon – this image will show in the Action Bar. It will not show in the overflow
  • title – the title will show in the overflow. It will show in the Action Bar, if:
    • you include withText in the showAsOption attribute
    • there is room
  • app:showAsAction – because we are using the support library, we must use the custom namespace (app) defined in the <menu> tag of the menu xml file:

Getting the app namespace

The namespace is defined in the menu tag

  • showAsAction – use this to declare whether or not you want the action item to appear in the Action Bar. Some common options are:
    • ifRoom – shows the action item in the Action Bar if there is room
    • withText – includes the action item’s title if there is room
    • never – never show this action item in the Action Bar

Always include an action title

You should always include an action title because:

  • only a title appears in the action overflow
  • blind users need it for their screen readers
  • long-pressing the Action Button displays a tooltip

Action Bar tooltip

Long-pressing the Action Button displays the tooltip, Phone

Getting action icons

You can download free action icons from the official Android site

Displaying the Action Bar in an activity

The activity’s onCreateOptionsMenu() inflates the menu file and places the action items in the Action Bar.

Here’s the code:

Creating the Action Bar

This inflates the menu resource file and loads the action items into the Action Bar

Note the following:

  • getMenuInflater().inflate() – inflates the menu found in the resource file into the menu object

Handling clicks

Pressing an action item, calls onOptionsItemSelected(), passing the selected item as a parameter.

Here’s the code:

Handling the Action Bar selections

Note the following:

  • getItemId() – gets the ID of the selected action item
  • switch() – we use a switch statement to match the selected item ID with the id’s of our menu items as saved in the menu resource file. The appropriate code is executed if it matches
  • message – we create a message for each of the action item id’s. The matching id’s message will display as a Toast

Pressing an Action Button

Action item icons in the Action Bar are known as Action Buttons.

Pressing the Phone Action Button uses an intent to start another activity.

The second activity

This activity demonstrates the Split Action Bar and Up Navigation.

Splitting the Action Bar

You can split the Action Bar when running on narrow screens.

The action items will display at the bottom of the screen. This leaves room for navigation and title elements at the top.

Split Action Bar - narrow screen

A narrow screen with a split Action Bar. The separate bar at the bottom of the screen displays the action items

Split Action Bar - wide screen

The bar is not split on wide screens

Splitting the Bar: It depends on the device

Accommodating API 14 and higher

For devices using API level 14 or higher, add the uiOptions attribute to specific activities or the application as a whole.

Accommodating API 13 and below

For devices using API level 13 or lower, add the <meta-data> element to the activities where you want to split the action bar:

Split Action bar manifest code

Include the first <meta-data> element to split the Action Bar on older devices

Navigating up with the app icon

Up navigation takes the user to the parent of the current activity.

The Back button takes the user to the previous activity.

Action Bar Up navigation

If pressing an action button in activity A starts activity C then pressing the Up Navigation icon in activity C will return the user to activity A. If the user reached activity C from A via B then, pressing the Back button will first return to activity B and then to activity A

Enable the app icon as an Up button

Action Bar Up Navigation caret

The caret to the left of the logo icon indicates an Up Button

Here’s the code:

Action Bar Up Navigation code

Use getSupportActionBar() to get an instance of an Action Bar then call setDisplayHomeAsUpEnabled(true) to enable the Up Button

For it to work you need to specify the parent activity in the manifest file:

Action Bar Up Navigation manifest code

Add this code to the activity where you have enabled the Up Button

Run the app

The first activity

The first activity will display the Action Bar with the Strawberry logo on the left and the Action Buttons on the right.

Change the device orientation. The Phone action item’s title is displayed in landscape mode but not in portrait mode.

Pressing the Phone action button starts the second activity.

The second activity

The Action Bar is split if the screen is narrow.

Change the device orientation. The Action Bar is not split when the device is in landscape mode.

The app logo is also an Up Button. Pressing the logo returns the user to the first activity.

I hope that you have found this tutorial useful.

You may also be interested in Android Fragments, Action Bar, Menus, Notifications and Tabs.

This tutorial was created using Android Studio. You can download the project files here  File download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.