Menu in Android

1
 Goal
 Create an application that supports
options/sub/context menus

Display
messages when
Automatically
a menu clicked
fill “Hi!”
in the EditText
Plus menu will
also open a
sub-menu
<option menu> <sub-menu> <context menu>
2
A menu triggered by an icon tap, appearing
below the overflow menu icon.

3
Menu Composition

Sub1 Hi

Plus
Hola
Sub2
Hello Long press
Home <sub-menu> in EditText

Pre

Next

<option menu> <context menu from EditText>

4
Fundamental Types of Menus or
Action Presentations

1. Options menu and app bar

2. Context menu and contextual action mode
3. Popup menu

5
1. Options menu and app bar
 The options menu is the primary collection of
menu items for an activity.

 It's where you place actions that have a global

impact on the app, such as "Search," "Compose
email," and "Settings."

6
2. Context Menu and Contextual
Action Mode
 A context menu is
a floating menu that
appears when the user
performs a touch & hold
on an element.

 It provides actions that

affect the selected
content or context
frame.

7
3. Popup menu
 A popup menu displays a vertical list of items
that's anchored to the view that invokes the
menu.
 It's good for providing an overflow of actions that
relate to specific content or to provide options for
the second part of a command

8
Create HelloMenu Project
 Create the two TextViews
and an EditText
 Create “menu” folder in
res/
 Create menu.xml in
res/menu/ (New > Other >
Android XML File)
 Create context_menu.xml
in res/menu/

9
Define a menu in XML
 For all menu types, Android provides a standard XML format
to define menu items.
 Instead of building a menu in your activity's code, define a
menu and all its items in an XML menu resource.
 Using a menu resource is good practice for the following
reasons;
 It's easier to visualize the menu structure in XML.
 It separates the content for the menu from your app's behavioral
code.
 It lets you create alternative menu configurations for different
platform versions, screen sizes, and other configurations by
leveraging the app resources framework.

10
res/menu/menu.xml
?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/new_game"
android:icon="@drawable/ic_new_game"
android:title="@string/new_game"
app:showAsAction="ifRoom"/>
<item android:id="@+id/help"
android:icon="@drawable/ic_help"
android:title="@string/help" />
</menu>

11
Sub-menu
 You can add a submenu to an item in any menu by adding
a <menu> element as the child of an <item>.

 Submenus are useful when your app has a lot of functions

that can be organized into topics, like items in a PC app's
menu bar—such as File, Edit, and View.

12
res/menu/menu.xml
 Define Option menu and sub-menu

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

<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menuItemPlus" android:title="@string/plus"
android:icon="@drawable/plus" > Sub-menu items
<menu>
<item android:id="@+id/menuItemSub1" android:title="@string/sub1"></item>
<item android:id="@+id/menuItemSub2" android:title="@string/sub2"></item>
</menu>
</item>

<item android:icon="@drawable/home" android:id="@+id/menuItemHome"

android:title="@string/home"></item>
<item android:icon="@drawable/pre" android:id="@+id/menuItemPre"
android:title="@string/pre"></item>
<item android:icon="@drawable/next" android:id="@+id/menuItemNext"
android:title="@string/next"></item>
</menu>
Option menu items
13
res/menu/context.xml
 Define context menu for EditText

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

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

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

<item android:id="@+id/menuItemHola" android:title="@string/hola_msg"></item>
<item android:id="@+id/menuItemHello" android:title="@string/hello_msg"></item>
</menu>

14
res/values/strings.xml
 Define constant strings used in the application

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

<resources>
<string name="hello">Click Menu Button ! </string>
<string name="app_name">Android Menu Example</string>

<string name="plus">Plus</string>
<string name="pre">Pre</string>
<string name="next">Next</string>
<string name="home">Home</string>

<string name="sub1">Sub1</string>
<string name="sub2">Sub2</string>

<string name="hi_msg">Hi !</string>

<string name="hola_msg">Hola !</string>
<string name="hello_msg">Hello !</string>
</resources>

