Android SDK: Options Menu Tutorial

In this tutorial we will create an options menu. The options menu is the menu that pops up (usually below) in an application whenever the user presses the Android options key on the phone.

an Android application displaying an options menu, the options menu has two items

Android application with two items in options menu, user is selecting the Save option

The menu, pictured above, will consists of two options each with an icon and descriptive text. The selection of anyone of the options will trigger an event, in this case a toast message, pictured below.

an android toast message displaying test after option selection

Toast message displayed after selection of the Save option

Creating The Menu’s Layout

For every menu you want you need to add an XML menu layout file to the “menu” folder under the “res” folder, if the menu folder is not there go ahead and create one. I will call my menu xml file “activity_home_menu.xml”

Note: If you are using the latest version of the Android ADK Eclipse will automatically add a menu layout xml file for each activity you create, the name will be the same as the activity’s layout file.

The contents of our menu XML file consist of a <menu> tag with an <item> tag for each option I want my menu to have. The Item tag requires an id and title to identify the option by code and visually respectively, an icon may also be added.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@+id/item1" android:title="Launch Camera" android:icon="@android:drawable/ic_menu_camera" />
  <item android:id="@+id/item2" android:title="Save" android:icon="@android:drawable/ic_menu_save" />
</menu>

Many icons are available withing android, that’s what we are using, you may also supply your own icons. You can see what other menu icons are available by using the Eclipse’s auto-complete function after typing “@android:drawable/”.

Attaching The Menu To The Activity

In the activity Java file, to attach a menu to an activity, the onCreateOptionsMenu is implemented as follows.

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

Identifying Each Menu Option

In the activity Java file, to identify each option when it is selected, the OptionsItemSelected method is used.

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

    	return super.onOptionsItemSelected(item);
    }
}

The “item” parameter and its getItemId() method can be used together with a switch statement to identify which option was touched.

    	// TODO Auto-generated method stub
    	switch (item.getItemId()) {
		case R.id.item1:
			Toast.makeText(this, "You selected the camera option", Toast.LENGTH_SHORT).show();
			break;
		case R.id.item2:
			Toast.makeText(this, "You selected the save option", Toast.LENGTH_SHORT).show();
			break;
		default:
			break;
		}

Full Code

This is the code above all where it should go. Thanks for reading.

HomeActivity.java

package com.example.optionsmenu;

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

public class HomeActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    	// TODO Auto-generated method stub
    	switch (item.getItemId()) {
		case R.id.item1:
			Toast.makeText(this, "You selected the camera option", Toast.LENGTH_SHORT).show();
			break;
		case R.id.item2:
			Toast.makeText(this, "You selected the save option", Toast.LENGTH_SHORT).show();
			break;
		default:
			break;
		}
    	return super.onOptionsItemSelected(item);
    }
}

res/layout/activity_home.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        tools:context=".HomeActivity" />

</RelativeLayout>

res/menu/activity_home.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@+id/item1" android:title="Launch Camera" android:icon="@android:drawable/ic_menu_camera" />
        <item android:id="@+id/item2" android:title="Save" android:icon="@android:drawable/ic_menu_save" />
</menu>

Related posts: