Create and Use Android Menus

Introduction to Android Menus

Android menus are user interface elements of any element. As interface plays the main role in any application. If the interface of any application is not understandable and user experience is not good, then if the application can solve a rocket science it is of no use for the user. Almost all the applications use menus. In Android after version, 3.0 users got rid of the traditional menu button. Action bar started providing the features of the menu button.

Why use Android Menus

Menus are used to make Android users comfortable and to make the layout understandable. Android menus combine the similar items together. For example, if all the functions like add, update, delete are displayed with every individual contact item in the phonebook, then it will give a very messy impression to the user. So Android provides a feature when user taps or long tap on any item it displays a menu for related operations.

How to use Android Menus

For all the types of menus, you should place a separate XML file in the res->menu folder. As Android provides a standard XML format to define menu which must be placed in an XML menu resource. You can also dynamically create an options menu in your code.

To use the Android menu, you can inflate it in your activity by loading it as a menu object.

Components of XML menu resource

XML menu in Android consists of the following components.

<menu>
This tag is used to define a menu, which is a container for the menu items. A menu item must be the root node for the file and can hold one or more items and groups.

<item>
This tag is used to create a menu item, which represents a single item in the menu. You can create a sub menu by creating a nested menu element.

<group>

Group tag is optional in Android menus. The group is the invisible container for item element. It allows you to categorize menu items so that items can share similar properties like active state and visibility.

Syntax of Android Menus

<menu xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@+id/action_settings“
           android:orderInCategory="100"
           android:showAsAction="never"
           android:title="@string/action_settings"/>
</menu>

<item android:id="@+id/action_settings“

android:orderInCategory="100"

android:showAsAction="never"

android:title="@string/action_settings"/>

</menu>

Attributes of XML Menu Resources

id
A resource id is the unique identity of the item, which is used to identify the resource.

icon
It is a reference to a drawable item to be used as the item’s icon.

title
It is a reference to a string to be used as an item’s title.

showAsAction
This attribute specifies when and how the item should appear as an action item in the action bar.

Types of Menus in Android

There are three types of menus in Android

Options Menu
Context Menu
Popup Menu

Options Menu

The options menu is the global menu for the Android application. The user can view options menu in all the activities of an android application. So you can say that it has a global impact on the Android application. The options menu is the primary collection of the menu items in Android.

In the options menu, actions and other relevant options are placed. By default system places all the items in the action bar, i.e. action overflow. The user can open options menu through the action overflow icon in the top right corner of the screen. To enable quick access, you can also promote some items to appear in the action bar by adding.

android:showAsAction="ifRoom"

1	android:showAsAction="ifRoom"

Creating Options Menu

To specify the options menu for an activity override onCreateOptionsMenu() In this method, you can inflate your menu resource (defined in XML) into the Menu provided in the callback.

Syntax

You can inflate menu in your code through

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

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

Creating Options Menu through XML

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

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/options_property1"
        android:title="Property 1" />
        
    <item
        android:id="@+id/options_property2"
        android:title="Property 2" />
</menu>

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

<item

android:id="@+id/options_property1"

android:title="Property 1" />

<item

android:id="@+id/options_property2"

android:title="Property 2" />

</menu>

Dynamically Create Options Menu

If you want to dynamically create an Options Menu you must overload onCreateOptionsMenu() method with Menu object as parameters. To add an item to the menu, menu.add() method is used which takes 4 parameters i.e. Item group Id, Item Id, Item order(Menu.NONE if the order is not important) and Title of the item.

You must call this method through the super class as it adds some additional system options.

@override
public boolean onCreateOptionsMenu(Menu menu)
{
    super.onCreateOptionsMenu(menu);
    //inflate the menu and add items
    getMenuInflater().inflate(R.menu.main, menu);
    String title = "Dynamic Menu";
    int itemId = Menu.nonel
    int itemOrder = 1;
    menu.add(groupId, itemId, itemOrder, title);
    return true;
}

@override

public boolean onCreateOptionsMenu(Menu menu)

