Creating Options Menu for Android 3.0+ & Android 2.3.x Using Text & Icons

android-logoMenu is where we add actions such as “search, share..etc”. Android 2.3.x (API level 10) or lower, the contents of your options menu appear at the bottom of the screen when the user presses the Menu. For Android 3.0 (API level 11) and higher, items from the options menu are available in the action bar.

 

Objectives:

  • Build menu items in XML
  • Compare between menu in Android 3.0 or higher and Android 2.3.x or lower.
  • Compare the different values of showAsAction menu item attribute in Android 3.0+
  • Display menu item as icon “image” or text

Environment & Tools:

  • Android ADT
  • AVD Nexus S Android 4.3 “emulator”
  • Samsung Galaxy SII Android 2.3.3 “physical device”
  • Min SDK 8
  • Target SDK 17

Library:

  • None “default settings”

( 1 ) Create Android Project

Create a new android project with default settings.

The following files will not be modified.

( 2 ) Add Menu Items

Add three menu items “search, copy and share” to res/menu/main.xml.

  • res/menu/main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:showAsAction="ifRoom"
        android:title="@string/action_search"/>
    <item
        android:id="@+id/action_copy"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="@string/action_copy"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="@string/action_share"/>
</menu>

( 3 ) Define Strings

  • res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">App</string>

    <string name="action_search">Search</string>
    <string name="action_copy">Copy</string>
    <string name="action_share">Share</string>

    <string name="hello_world">Hello world!</string>

</resources>

( 3 ) Run

On Android 3.0 or Higher it will show as following:

android-options-menu-1

Two items will show in the action barĀ  because we set showAsAction=”alwasy” and we set search items as “ifRoom”, since there is no enough room “space” to display the “Search” item it will show at bottom when we click on Menu button.

On Android 2.3.3 the menu will show up when we click on menu button:

android-options-menu-2

( 4 ) Add Icon “Image”

We will add three images to res/drawable-hdpi

  • res/drawable-hdpi

Then we will set the icon attribute in the res/menu/main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_action_search"
        android:title="@string/action_search"/>
    <item
        android:id="@+id/action_copy"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_content_copy"
        android:title="@string/action_copy"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_social_share"
        android:title="@string/action_share"/>
</menu>

Notice the icons on the top-right “search, copy & share”