Advanced User Interfaces - Menus

We are going to continue working with our A2L1AndvancedUI project in this session. Using Eclipse’s
Package Explorer, open the project, and expand the src/package.name nodes, and res nodes.

Our next goal is to add additional functionality to our Android applications using menus. All Android
devices include a menu button at the bottom of the device. This can be a hardware button, or software
based, depending on the type of device and operating system version that you’re using.

Menus are a great way to extend the functionality of your application, and add features without
cluttering up the interface with buttons or other UI elements.

To get started, we first need to define a menu for our application to use. Menus go into a special folder
within the RES folder called menu. To create the menu.xml file, select the RES folder, and click on the
Add New Android file in the main toolbar.

Select Menu as the Resource Type, and type in menu.xml as the file name. A new folder called menu
will be created automatically, and a new file, menu.xml, will be created for you as well.

1
 Add the following code to the menu file to define nine different menu choices. Note that each menu
option has its own ID, title, and a different icon. For menu options 7 through 9, we’ll use icon1.

<?xml version="1.0" encoding="utf-8"?>

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

<item android:id="@+id/mnu1" android:title="Menu 1" android:icon="@drawable/menu_icon1" />

<item android:id="@+id/mnu2" android:title="Menu 2" android:icon="@drawable/menu_icon2" />
<item android:id="@+id/mnu3" android:title="Menu 3" android:icon="@drawable/menu_icon3" />
<item android:id="@+id/mnu4" android:title="Menu 4" android:icon="@drawable/menu_icon4" />
<item android:id="@+id/mnu5" android:title="Menu 5" android:icon="@drawable/menu_icon5" />
<item android:id="@+id/mnu6" android:title="Menu 6" android:icon="@drawable/menu_icon6" />
<item android:id="@+id/mnu7" android:title="Menu 7" android:icon="@drawable/menu_icon1" />
<item android:id="@+id/mnu8" android:title="Menu 8" android:icon="@drawable/menu_icon1" />
<item android:id="@+id/mnu9" android:title="Menu 9" android:icon="@drawable/menu_icon1" />

</menu>

Next, we simply need to define the code that creates the menu for us within our Application, and define
what we want to happen for each of the menu clicks that the user performs.

2
Switch to AdvancedUIActivity.java file, and select the Source menu in Eclipse. Choose Override /
Implement Methods, and add the onCreateOptionsMenu and onOptionsItemSelected methods by
selecting them in the dialog box.

Add the following code to the onCreateOptionsMenu method:

This code simply “inflates” our menu to be displayed. You can see that we’re referencing the
R.menu.menu constant, which is a direct reference to the XML file we just built.

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

Now, let’s modify the onOptionsItemSelected method, which is used when an option in our menu is
selected by the user.

3
@Override
public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.mnu1:
Toast.makeText(getApplicationContext(), "Menu 1", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu2:
Toast.makeText(getApplicationContext(), "Menu 2", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu3:
Toast.makeText(getApplicationContext(), "Menu 3", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu4:
Toast.makeText(getApplicationContext(), "Menu 4", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu5:
Toast.makeText(getApplicationContext(), "Menu 5", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu6:
Toast.makeText(getApplicationContext(), "Menu 6", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu7:
Toast.makeText(getApplicationContext(), "Menu 7", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu8:
Toast.makeText(getApplicationContext(), "Menu 8", Toast.LENGTH_SHORT).show();
break;
case R.id.mnu9:
Toast.makeText(getApplicationContext(), "Menu 9", Toast.LENGTH_SHORT).show();
break;
}

return true;
}

For the time being, all menu options will simply display a short toast message on the screen. We’ll add
some dialog box interactions to the menus in the upcoming session.

The code, as you can see, consists of a switch statement, which identifies the menu that was clicked by
its item id. (item.getItemId()). From here, we simply run the case for the correct menu. So if getItemId
returns the value for R.id.mnu1, then the code within the case R.id.mnu1 runs, and ends when it
encounters the break. You can, of course, call other methods, launch other activities, and perform just
about any type of functionality necessary by your application at this point.

Save your work, and run your application. Your results should look like this:

4
Clicking on any of the menu options, displays a short toast. Notice that only six menu choices are visible
by default. The rest are selectable in the “More” menu choice.