{

super.onCreateOptionsMenu(menu);

//inflate the menu and add items

getMenuInflater().inflate(R.menu.main, menu);

String title = "Dynamic Menu";

int itemId = Menu.nonel

int itemOrder = 1;

menu.add(groupId, itemId, itemOrder, title);

return true;

}

Handling the Click Events of Options Menu

Whenever the user selects an item from the options menu (including action items in the action bar), the system calls the method.onOptionsItemSelected() This method passes the MenuItem selected. You can identify the item by calling, getItemId() which returns the unique ID for the menu item. When you successfully handle a menu item, it returns true. If you don’t handle the menu item, you should call the superclass implementation of its onOptionsItemSelected() method. Its default implementation returns false.

Syntax

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection
switch (item.getItemId()) 
{
    case R.id.options_property1:
        //do somethong
        return true;

    case R.id.options_property2:
        //do something
        return true;

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

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle item selection

switch (item.getItemId())

{

case R.id.options_property1:

//do somethong

return true;

case R.id.options_property2:

//do something

return true;

default:

return super.onOptionsItemSelected(item);

}

Updating Options Menu Dynamically

In case if you want to update an options menu on run-time i.e. If you want to dynamically update options menu, you must override onPrepareOptionsMenu() method. This method is called before the menu is shown. By using this method you can dynamically add, update or remove options from the options menu. You can also enable/disable and manage the visibility of the menu items.

To execute onPrepareOptionsMenu(), you must call supportInvalidateOptionsMenu(). In the below example you will learn how to dynamically add and remove a menu item.

@override
public boolean onPrepareOptionsMenu(Menu menu)
{
    Log.i(TAG, "Updating Menu Items");//Maintain log of actions
    if(isItemOneSelected && !isItemAdded)//check whether the item is selected or not and whether new item is already added or not
    {
        Log.i(TAG, "Adding New Item in Menu");//Maintain log of actions
        menu.add(0, MENU_ITEM+1, Menu.NONE, "New Item");//adding a new item in the menu
        isItemAdded=true;setting the Item added property to true so it must not be added again
    }
    
    if(isRemoveItem)//check if item is already deleted or not
    {
        Log.i(TAG, "Removing Old Item in Menu");//Maintain log of actions
        menu.removeItem(MENU_ITEM+1);//remove item from the menu items
                    //setting the properties for the checks
                isRemoveItem=false;
        isItemOneSelected=false;
        isItemAdded=false;
    }
    return true;
}

@override

public boolean onPrepareOptionsMenu(Menu menu)

{

Log.i(TAG, "Updating Menu Items");//Maintain log of actions

if(isItemOneSelected && !isItemAdded)//check whether the item is selected or not and whether new item is already added or not

{

Log.i(TAG, "Adding New Item in Menu");//Maintain log of actions

menu.add(0, MENU_ITEM+1, Menu.NONE, "New Item");//adding a new item in the menu

isItemAdded=true;setting the Item added property to true so it must not be added again

}

if(isRemoveItem)//check if item is already deleted or not

{

Log.i(TAG, "Removing Old Item in Menu");//Maintain log of actions

menu.removeItem(MENU_ITEM+1);//remove item from the menu items

//setting the properties for the checks

isRemoveItem=false;

isItemOneSelected=false;

isItemAdded=false;

}

return true;

}

Context Menu

A context menu only affects the only specific item or the context in the user interface. You can use the context menu for any view but most of the time context menus are used for ListView and GridView along with other View Groups in which the user can perform direct actions on each of the items.

You can use context menu through two different ways

Floating Context Menu
A menu appears as a floating list of menu items in the floating context menu. As it is shown in the dialog box, when the user long clicks on any view which provides some actions on the view. The user can only perform one contextual action at a time.
Contextual Action Mode
This mode is the default system implementation of the action mode which displays a context action bar at the top of the screen. These actions are only for the selected item/items.

Creating a Context Menu

Contextual action mode

The contextual menu is only available on Android 3.0 and above, and it is the preferred technique for contextual actions when available. If the Android version is lower than 3.0, then you should fall back to floating context menu.

The Contextual action mode is the system implementation of ActionMode. Contextual mode focuses the menu bar on the screen for the user action.

Action Mode: Action mode provides alternate ways of displaying menus.

Create Context Menu in XML

Create a new menu in res -> menu folder. In XML create a menu and place items as required.

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

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/context_property1"
        android:title="Property 1" />
        
    <item
        android:id="@+id/context_property1"
        android:title="Property 1" />
</menu>

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

<item

android:id="@+id/context_property1"

android:title="Property 1" />

<item

android:id="@+id/context_property1"

android:title="Property 1" />

</menu>

Create Context Menu using ListView

You can also populate your context menu using ListView. In this case, you will need to use ArrayAdapter and an instance of ListView and add items to it using setAdapter() method.

String[] aboutlist; //array of String containing list items

aboutlist = getResources().getStringArray(R.array.aboutlist); //get resources from the string array
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,aboutlist);//using array adapter

