Advanced User Interfaces: Part 1
(Menus and App Bars)
Menus and App Bars
•
Prior to version 3.0 (API level 11), Android-powered
devices were required to provide a dedicated Menu
button that displayed a 6-item option menu panel.
•
Modern Android applications use an app bar (a.k.a., app
bar) to present common user actions. The app bar uses
a combination of on-screen action items and overflow
options.
•
The approach to define a set of actions and options is
the same for both older and more modern versions of
Android; i.e., same menu resources and APIs.
©SoftMoore Consulting
Slide 2
Options Menu on Android 2.3
©SoftMoore Consulting
Slide 3
App Bar on Newer Versions of Android
An app bar that includes the [1] app icon,
[2] two action items, and [3] action overflow.
©SoftMoore Consulting
Slide 4
App Bar
•
The app bar is a dedicated piece of real estate at the top of
each screen that is generally persistent throughout the app.
•
It provides several key functions:
– makes important actions prominent and accessible in a
predictable way (such as New or Search)
– supports consistent navigation and view switching within apps
– reduces clutter by providing an action overflow for less common
actions
– provides a dedicated space for giving your app an identity and
identifying the user’s location within the app
•
In its most basic form, the app bar displays the title for
the activity on one side and an overflow menu on the
other.
©SoftMoore Consulting
Slide 5
Three Types of Menus in Android
1. Options Menu and App Bar – the primary menu for an
activity. For earlier versions of Android, this was the menu
that displayed whenever a user pressed the Menu button
on an Android device.
2. Context Menu – a floating list of menu items that
appears when the user performs a long-press on a
View. It provides actions that affect the selected
content or context frame.
3. Popup Menu – displays a vertical list of items anchored
to the view that invoked the menu. A popup menu is
good for providing a set of overflow actions or to provide
options for a second part of a command.
©SoftMoore Consulting
Slide 6
Defining a Menu
The items for a menu can be defined in two ways:
•
Externally in an XML file (preferred approach)
– defined as an XML menu resource in directory res/menu/
– inflated (loaded as a menu object) into an activity using the
MenuInflator.inflate() method
– allows alternative menu resources
•
Within the source code for the activity
– e.g., directly within the onCreateOptionsMenu() method or in a
String array
For all menu types, Android uses a standard
XML format for defining menu items.
©SoftMoore Consulting
Slide 7
Defining a Menu Using XML
XML elements
• <menu> : a container for menu items.
– The root node for the XML document must be a menu.
– You can also nest a menu element in an <item> to create a
submenu.
• <item> : represents a single item in a menu.
• <group> : an optional, invisible container for items.
– Groups allow you to categorize menu items so they share
properties such as active state and visibility.
©SoftMoore Consulting
Slide 8
Creating Submenus
•
A submenu is a menu that the user can open by
selecting an item in another menu.
•
A submenu can be added to any menu except a
submenu.
• Submenus are useful when your application has a lot of
functions that can be organized into topics, such as
items commonly found in an application’s menu bar
(File, Edit, View, etc.).
• A submenu is created by adding a <menu> element as
the child of an <item> element.
(see Example 1: Defining a Menu Using XML)
©SoftMoore Consulting
Slide 9
Menu Groups
•
A menu group is a collection of menu items that share
certain traits. With a group, you can
– show or hide all items with setGroupVisible()
– enable or disable all items with setGroupEnabled()
– specify whether all items are checkable with
setGroupCheckable()
•
You can create a group by nesting <item> elements
inside a <group> element in your menu resource.
©SoftMoore Consulting
Slide 10
Example 1: Defining a Menu Using XML
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/item1"
android:title="@string/item1"
android:icon="@drawable/group_item1_icon" />
<group android:id="@+id/group">
<item android:id="@+id/group_item1"
android:title="@string/group_item1"
android:icon="@drawable/group_item1_icon" />
<item android:id="@+id/group_item2"
android:title="G@string/group_item2"
android:icon="@drawable/group_item2_icon" />
</group>
<item android:id="@+id/submenu"
android:title="@string/submenu_title" >
<menu>
<item android:id="@+id/submenu_item1"
android:title="@string/submenu_item1" />
</menu>
</item>
</menu>
©SoftMoore Consulting
Slide 11
Important Attributes for the <item> Element
The <item> element supports several attributes you can
use to define an item’s appearance and behavior.
• id − a resource ID that’s unique to the item
• icon − a drawable to use as the item’s icon
• title − string to use as the item’s title
• showAsAction − specifies when and how this item
should appear as an action item in the app bar
©SoftMoore Consulting
Slide 12
Adding Action Items
•
To give users immediate access to an item from the
options menu, declare that the menu item should appear
in the app bar as an “action item.”
•
In the XML file, you can request a menu item to appear
as an action item by declaring the attribute
showAsAction="ifRoom" for the element.
•
The menu item appears in the app bar for quick access if
room is available. If there is not enough room in the app
bar, the item appears in the overflow menu.
©SoftMoore Consulting
Slide 13
Example 2: Defining a Menu Using XML
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="edu.citadel.android.widgets.MainActivity">
<item android:id="@+id/search"
android:title="Search"
android:icon="@drawable/ic_action_search"
app:showAsAction="ifRoom"/>
<item android:id="@+id/option1"
android:title="Menu Option 1"
android:icon="@drawable/icon1" />
<item android:id="@+id/option2"
android:title="Menu Option 2"
android:icon="@drawable/icon2"/>
</menu>
©SoftMoore Consulting
Slide 14
Menu Item Icons
•
On newer versions of Android the options menu will not
show icons; however, the icons will show up the item is
promoted to the app bar.
•
To provide a consistent user experience in the action
bar, use predefined action icons where appropriate to
support common user actions such as Refresh, Delete,
Search, etc. (see Android Design downloads page)
©SoftMoore Consulting
Slide 15
Options Menu
•
The options menu includes actions and other options
that are relevant to the current activity context, such as
“Search”, “Compose email”, and “Settings”.
•
To specify the options menu for an activity, override
onCreateOptionsMenu() and inflate the XML menu into
the Menu provided in the callback.
•
When a user selects an item from the options menu, the
onOptionsItemSelected() method is called. The
selected item ID can be used to determine the
appropriate response; e.g., in a switch statement.
©SoftMoore Consulting
Slide 16
Example: Inflating a Menu Resource
(XML file is res/menu/menu_main.xml)
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate menu; adds items to the app bar if present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
When an activity starts, the system populates
the app bar and overflow menu by calling
onCreateOptionsMenu() for the activity.
©SoftMoore Consulting
Slide 17
Example: App Bar and
Options Menu for Example 2
Icon only for search.
©SoftMoore Consulting
Icon not shown for
other menu items.
Slide 18
Another Example for Menu Item
<item android:id="@+id/menu_save“
android:icon="@drawable/ic_menu_save“
android:title="@string/menu_save“
app:showAsAction="ifRoom|withText" />
Note: The “withText” value is a hint to the app bar
that the text title should appear. The app bar will
show the title when possible, but might not if an icon
is available and the app bar is constrained for space.
©SoftMoore Consulting
Slide 19
Handling the Selection of a Menu Item
•
When the user selects a menu item from the Options
Menu, the system calls the onOptionsItemSelected()
method in the activity.
•
The MenuItem selected by the user is passed to this
method. Calling getItemId() on the menu item returns
its unique ID.
•
Processing the selection of a menu item often takes the
form of a multi-way branch (e.g., switch or if/else if
statements) based on the item’s ID.
©SoftMoore Consulting
Slide 20
Example: Handling the
Selection of a Menu Item
@Override
public boolean onOptionsItemSelected(MenuItem item)
{
int id = item.getItemId();
if (id == R.id.search)
{
...
}
else if (id == R.id.option1)
{
Return true for those menu
...
ids that are handled here.
}
else if (id == R.id.option2)
{
...
}
else
return super.onOptionsItemSelected(item);
}
©SoftMoore Consulting
Slide 21
Context Menu
•
A context menu is conceptually similar to the menu
displayed when the user performs a “right-click” on a
personal computer.
•
On Android, a context menu is displayed when the user
performs a “long press” (press and hold) on an item.
•
A context menu can be created for any View, but context
menus are most often used for items in a ListView.
•
Similar to an options menu, a context menu is usually
defined in an XML file and processed using methods
onCreateContextMenu() and
onContextItemSelected().
©SoftMoore Consulting
Slide 22
Creating a Context Menu
•
Call registerForContextMenu() and pass it the view
to which the context menu should be associated
– can pass a ListView or GridView to register all items in the
view for the same context menu
•
•
Implement the method onCreateContextMenu().
Implement method onContextItemSelected().
©SoftMoore Consulting
Slide 23
Example Method onCreateContextmenu()
@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo)
{
super.onCreateContextMenu(menu, v, menuInfo);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.context_menu, menu);
}
Called by the system when the registered
view receives a long-click event.
©SoftMoore Consulting
Slide 24
Example Method onContextItemSelected()
@Override
public boolean onContextItemSelected(MenuItem item)
{
AdapterContextMenuInfo info
= (AdapterContextMenuInfo) item.getMenuInfo();
switch (item.getItemId())
{
case R.id.edit:
editNote(info.id);
return true;
case R.id.delete:
deleteNote(info.id);
return true;
default:
return super.onContextItemSelected(item);
}
}
©SoftMoore Consulting
Slide 25
Contextual Action Mode Menu
•
A contextual action mode menu is similar in purpose to a
context menu except that it uses a contextual app bar at
the top of the screen instead of a floating menu.
•
When active, an contextual action mode menu supports
actions on multiple items at once.
•
Contextual action mode menus are available only on
Android API level 11 and higher.
©SoftMoore Consulting
Slide 26
Relevant Links
•
Menus
https://developer.android.com/guide/topics/ui/menus.html
•
Menu Resource
https://developer.android.com/guide/topics/resources/menu-resource.html
•
Adding the App Bar
https://developer.android.com/training/appbar/index.html
•
Android Design Downloads
https://developer.android.com/design/downloads/index.html
©SoftMoore Consulting
Slide 27