Friday, January 11, 2013

Android beginner tutorial: Part 48 - Options Menu

In this tutorial we will start learning about using Options Menu.

There are 3 types of menu in Android - Options menu, Context menu and Submenu. The Options one is displayed when the Menu key on the device is pressed, the Context menu is displayed when the user touches the screen for more than 2 seconds. The Submenu can be set to appear when an item is selected in Options or Context menu, displaying more menu options. A Submenu can not have submenus.

Today we'll take a look at the Options menu. It actually has two ways of displaying menu items - one is called Icon Menu, the other - Expanded Menu. The Icon Menu is the only one that supports images in its buttons. It can display up to 6 buttons and is displayed in the bottom of the screen. The Expanded Menu is displayed when there are more than 6 items in the menu that need to be displayed. It is added by the system automatically when needed. It appears as the sixth button in the Icon Menu, which, when clicked, spawns a List-like dropdown menu that displays all the menu items that didnt fit in Icon Menu.

Let's create a simple Options menu now.

Go to MainActivity.java class and declare five variables. These are identificators for our buttons. Give them unique numeric values:

public static final int IDM_NEW = 101;
public static final int IDM_OPEN = 102;
public static final int IDM_SAVE = 103;
public static final int IDM_HELP = 104;
public static final int IDM_EXIT = 105;

They will be later needed to tell buttons apart from each other.

No additional code is needed in onCreate() function. All the code for menu initialization is written in the onCreateOptionsMenu() function. Use add() method of the menu object to add 5 buttons to the menu.

The add() method has 4 parameters, which are group id, menu item id, position and title of the menu item. Leave group id Menu.NONE for now. The menu item id should be set to one of those identificators we declared just now. The position can be set to Menu.NONE or 0 to display the menu items in the same order as they were added, or to a numeric value. The last parameter's value is a String that describes the menu item.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
menu.add(Menu.NONE, IDM_NEW, Menu.NONE, "New");
menu.add(Menu.NONE, IDM_OPEN, Menu.NONE, "Open");
menu.add(Menu.NONE, IDM_SAVE, Menu.NONE, "Save");
menu.add(Menu.NONE, IDM_HELP, Menu.NONE, "Help");
menu.add(Menu.NONE, IDM_EXIT, Menu.NONE, "Exit");
return true;
}

The code looks like this:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends Activity{
public static final int IDM_NEW = 101;
public static final int IDM_OPEN = 102;
public static final int IDM_SAVE = 103;
public static final int IDM_HELP = 104;
public static final int IDM_EXIT = 105;

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
menu.add(Menu.NONE, IDM_NEW, Menu.NONE, "New");
menu.add(Menu.NONE, IDM_OPEN, Menu.NONE, "Open");
menu.add(Menu.NONE, IDM_SAVE, Menu.NONE, "Save");
menu.add(Menu.NONE, IDM_HELP, Menu.NONE, "Help");
menu.add(Menu.NONE, IDM_EXIT, Menu.NONE, "Exit");
return true;
}

}

You can see that the first line of code in onCreateOptionsMenu() calls inflate() method of the menu inflator and points it to R.menu.activity_main. That's the xml located in res/menu/ folder. If you open it, it looks like this by default:

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

    <item
        android:id="@+id/menu_settings"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="@string/menu_settings"/>

</menu>

This is the second way you can declare menus in Android. If items are added both using XML and programmatically using add() method, the items are added together.

Look at the showAsAction attribute - it determines whether and when the menu item should be put in the Action Bar.

The Action Bar is something introduced in Honeycomb version of Android - a bar of buttons located in the top of the application. Google wants to deprecate the menu button as a whole so they recommend everywhere using the action bar instead of the classic menu. However, it still works and we should learn to use it, since that's what will be displayed in versions prior to Honeycomb (which currently is what the majority of Android devices runs on).

If you test the current application in Android with API level 10 or lower, the options menu will be displayed in the bottom of the application as an Icon Menu. Otherwise, regardless of how many items there are, options menu will be displayed in a List dropdown menu in the bottom of the screen:



That's all for today.

Thanks for reading!

No comments:

Post a Comment