Displaying menu options when the user presses the menu button on their phone

Today we will look at how to add menus to your Android App.  In the latest version of my Maths Test App (If you haven't already downloaded it, then download it now by searching for 'Sundev Pabla' on the Android Market) the user is presented with a "Set Game Preferences" menu option when they press the menu button on their phone.

Creating a menu using xml

Like user interfaces (layouts), menus are also defined in xml files.  The following xml defines the one menu option for my Maths Test App:


<?xml version="1.0" encoding="utf-8"?>
<menu
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_setPreferences"
    android:icon="@android:drawable/ic_menu_preferences"
    android:title="Set Game Preferences"></item>  
</menu>

In the xml file I am giving the menu option an id, so that I can refer to it in code, I'm setting an icon for the menu option and I am setting the title displayed to the user for the menu option.

Loading the Menu by overriding the onCreateOptionsMenu function

To load your menu, you must override the onCreateOptionsMenu function in your code.  The following code extract is the onCreateOptionsMenu for my Maths Test App:



    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
    super.onCreateOptionsMenu(menu);
    MenuInflater mi = getMenuInflater();
    mi.inflate(R.menu.main_menu, menu);
    return true;
    }

The MenuInflater is used to load the menu.  In my case the xml file is called main_menu.xml and is located in res/menu folder in the project and can be accessed from the R class as shown in the extract above.

Handling the selection of a menu option by overriding onMenuItemSelected function

In order to handle a user clicking on a menu option you must override the onMenuItemSelected function. This function is called when the user clicks on a menu option, an object of type MenuItem is passed into the function and can be interrogated to determine which menu option the user clicked on.  The following code extract is the onMenuItemSelected function for my Maths Test App:


    // Handle selection of menu item
    @Override
    public boolean onMenuItemSelected(int featureId, MenuItem item)
    {
    switch(item.getItemId())
    {
    case R.id.menu_setPreferences:
    cUserPreferences.handlePreferenceSettings(this);

    }
    return super.onMenuItemSelected(featureId, item);
    }
In this function I check the id of the menu item/option clicked by the user and then use a case statement to handle the option clicked by the user (I only have the one menu option, so I didn't need to check the id or use a case statement, but this way I have future proofed my app in case I add in more menu options in the future.).  When the user clicks the menu option I call a function called handlePreferenceSettings - in this function I display a dialog to the user in which they can set their game preferences.    More on custom dialogs in a future posts - for now just have a play with creating menu options.  See if you can use what you have learnt above to present menu options to a user, maybe you could use Google to work out how to display a dialog to the user when they select a menu option. Good luck and all the best until next time.