Android Menu Vs Action Bar with Example Code

An Android Menu in Your App

When a new Android App project is created in the Eclipse or Android Studio IDEs there is the option to create a default activity (the Create Activity option in the New Android Application wizard). If the option is checked and Blank Activity is chosen a simple App ready to run is generated. This App simply shows the message Hello world! on the device screen (see Your First Android Hello World Java Program).   This simple App has a menu with one item called Settings. On devices with a physical (hardware) menu key, the Settings menu option appears at the bottom of the screen, when the key is pressed:

Basic Android Menu Option

On devices without a hardware menu key, Android Version 3.0 and later devices (API level 11+), an icon in the Action Bar shows the Settings menu item. This icon is referred to as the action overflow. However, due to it’s stacked appearance in this article it will be referred to as the menu icon:

Action Bar with Basic Android Menu

The above two screens show the older Android menu vs Action Bar menu, i.e. pre-Honeycomb using the physical menu key, and post-Honeycomb menu using the Action Bar icon (3 small stacked boxes icon know as action overflow). Further differences in use are examined in this article with code examples. Here is the code for this basic App:

Defining and Showing an Android Menu

In the above code it is onCreateOptionsMenu(), which is called when the menu key or menu icon is pressed. The Settings menu is shown using getMenuInflater().inflate(). It is passed the id of the menu definition, R.menu.main. This id comes from the name of the menu definition file main.xml, stored in the res/menu folder in the project tree. If the file was called mymenu.xml then the id to reference it would be R.menu.mymenu. Here is the file generated for the default project:

Selecting the Settings menu item does nothing. There is no code that is activated by that menu item in the generated project. For such a simple menu the only item of relevance in the menu.xml file is the android:title attribute. It gets the Settings string from the strings.xml file in the res/values folder:

Calling Code from an Android Menu

To respond to the Settings menu being pressed the Activity must override onOptionsItemSelected(). Here is an example to simply display a message. This code is added to the bottom of the Activity’s class before the closing brace (the MenuItem and Toast imports will be required).

Basic Android Menu Activated

Alternative Code Calling from Menu Selection for Android 3.0 and Later

If the App is designed for Android Honeycomb or latter (API 11+) an alternative to overriding onOptionsItemSelected() is to define a public method in the class (the method must take a MenuItem and return a boolean), then assign the name of that method to the android:onClick attribute in the menu definition. E.g.:

And here’s this method referenced in menu.xml.

(If an App contains both methods for calling code from a menu, onOptionsItemSelected() and android:onClick the former is used on pre-Honeycomb devices and the later on post-Honeycomb devices.)

Android Menu Item Shown in the Action Bar

One difference between the Android menu vs Action Bar is that the Action Bar can show a menu item directly. In the menu.xml file change the android:showAsAction attribute to ifRoom:

Android 3.0+ devices now show the menu item on the Action Bar instead of the menu icon:

Android Menu Action Bar Item

Several Menu Items in an Android Menu

Add multiple item definitions to the menu’s XML file to add other menu options:

Android Menu vs Action Bar Multiple Items Figure 1

Obviously the different menu captions come from different string definitions:

If the android:showAsAction=”ifRoom” attribute setting is present but the all the items do not fit on the Action Bar then the menu icon allows access to the unseen items, hence why the icon is called the action overflow:

Android Menu Multiple Items Overflow

In this instance one advantage of the Action Bar is that it can reduce by one the number of times the user presses the screen. Instead of pressing the menu icon and then selecting the menu item, the user presses the item directly.

Determining the Android Menu Item Pressed

In the method called by the menu item test the MenuItem id to see which one was pressed:

Android Menu vs Action Bar Icons

Android menus support the showing of an icon. Prior to Honeycomb the menu icons were the same size as the App launcher icons. They differed from launcher icons by being a flat image in a single color, usually grey. Gear Icon MDPI A medium density launcher icon (the blue gear icon shown here is an example) is 48×48 pixels in size. It used to be recommended that the contained image should fit into a centralized 40×40 pixel box. Thus leaving a border one twelfth of the launcher icon size. One twelfth of 48 is 4. A 4 pixel border taken from each side of the 48 width and height leaves 40×40 for the graphic image.

Simple Gear Menu IconThe menu icon required a border twice as wide as a launcher icon. For the old style menu icons the wider border reduces the contained graphic to 32×32 pixels. Thus for a pre-Honeycomb menu icon the border is one sixth of the icon size. One sixth of 48 is 8. An 8 pixel border taken from each side of the 48 width and height leaves 32×32 for the graphic image.