ListView listview = (ListView) findViewById(R.id.listView1);// creating instance of list view
listview.setAdapter(adapter);//populating list view

String[] aboutlist; //array of String containing list items

aboutlist = getResources().getStringArray(R.array.aboutlist); //get resources from the string array

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,aboutlist);//using array adapter

ListView listview = (ListView) findViewById(R.id.listView1);// creating instance of list view

listview.setAdapter(adapter);//populating list view

Create and Use Floating Context Menu

If you want to create floating context menu then you must follow the steps below

Register the view to which context menu should be associated by using registerForContextMenu() method and passing the view as parameters.

String[] aboutlist;

aboutlist = getResources().getStringArray(R.array.aboutlist);
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,aboutlist);

ListView listview = (ListView) findViewById(R.id.listView1);

listview.setAdapter(adapter);

registerForContextMenu(listview); //register for context view and passing list view as parameter

String[] aboutlist;

aboutlist = getResources().getStringArray(R.array.aboutlist);

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,aboutlist);

ListView listview = (ListView) findViewById(R.id.listView1);

listview.setAdapter(adapter);

registerForContextMenu(listview); //register for context view and passing list view as parameter

Implement and override onCreateContextMenu() method, so when the view gets a long-click event onCreateContextMenu() can perform some desired action provided in the implementation. This is where you inflate the menu resource.

@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo) {
     super.onCreateContextMenu(menu, v, menuInfo);
     MenuInflater inflater = getMenuInflater();
     inflater.inflate(R.menu.about_menu, menu);
}

@Override

public void onCreateContextMenu(ContextMenu menu, View v,

ContextMenuInfo menuInfo) {

super.onCreateContextMenu(menu, v, menuInfo);

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.about_menu, menu);

}

Implement onContextItemSelected() method so when the user selects any menu item, this method calls and perform some desired functionality.

@Override
public boolean onContextItemSelected(MenuItem item) {
    AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getMenuInfo();

    switch (item.getItemId()) {
    case R.id.context_property1:
    {
        //display toast on item selected
        Toast.makeText(getApplicationContext(), "Edit: " + info.position, Toast.LENGTH_SHORT).show();
        return true;
    }
    default:
    {
        return super.onContextItemSelected(item);
    }
    }
}

@Override