15
icons
 Place icons used in menu.xml in res/drawable/

icons

16
Inflating a option menu resource
 Inflating a menu resource (menu.xml) by adding onCreateOptionsMenu(Menu
menu) in the main Activity.

 Menu items in menu.xml will appear when the user touches the MENU button

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

17
Response to user action
 Response to menu click events by overriding
onOptionsItemSelected(Menu menu) in the
main Activity.
@Override
@Override
public
public boolean
boolean onOptionsItemSelected(MenuItem
onOptionsItemSelected(MenuItem item)
item) {{
switch
switch (item.getItemId())
(item.getItemId()) {{
case
case R.id.menuItemPlus:
R.id.menuItemPlus:
Toast.makeText(this,
Toast.makeText(this, "Plus
"Plus Button
Button Clicked
Clicked !",
!",
Toast.LENGTH_SHORT).show();
Toast.LENGTH_SHORT).show();
Log.i(TAG,"menuItemPlus");
Log.i(TAG,"menuItemPlus");
return
return true;
true;
::
::
case
case R.id.menuItemNext:
R.id.menuItemNext:
Toast.makeText(this,
Toast.makeText(this, "Next
"Next Button
Button Clicked
Clicked !",
!",
Toast.LENGTH_SHORT).show();
Toast.LENGTH_SHORT).show();
Log.i(TAG,"menuItemNext");
Log.i(TAG,"menuItemNext");
return
return true;
true;
}}
return
return false;
false;
}}
18
Create a contextual menu
A contextual menu offers actions that affect a specific item or
context frame in the UI

A floating Context menu

19
Two ways to provide contextual
actions
 In a floating context menu. A menu appears as a
floating list of menu items, similar to a dialog, when
the user performs a touch & hold on a view that
declares support for a context menu. Users can
perform a contextual action on one item at a time.
 In the contextual action mode. This mode is a
system implementation of ActionMode that displays
a contextual action bar, or CAB, at the top of the
screen with action items that affect the selected
item(s). When this mode is active, users can
perform an action on multiple items at once, if your
app supports that.

20
Register View for a context menu
 By calling registerForContextMenu() and passing it a
View (an EditText in this example) you assign it a context
menu.
 When this View (EditText) receives a long-press, it displays
a context menu.

public
public class
class AndroidMenuExampleActivity
AndroidMenuExampleActivity extends
extends Activity
Activity {{

private
private EditText
EditText mOutEditText;
mOutEditText;

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

mOutEditText
mOutEditText == (EditText)
(EditText) findViewById(R.id.editText);
findViewById(R.id.editText);
registerForContextMenu(mOutEditText);
registerForContextMenu(mOutEditText);
}}
::
::

21
Define context menu’s appearance
By overriding the activity's context menu create callback method,
onCreateContextMenu().

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

22
Define context menu’s behavior
By overriding your activity's menu selection callback
method for context menu , onContextItemSelected().
@Override
@Override
public
public boolean
boolean onContextItemSelected(MenuItem
onContextItemSelected(MenuItem item)
item) {{
Log.i(TAG,"ContextItem
Log.i(TAG,"ContextItem selected");
selected");

AdapterContextMenuInfo
AdapterContextMenuInfo info
info == (AdapterContextMenuInfo)
(AdapterContextMenuInfo)
item.getMenuInfo();
item.getMenuInfo();
switch
switch (item.getItemId())
(item.getItemId()) {{
case
case R.id.menuItemHi:
R.id.menuItemHi:

mOutEditText.setText(
mOutEditText.setText( this.getResources().getText(
this.getResources().getText( R.string.hi_msg)
R.string.hi_msg) );
);
return true;
return true;
case
case R.id.menuItemHola:
R.id.menuItemHola:
::
::
default:
default:
return
return super.onContextItemSelected(item);
super.onContextItemSelected(item);
}}
}}

23
Create a popup menu

24
Handle click events

25