Gear Menu IconWith the release of Android 3.0 the border requirement for launcher icons is not as important. The menu icons for the Action Bar are now smaller, specified as 32×32 dp (density pixels). On a medium density screen that is 32×32 pixels. The image in the icon is 24×24 dp (24×24 pixels on a medium density screen). So the border is 4 pixels wide (32 minus four from each side is 24). For a light theme icons are colored #333333 with 60% opacity when enabled (30% disabled), and for a dark theme white (#FFFFFF) with 80% opacity when enabled (30% disabled). See the Iconography page on the Android Developers web site.

The parts of the icon that are not the image are transparent, as is the border. This allows the icon to sit cleanly on the background. If parts of the image in the icon need to protrude into the border area then that is allowed. The border size is a guideline and in some cases the icon image needs to use some of the border space to achieve a pleasing look. For more examples of icons look in the sub-directories of the data directories, under the various platforms in the Android SDK install location. The icon file names normally start with ic (ic_menu… for menu icons and ic_launcher… for launcher icons), this is a naming convention and not an absolute rule. There are some example launcher icons on the Android Graphic Resources page. At the Android Developers web site there is an Action Bar Icon Pack, it contains light and dark icons.

Before showing how to implement icons in an Android menu a couple of considerations need to be explained.

Why Light and Dark Android Menu Icons?

When developing an App it is possible to change the UI look by applying styles to the various screen elements. These styles collectively are known as a Theme. Since Android 4.0 (API level 14) three themes are provided by the OS that are stable and always present, Holo Dark, Holo Light and Holo Light with Dark Action Bar. These themes were present in Android 3.0+ (API level 11), however, they could be changed by the device manufacturer, as some did in earlier devices. The Holo themes were not present prior to Android 3.0. Thus the system theme prior Android 3.0 is different to the Holo themes. The Android Gingerbread release (API level 9) system theme also differed from previously releases. Finally there are rooted devices that can have different themes. This provides a problem to some standard user interface elements that are not styled with a custom theme. The settings (options) menu item is one of the problematic elements. Depending upon the device the App is running on the menu item will have a dark background with white text, or a white background with dark text. Hence the need for dark and light icons. This is not a problem if an App is being styled. However, styling an App can be a large chunk of work. This is why some developers are happy to use the devices standard theme. How does this affect icons? Without styling it is not known if an icon is guaranteed to sit on a light or dark background, unless running on Android 4.0 or later with one of the default Holo themes. There are some hacks around that can be employed, however, one of the easiest solutions is to deploy an icon that is dark grey with a very light or white border. That way one icon can be used for both dark and light backgrounds, and will work on all devices and Android versions:

One Icon for Android Light and Dark Settings Menu

Android Menu Icon Size Issue

Which of the two icon sizes should an App use? The older 48×48 dp? The newer 32×32 dp? Both? With pre-Honeycomb devices falling in numbers eventually only the 32×32 dp icons will be required. In the meantime both sizes should be provided. It is possible to use just the newer size. The 32×32 dp icon works on pre-Holo devices (see previous image). It appears smaller but is still adequate. This allows the option to only produce one set of icons for the settings menu in an App.

Setting an Android Menu Icon

To set a menu icon for an Android settings menu first add the icon file to the res/drawable folder. Then in the menus XML file assign it to the android:icon attribute:

(See State List if an enabled and disabled icon is used.)

To display only the icon or only the text remove the appropriate attribute. For Android 3.0 and later that has the action bar the icon is shown by default. The text can be displayed by adding withText to the showAsAction attribute. Then if the action bar has room for both the menu icon and the menu text both are shown:

Android Icon Text Menu

Android Menu Icon Physical Size

Sizes of screen elements should be, and are normally, specified in density pixels. A density pixel is apporoximately the same size on all device screen densities. There are five screen densities, low (LDPI), medium (MDPI), high (HDPI), extra high (XHDPI) and extra extra hiigh (XXHDPI). The low screen density is no longer popular and is no longer supported by many Apps. Medium density is the base size where one physical pixel is approximately the same size as one density pixel. The other density sizes are multiples of the medium density. What this means is that to supply a menu icon that looks good on a range of devices provide a bitmap for each density:

  • LDPI = MDPI * 0.75 = 32 * 0.75 = 24×24 pixel icon (includes 3 pixel border), store in res/drawable-ldpi
  • MDPI base 32×32 pixel icon (includes 4 pixel border), store in res/drawable-mdpi and res/drawable (for Cupcake)
  • HDPI = MDPI * 1.5 = 32 * 1.5 = 48×48 pixel icon (includes 6 pixel border), store in res/drawable-hdpi
  • XHDPI = MDPI * 2 = 32 * 2 = 64×64 pixel icon (includes 8 pixel border), store in res/drawable-xhdpi
  • XXHDPI = MDPI * 3 = 32 * 3 = 96×96 pixel icon (includes 12 pixel border), store in res/drawable-xxhdpi

 Further Information for Help on Android Menu Vs Action Bar

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.