public boolean onContextItemSelected(MenuItem item) {

AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getMenuInfo();

switch (item.getItemId()) {

case R.id.context_property1:

{

//display toast on item selected

Toast.makeText(getApplicationContext(), "Edit: " + info.position, Toast.LENGTH_SHORT).show();

return true;

}

default:

{

return super.onContextItemSelected(item);

}

Popup Menu

A popup menu is anchored to the view and also known as the modal menu. It appears below the anchor view if some space is available otherwise above the view depending upon the space.

You can provide an overflow style menu that includes actions for specific content and it can also be used for a drop down menu same like a spinner which does not retain a specific position.

Creating a Popup Menu

Create an XML file in res->menu folder. Add menu items in XML file as required.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

     <item
           android:id="@+id/popup_choice1"
           android:title="@string/popup_choice1"/>

     <item
          android:id="@+id/popup_choice2"
          android:title="@string/popup_choice2"/>

     <item
          android:id="@+id/popup_choice3"
          android:title="@string/popup_choice3"/>
</menu>

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

<item

android:id="@+id/popup_choice1"

android:title="@string/popup_choice1"/>

<item

android:id="@+id/popup_choice2"

android:title="@string/popup_choice2"/>

<item

android:id="@+id/popup_choice3"

android:title="@string/popup_choice3"/>

</menu>

Create and Implement Button to Show Popup Menu

Add a button in your Layout file to display Popup Menu.

<RelativeLayout>
     <Button
         android:id="@+id/btn_popup"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:layout_marginLeft="20dp"
         android:layout_marginTop="20dp"
         android:text="@string/btn_popup"
         android:onClick="showPopup" /> 
</RelativeLayout>

<Button

android:id="@+id/btn_popup"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:layout_marginLeft="20dp"

android:layout_marginTop="20dp"

android:text="@string/btn_popup"

android:onClick="showPopup" />

</RelativeLayout>

In XML file as the onClick event is showPopup, implement the method to show Popup menu i.e. to inflate the menu and show the popup menu.

public void showPopup(View v) {

    PopupMenu popup = new PopupMenu(this, v);
    MenuInflater inflater = popup.getMenuInflater();
    inflater.inflate(R.menu.popup, popup.getMenu());

    popup.show();
}

public void showPopup(View v) {

PopupMenu popup = new PopupMenu(this, v);

MenuInflater inflater = popup.getMenuInflater();

inflater.inflate(R.menu.popup, popup.getMenu());

popup.show();

}

Display Popup Menu using ImageView

You can also display your popup menu using ImageView. As if you want the Popup menu to open when user long taps on any image. So you can do this by implementing setOnLongClickListener() and overriding method onLongClick() with an instance of View as parameters and return type as boolean.

ImageView image=(ImageView) findViewById(R.id.image);
image.setOnLongClickListener(new View.OnLongClickListener() {
    @override
    public boolean onLongClick(View v) {
        doPopup();
        return true;
    }
});

ImageView image=(ImageView) findViewById(R.id.image);

image.setOnLongClickListener(new View.OnLongClickListener() {

@override

public boolean onLongClick(View v) {

doPopup();

return true;

}

});

Handling Click Events on Menu Items in Popup Menu

When you want to some functionality to be performed on popup options click you must implement setOnMenuItemClickListener() with an object of PopupMenu.OnMenuItemClickListener()

And override method onMenuItemClick() with an object of MenuItem as parameters and return type as boolean.

popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {

@Override
public boolean onMenuItemClick(MenuItem item) {
      switch (item.getItemId()) {
          case R.id.popup_choice1:
                 Toast.makeText(getApplicationContext(), item.getTitle(),Toast.LENGTH_SHORT).show();//make toast on item select
                 return true;

           default:
                 return false;
           }
     }
});

popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {

@Override

public boolean onMenuItemClick(MenuItem item) {

switch (item.getItemId()) {

case R.id.popup_choice1:

Toast.makeText(getApplicationContext(), item.getTitle(),Toast.LENGTH_SHORT).show();//make toast on item select

return true;

default:

return false;

}

});

Hope that you find this tutorial helpful give your feedback in the comments.

Stay Tuned for More Upcoming Android Tutorials and Lessons.

Introduction to Android Menus

Why use Android Menus

How to use Android Menus

Components of XML menu resource

Syntax of Android Menus

Attributes of XML Menu Resources

Types of Menus in Android

Options Menu

Creating Options Menu

Creating Options Menu through XML

Dynamically Create Options Menu

Handling the Click Events of Options Menu

Updating Options Menu Dynamically

Context Menu

Creating a Context Menu

Create Context Menu in XML

Create Context Menu using ListView

Create and Use Floating Context Menu

Popup Menu

Creating a Popup Menu

Create and Implement Button to Show Popup Menu

Display Popup Menu using ImageView

Handling Click Events on Menu Items in Popup Menu

Share this: