Android UI Controls Tutorial: Menu

PrevMainNext

What are Menus?

Menus are a common way of allowing app users to interact with an application to access a particular setting or to enable/disable/configure a particular feature.

Menu Types

Android supports 3 types of menus. These include:

  • Options Menu
  • Context Menu
  • Submenu

Options Menu

This is the menu that appears when the user presses the Menu button on their Android phone. Each activity is always associated with an Options Menu.

Context Menu

As the name itself suggests, these are menus which appear in context of a particular item/ selection.

Submenu

If a menu is hierarchical and a menu item is a menu in itself, it’s referred to as a submenu.

Creating a Menu

Though it’s possible to create a menu using the Menu class, Google recommends developers should do so by using XML menu resource configuration files. As with layouts, the objective of building menus through XML files is to separate the user interface elements from the business logic and conform to the MVC (Model View Architecture) principle.

To build a menu, you need to create an XML file under the res/menu/ directory in your project. The <menu> tag creates the menu, the <item> tag specifies the various items in the menu while the <group> tag is used to club items into specific sections as needed.

As an example, let’s create a menu resource configuration file named menu_test.xml

 <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/first"
          android:icon="@drawable/first"
          android:title="@string/First" />
    <item android:id="@+id/second"
          android:icon="@drawable/second"
          android:title="@string/Second" />
</menu>

So, in this example, we create a menu with two items named First and Second. Each item has the following properties id, icon and title. The id serves as the unique identifier for the resource while the icon should point to a valid image in the res/drawable folder. The title represents the actual caption of the menu item.

Let’s create an Android project titled MenuTest using Eclipse (similar to how we created Hello World in Module 1) and modify the main.xml to have a textview label which prompts the user to press the Menu button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/point_to_menu"
</LinearLayout>

Let’s define the point_to_menu value in the strings.xml file as shown below.

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

    <string name="point_to_menu">Press the Menu Button!</string>
    <string name="app_name">MenuText</string>

</resources>

As the next step, we need to inflate the menu using MenuInflater as shown below.

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

We do this in the onCreateOptionsMenu() as this method gets called the first time when the Activity is loaded.

So, this is how our TestMenu.java file would look like.

package com.learncomputer;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class TestMenu extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
    }
    
    public boolean onCreateOptionsMenu(Menu menu) {
    	MenuInflater inflater = getMenuInflater();
    	inflater.inflate(R.menu.menu_test, menu);
    	return true;
    }
    
}

Running the TestMenu project on the simulator would show the following.

TestMenu project on the simulator

Running the MENU button would show the two menu options – First and second as shown below.

MENU button

The next step is to do certain action when the user clicks on a specific menu item. To do this, we need to override the onOptionsItemSelected method as shown below.

public boolean onOptionsItemSelected(MenuItem item) {
    	switch (item.getItemId()) {
    	case R.id.first:
    		Toast.makeText(this, "You clicked " + getResources().getString(R.string.first) + " menu option",
            		Toast.LENGTH_SHORT).show();
    		return true;
    	case R.id.second:
    		Toast.makeText(this, "You clicked " + getResources().getString(R.string.second) + " menu option",
            		Toast.LENGTH_SHORT).show();
    		return true;

    	default:
    		return super.onOptionsItemSelected(item);
    	}
    }

Running the Test Menu project again and selecting any first menu option would show a toast message as shown below.

a toast message
PrevMainNext