MENU

COURSE OBJECTIVES
At the end of this lecture, each student should:

• Understand types of menus

• Understand App Bar with Options Menu
• Understand Contextual menus
• Understand Popup menus

MOBILE APPLICATION DEVELOPMENT 2

 WHAT'S A MENU?
• A menu is a set of options the user can select from to perform a
function, such as searching for information, saving information,
editing information, or navigating to a screen

MOBILE APPLICATION DEVELOPMENT 3

 TYPES OF MENUS
1. App bar with options menu
2. Contextual menu
3. Contextual action bar
4. Popup menu

MOBILE APPLICATION DEVELOPMENT 4

 TYPES OF MENUS
1. Options menu: Appears in the app bar and provides the primary
options that affect using the app itself. Examples of menu options:
Search to perform a search, Bookmark to save a link to a screen, and
Settings to navigate to the Settings screen.
2. Context menu: Appears as a floating list of choices when the user
performs a long tap on an element on the screen. Examples of menu
options: Edit to edit the element, Delete to delete it, and Share to
share it over social media.
3. Contextual action bar: Appears at the top of the screen overlaying
the app bar, with action items that affect the selected element(s).
Examples of menu options: Edit, Share, and Delete for one or more
selected elements.
4. Popup menu: Appears anchored to a view such as an ImageButton,
and provides an overflow of actions or the second part of a two-part
command. Example of a popup menu: the Gmail app anchors a popup
menu to the appMOBILE
bar for the message
APPLICATION view with Reply, Reply All, and
DEVELOPMENT 5
 TYPES OF MENUS
- Contextual action bar: Appears at the top of the screen overlaying
the app bar, with action items that affect the selected element(s).
Examples of menu options: Edit, Share, and Delete for one or more
selected elements.
- Popup menu: Appears anchored to a view such as an ImageButton
and provides an overflow of actions or the second part of a two-part
command. Example of a popup menu: the Gmail app anchors a
popup menu to the app bar for the message view with Reply, Reply
All, and Forward

MOBILE APPLICATION DEVELOPMENT 6

 1. THE APP BAR AND
OPTIONS MENU
• The app bar by default shows the app title, or the name defined in
AndroidManifest.xml by the android:label attribute for the
activity. It may also include the Up button for navigating up to the
parent activity.
• The options menu in the app bar provides navigation to other
activities in the app, or the primary options that affect using the
app itself — but not ones that perform an action on an element
on the screen

MOBILE APPLICATION DEVELOPMENT 7

 1. THE APP BAR AND
OPTIONS MENU
• The app bar by default shows the app title, or the name defined in
AndroidManifest.xml by the android:label attribute for the
activity. It may also include the Up button for navigating up to the
parent activity.
• The options menu in the app bar provides navigation to other
activities in the app, or the primary options that affect using the
app itself — but not ones that perform an action on an element
on the screen

MOBILE APPLICATION DEVELOPMENT 8

 THE APP BAR AND OPTIONS
MENU
• The options menu appears in the right corner of the app bar.
• The app bar is split into four different functional areas that apply
to most apps.
1. Nav icon to open navigation drawer
2. Title of current activity
3. Icons for options menu items
4. Action overflow button for
the rest of the options menu

MOBILE APPLICATION DEVELOPMENT 9

 THE APP BAR AND OPTIONS
MENU
1. Navigation button or Up button: Use a navigation button in this
space to open a navigation drawer, or use an Up button for
navigating up through your app's screen hierarchy to the parent
activity.
2. Title: The title in the app bar is the app title, or the name defined
in AndroidManifest.xml by the android:label attribute for the
activity.

MOBILE APPLICATION DEVELOPMENT 10

 THE APP BAR AND OPTIONS
MENU
1. Action icons for the options menu: Each action icon appears in
the app bar and represents one of the options menu’s most
frequently used items. Less frequently used options menu items
appear in the overflow options menu.
2. Overflow options menu: The overflow icon opens a popup with
option menu items that are not shown as icons in the app bar.

MOBILE APPLICATION DEVELOPMENT 11

 THE APP BAR AND OPTIONS
MENU
• Frequently-used options menu items should appear as icons in the
app bar. The overflow options menu shows the rest of the menu:
• Action icons in the app bar for
important items (1)
• Tap the three dots, the "action
overflow button" to see the
options menu (2)
• Appears in the right corner of the app bar (3)
• For navigating to other activities and editing app settings

MOBILE APPLICATION DEVELOPMENT 12

 ADDING THE OPTIONS MENU
• Android provides a standard XML format to define options menu
items. Instead of building the menu in your activity's code, you
can define the menu and all its items in an XML menu resource.
• Steps
1. XML menu resource (menu_main.xml)
2. onCreateOptionsMenu() to inflate the menu
3. onClick attribute or onOptionsItemSelected()
4. Method to handle item click

MOBILE APPLICATION DEVELOPMENT 13

 ADDING THE OPTIONS MENU
