Hey there ! Welcome to my blog on implementing different types of menu’s in android.
Menu’s are the components of UI from which we can do operations like showing the list of items when the popup menu icon is clicked, Navigating by simply clicking on it’s associated icons.
This is what we are going to build, you can get all code from GitHub repository which is linked at bottom of page.
Preview

1. Add dependencies
Make sure you have material design components dependencies.
implementation 'com.google.android.material:material:1.3.0'
Sync your project for gradle to import all required classes.
2. Popup menu’s
Show a Popup Menu which displays a list of options when it is clicked.
val popupMenu = PopupMenu(applicationContext, view)
popupMenu.menuInflater.inflate(R.menu.android_menu, popupMenu.menu)
popupMenu.show()
Create a menu xml file with all items.
android_menu.xml :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/option1"
android:title="Planets" />
<item
android:id="@+id/option2"
android:title="Humans" />
<item
android:id="@+id/option3"
android:title="Pets" />
</menu>
2.1 Nesting menu items
Nesting menu items enables us to navigate to sub items and here, when we click on pets it will again shows sub items list.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/option1"
android:title="option 1" />
<item
android:id="@+id/option2"
android:title="option 2" />
<item
android:id="@+id/option3"
android:title="Pets">
<menu>
<item
android:id="@+id/sub_1"
android:title="Cats" />
<item
android:id="@+id/sub_2"
android:title="Dogs" />
</menu>
</item>
</menu>
2.2 Adding click listener for items
Set listener to all menu items using setOnMenuItemClickListener.
Test your click listener with toast or snackbar message when each item’s clicked.
popupMenu.setOnMenuItemClickListener { menuItem ->
when (menuItem.itemId) {
R.id.option1 -> {
DoSomething()
}
R.id.option2 -> {
DoSomething()
}
else -> {
DoSomething()
}
}
true
}
3. List Popup menu
- Declare the variable ListPopupWindow
- Declare the list of items using listOf() function
- Declare the ArrayAdapter View which will returns a view for each object in a collection of data objects that we provide.
val listPopupWindow = ListPopupWindow(applicationContext, null, R.attr.listPopupWindowStyle)
listPopupWindow.anchorView = view
val items = listOf("One", "Two", "Three", "Four")
val adapter = ArrayAdapter(applicationContext, android.R.layout.simple_list_item_1, items)
listPopupWindow.setAdapter(adapter)
listPopupWindow.show()
We can also set our background drawable to menu items like below.
listPopupWindow.setBackgroundDrawable( ResourcesCompat.getDrawable( resources, R.color.list_bg, applicationContext.theme ) )
4. Exposed drop down menu
Add widget TextInputLayout with AutoCompleteTextView to enable drop down list in layout.
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:hint="Shopping"
android:id="@+id/text_input_menu"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:layout_width="match_parent">
<AutoCompleteTextView
android:inputType="none"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
</com.google.android.material.textfield.TextInputLayout>
Make use of ArrayAdapter and create a list of items to show in options menu.
val textInputMenu = findViewById<TextInputLayout>(R.id.text_input_menu)
val items = listOf("Apparels", "Electronics", "Sports", "Kitchen")
val adapter = ArrayAdapter(applicationContext, android.R.layout.simple_list_item_1, items)
(textInputMenu.editText as? AutoCompleteTextView)?.setAdapter(adapter)
5. Overflow Menu in toolbar
overflow_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_email"
android:icon="@drawable/ic_email"
android:title="Email" />
<item
android:id="@+id/menu_alert"
android:icon="@drawable/ic_notifications"
android:title="Alert" />
<item
android:id="@+id/menu_delete"
android:icon="@drawable/ic_delete"
android:title="Delete" />
</menu>
Inflate and show a overflow menu in tollbar with overflow icon with default behavior.
override fun onCreateOptionsMenu(menu: Menu): Boolean {
val inflater: MenuInflater = menuInflater
inflater.inflate(R.menu.overflow_menu, menu)
if (menu is MenuBuilder) {
menu.setOptionalIconsVisible(true)
}
return true
}
Setting click listener for all menu items.
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.menu_email -> showSnackbar("Received Email")
R.id.menu_alert -> showSnackbar("Received Notification")
R.id.menu_delete -> showSnackbar("Deleted Everything")
}
return super.onOptionsItemSelected(item)
}
6. Menu icons and action
ShowsAsAction attribute decides whether we have to place the item in the action bar or not.
Attribute | Behaviour |
---|---|
IfRoom | It places the item in the action bar if there is place/room for it in the action bar |
Never | This will Never places the item in the action bar |
WithText | This will make the menu item to be displayed with its menu text and its icon |
Always | This will always place the item in the action bar |
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_email"
android:icon="@drawable/ic_email"
android:title="Email"
app:showAsAction="always" />
</menu>
7. Context menu options
This type of menu usually triggers on a view long click. You have to register the menu with view to work correctly.
override fun onCreateContextMenu(
menu: ContextMenu,
v: View?,
menuInfo: ContextMenu.ContextMenuInfo?
) {
super.onCreateContextMenu(menu, v, menuInfo)
val inflater: MenuInflater = menuInflater
inflater.inflate(R.menu.menu_react_me, menu)
}
Setting click listener for items.
override fun onContextItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.menu_like -> showSnackbar("You liked it.")
R.id.menu_dislike -> showSnackbar("You disliked it.")
}
return super.onContextItemSelected(item)
}
Register the context menu in activities onCreate( ) along with view which performs as action.
registerForContextMenu(contextMenuTextView)
menu_react_me.xml :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_like"
android:title="Like" />
<item
android:id="@+id/menu_dislike"
android:title="Dislike" />
</menu>
8. External Resources
That’s it people I hope you found this information useful, thanks for reading and do connect with me through LinkedIn from below.
Rohini
Student pursuing her Bachelor of Technology in Computer science and Engineering. She is interested in Python, Java, UI/UX Design and Android Development and always love to learn and explore New things.
Here We Go Again : (
if (article == helpful) {
println("Like and subscribe to blog newsletter.")
} else {
println("Let me know what i should blog on.")
}
You must be logged in to post a comment.