Working with menus in android

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

1. Declare the variable ListPopupWindow
2. Declare the list of items using listOf() function
3. 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.

Here We Go Again : (

if (article == helpful) {
    println("Like and subscribe to blog newsletter.")
} else {
    println("Let me know what i should blog on.")
}