1. XML menu resource. Create an XML menu resource file for the
menu items, and assign appearance and position attributes.
2. Inflating the menu. Override the onCreateOptionsMenu() method in
your activity or fragment to inflate the menu.
3. Handling menu item clicks. Menu items are views, so you can use
the android:onClick attribute for each menu item. However, the
onOptionsItemSelected() method can handle all the menu item
clicks in one place, and determine which menu item was clicked,
which makes your code easier to understand.
4. Performing actions. Create a method to perform an action for each
options menu item.

MOBILE APPLICATION DEVELOPMENT 14

 1. CREATE MENU RESOURCE

1. Create menu resource directory

2. Create XML menu resource (menu_main.xml)
3. Add an entry for each menu item

<item android:id="@+id/option_settings"
android:title="@string/settings" />
<item android:id="@+id/option_toast"
android:title="@string/toast" />

MOBILE APPLICATION DEVELOPMENT 15

 ADD ICONS FOR
1. Right-clickMENU
drawable ITEMS
2. Choose New > Image Asset
3. Choose Action Bar and Tab Items
4. Edit the icon name
5. Click clipart image, and click icon
6. Click Next, then Finish

MOBILE APPLICATION DEVELOPMENT 16

 ADDING MENU ITEM
ATTRIBUTES
<item android:id="@+id/action_order"
android:icon="@drawable/ic_toast_dark"
android:title="@string/toast"
android:titleCondensed="@string/toast_condensed"
android:orderInCategory="1"
app:showAsAction="ifRoom" />

MOBILE APPLICATION DEVELOPMENT 17

 2. INFLATE OPTIONS
MENU
• If you start an app project using the Basic Activity template, the
template adds the code for inflating the options menu with
MenuInflater, so you can skip this step.
• If you are not using the Basic Activity template, inflate the menu
resource in your activity by using the onCreateOptionsMenu()
method (with the Override annotation) with the getMenuInflater()
method of the Activity class.
• The getMenuInflater() method returns a MenuInflater, which is a class
used to instantiate menu XML files into Menu objects.
• The MenuInflater class provides the inflate() method, which takes as a
parameter the resource id for an XML layout resource to load (
R.menu.menu_main in the following example), and the Menu to
inflate into.
MOBILE APPLICATION DEVELOPMENT 18
 INFLATE OPTIONS
MENU
● Override onCreateOptionsMenu() in main activity

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

MOBILE APPLICATION DEVELOPMENT 19

 3. OVERRIDE
ONOPTIONSITEMSELEC
TED()
• However, the onOptionsItemSelected() method of the Activities
class can handle all the menu item clicks in one place, and determine
which menu item was clicked, which makes your code easier to
understand.
• The Basic Activity template provides an implementation of the
onOptionsItemSelected() method with a switch case block to call the
appropriate method (such as showOrder ) based on the menu item's
id , which you can retrieve using the getItemId() method of the
Adapter class:

MOBILE APPLICATION DEVELOPMENT 20

CONTEXTUAL MENUS

MOBILE APPLICATION DEVELOPMENT 21

 WHAT ARE
CONTEXTUAL MENUS?
• They allow users to take an action on a selected view.
• You can provide a context menu for any View, but they are most
often used for items in a RecyclerView, GridView, or other view
collections in which the user can perform direct actions on each
item.

MOBILE APPLICATION DEVELOPMENT 22

 TYPES OF
● Floating context menu —floating list of menu items
CONTEXTUAL
when long-presses on a view element MENUS
○ User can modify the view element or use it in some
fashion
○ Users perform a contextual action on one view
element at a time.
○ For example, a context menu might include Edit to edit
a view element, Delete to delete it, and Share to share
it over social media

● Contextual action mode —temporary action bar in

place of or underneath the app bar
○ Action items affect the selected view element(s)
○ Users can perform action on multiple view elements at once

MOBILE APPLICATION DEVELOPMENT 23

 FLOATING CONTEXT MENU
STEPS

1. Create an XML menu resource file for the menu items, and assign appearance and
position attributes
2. Register a view to the context menu using the registerForContextMenu() method
of the Activity class.
3. Implement the onCreateContextMenu() method in your activity or fragment to
inflate the menu.
4. Implement the onContextItemSelected() method in your activity or fragment to
handle menu item clicks.
5. Create a method to perform an action for each context menu item.
MOBILE APPLICATION DEVELOPMENT 24
 CONTEXTUAL ACTION
BAR- STEPS
1. Create XML menu resource
file and assign icons for items
2. setOnLongClickListener()
on view that triggers the
contextual action
bar and call
startActionMode() to
handle click

3. Implement ActionMode.Callback interface to handle ActionMode

lifecycle; include action for a menu item click in
onActionItemClicked() callback
4. Create a method to perform an action for each context menu item

MOBILE APPLICATION DEVELOPMENT 25

QUESTIONS?