An application menu is critical to any mobile application. This is
because real estate in a mobile device is limited, so the developer has
to make judicious use of menus to provide good application usability.
Android provides us with various ways to introduce a menu. This blog
post will cover the different types of menus that you can include in
your Android application along with code samples and screenshots.
Android Menus can be classified into 3 types:
Options menu is divided into 2 types: Icon Menu and Expanded Menu, based on the number of menu options. Options menu can have any number of menu options, but only the first six options are shown directly when the MENU key is clicked and this is called as Icon Menu. In case there are more than six options then first five are show directly and remaining are available when More button is clicked and is called as Expanded Menu.
Note: It is not mandatory to have icon for Icon Menu options. In case icons are associated with menu options,then the icons are displayed for Icon Menu only.
Important Points:
The listing below shows how to you can react to different menu items
that are clicked. We are only displaying the template below. The actual
implementation when a specific menu item is clicked depends on your
application.
As covered in this blog post, Android provides several ways to
include menus in your application. You should pick and choose them
depending on your needs. Context Menus are typically expected now by
users and should be used carefully in order to provide good application
usability
Android Menus can be classified into 3 types:
- Options Menu
- Context Menu
- Submenu
Options Menu:
Options Menu is the menu displayed when MENU key on the device is clicked.Options menu is divided into 2 types: Icon Menu and Expanded Menu, based on the number of menu options. Options menu can have any number of menu options, but only the first six options are shown directly when the MENU key is clicked and this is called as Icon Menu. In case there are more than six options then first five are show directly and remaining are available when More button is clicked and is called as Expanded Menu.
Note: It is not mandatory to have icon for Icon Menu options. In case icons are associated with menu options,then the icons are displayed for Icon Menu only.
Important Points:
- onCreateOptionsMenu() method of the Activity is called when the user clicks the Menu Key of the device. So override this method in the activity and populate the Menu object passed as parameter to this method.
- Multiple add() methods are available. Use the one that accepts itemId as a parameter.
- onOptionItemSelected() method of the activity is called when a particular Item/Option of the menu is clicked. Override this method in the activity and implement your code to perform the corresponding actions based on the menu option selected.
- setIcon() is used for assigning icon with the option.
01
02
03
04
05
06
07
08
09
10
| public boolean onCreateOptionsMenu(Menu menu) { menu.add(0, MENU_ADD, 0, "Add").setIcon(R.drawable.ic_menu_add); menu.add(0, MENU_DELETE, 0, "Delete").setIcon(R.drawable.ic_menu_delete); menu.add(0, MENU_SAVE, 0, "Save").setIcon(R.drawable.ic_menu_save); menu.add(0, MENU_DONE, 0, "Done").setIcon(R.drawable.ic_menu_done); menu.add(0, MENU_HELP, 0, "Help").setIcon(R.drawable.ic_menu_help); menu.add(0, MENU_SETTINGS, 0, Settings").setIcon(R.drawable.ic_menu_settings); menu.add(0, MENU_EXIT, 0, "Exit").setIcon(R.drawable.ic_menu_exit); return true; } |
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()){ case MENU_ADD: // Add < span style = "white-space: pre;" > </ span >return true; case MENU_DELETE: // Delete < span style = "white-space: pre;" > </ span >return true; case MENU_SAVE: // Save < span style = "white-space: pre;" > </ span >return true; case MENU_DONE: // Done < span style = "white-space: pre;" > </ span >return true; case MENU_HELP: // Help return true; case MENU_SETTINGS: // Settings < span style = "white-space: pre;" > </ span >return true; case MENU_EXIT: // Exit < span style = "white-space: pre;" > </ span >return true; default: < span style = "white-space: pre;" > </ span >return false; } < span style = "white-space: pre;" > </ span > } |
Context Menu:
Android provides the
facility to open a menu in context with the object clicked. A Long-press
on the view will bring up the registered Context menu.
Important Points
- Using registerForContextMenu() method view is registered for context menu.
- onCreateContextMenu() method of Activity is called on click (long-press) of registered view. So override this method to populate Context menu options.
- onContextItemSelected() method of activity is called whenever item/option from context menu is selected. Override this method to perform the appropriate operations depending on the option selected.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); menu.add(0, MENU_ADD, 0, "Edit"); menu.add(0, MENU_DELETE, 0, "Delete"); } public boolean onContextItemSelected(MenuItem item) { switch(item.getItemId()){ case MENU_ADD: // Add return true; case MENU_DELETE: // Delete return true; default: return false; } } |
For this example context menu is register to be shown on
TextView. Here tv is an instance of a TextView that is present on the
layout of this activity.
registerForContextMenu(tv);
Menu Using XML
Menu can also be defined and populated using XML. Following XML structure represents the same menu as of above.
Create optionsmenu.xml under folder res/menu
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
| < menu < item android:id = "@+id/MENU_ADD" android:title = "Add" android:icon = "@drawable/ic_menu_add" /> < item android:title = "Delete" android:id = "@+id/MENU_DELETE" android:icon = "@drawable/ic_menu_delete" /> < item android:title = "Save" android:id = "@+id/MENU_SAVE" android:icon = "@drawable/ic_menu_save" /> < item android:title = "Done" android:id = "@+id/MENU_DONE" android:icon = "@drawable/ic_menu_done" /> < item android:title = "Help" android:id = "@+id/MENU_HELP" android:icon = "@drawable/ic_menu_help" /> < item android:title = "Settings" android:id = "@+id/MENU_SETTINGS" android:icon = "@drawable/ic_menu_settings" /> < item android:title = "Exit" android:id = "@+id/MENU_EXIT" android:icon = "@drawable/ic_menu_exit" /> </ menu > public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = new MenuInflater(this); inflater.inflate(R.menu.optionsmenu, menu); return true; } |
Advantages of using XML for creating menu are:
- Easily maintain/modify the menu structure due to a clear separation of the menu creation from the code.
- The code in onCreateOptionsMenu() method is reduced.
Submenus
Sub menu can be added to any type of menu.
Below code shows adding Submenu for Options menu:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| public boolean onCreateOptionsMenu(Menu menu) { SubMenu sendMenu = menu.addSubMenu("Send"); sendMenu.add(0,MENU_SMS,0,"SMS"); sendMenu.add(0,MENU_EMAIL,0,"EMAIL"); return true; } public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()){ case MENU_SMS: // SMS return true; case MENU_EMAIL: // Email return true; default: return false; } } |
01
02
03
04
05
06
07
08
09
10
| < menu < item android:id = "@+id/MENU_SEND" android:title = "Send" > < menu > < item android:id = "@+id/MENU_SMS" android:title = "SMS" ></ item > < item android:id = "@+id/MENU_EMAIL" android:title = "EMAIL" ></ item > </ menu > </ item > </ menu > |
No comments:
Post a Comment