Coders' Guidebook

How to create a menu for your Android app | Kotlin

This tutorial will cover how to build a menu and integrate it into your Android app. We will also learn how to create submenus, dynamically add or remove items from the menu, and create a pop-up menu.

android-submenu.gif popup-menu.gif

The menu resource directory

The layout for our menu will be written in an XML file and stored inside a dedicated menu directory. To create this menu directory, right-click on the res folder (found by clicking Project > app) and select New > Android Resource Directory

create-settings-menu-for-android.png

Set both the directory name and resource type to 'menu' then press OK.

menu-directory.png

With the directory now in place, we can create the menu layout file. Right-click on the menu directory then select New > Menu resource file

menu-resource-file.png

Set the file name to 'menu_main' then press OK.

menu_main.png

We can now write the content of the menu in the newly created menu_main.xml file.

Basic structure of the menu

Open the menu_main.xml file in Code view and replace the code that is there with the following:

<?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_settings"
        android:title="@string/menu_settings"
        app:showAsAction="never" />
		
</menu>

The above code adds an item (as indicated by the <item> tag) to our menu. The item will have the text which is encoded in the 'menu_settings' string. Currently, this string does not exist (hence why it is likely coloured in red). Let's fix that by opening up the strings resource file. You can find this file by clicking Project > app > res > values

strings-file.png

Add the following string to the file:

<string name="menu_settings">Settings</string>

The last part of our menu item code was app:showAsAction="never". The showAsAction attribute determines how the menu item should be displayed. It will accept the following values:

  • never - This option means the item will never be immediately visible in the action bar. Instead, the user will have to press the icon.
  • always - The item will always be visible in the action bar (space permitting).
  • ifRoom - The item will only be visible if there is sufficient space.
  • withText - This attribute only applies if the menu item contains an icon image as well. It ensures both the icon and title are displayed together.

Inflating the menu

We must now 'inflate' the menu to get it to load when the app is run. To do this, open the MainActivity.kt file by clicking Project > app > java > folder with your project name

mainactivity.png

Copy and paste the following code below the override fun onCreate function.

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    val inflater = menuInflater
    inflater.inflate(R.menu.menu_main, menu)
    return super.onCreateOptionsMenu(menu)
}

Note you may also need to add the following import statement to the MainActivity.kt file:

import android.view.Menu

The onCreateOptionsMenu function uses the menuInflater class to import the contents of the menu_main.xml file into the action bar. This code is sufficient to add the menu to our app. We will spend the rest of this tutorial learning how to make the menu functional and exploring other ways to format the menu.

android-menu.gif

Modifying the menu based on user activity

There are times when you may wish to change the layout of the menu based on user action. For example, maybe you want a 'Download' button to appear when the user presses a button. To make a menu item appear or disappear, open your main Kotlin file and declare the following variables:

private var downloadItem: Int = 1
private var showDownloadItem: Boolean = false

Together these variables will help us create a menu item that is hidden by default because the boolean value is set to false.

Now add the following line to the onCreateOptionsMenu function so the Download item can be added to the menu:

menu.add(0, downloadItem, 0, R.string.download_item)

Note you may need to add the 'download_item' string to your strings.xml file:

<string name="download_item">Download</string>

Add to your Kotlin file an onPrepareOptionsMenu function to allow the menu to be modified while the app is running. The function below will make our Download button visible.

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
    var menuItem: MenuItem = menu!!.findItem(downloadItem)
    menuItem.isVisible = showDownloadItem
    menuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
    return super.onPrepareOptionsMenu(menu)
}

Note you may need to import the MenuItem class.

import android.view.MenuItem

We just need to add one more function to our Kotlin file. This 'showDownload' function will make the Download menu item visible or invisible when a button we will add shortly is clicked.

fun showDownload(v: View) {
    showDownloadItem=!showDownloadItem
    invalidateOptionsMenu()
}

The last thing to do is add a button to your layout file (e.g. activity_main.xml). Set the 'onClick' attribute of the button to 'showDownload' so the Download item is hidden/revealed when the button is pressed.

show-menu-item.png

Your app should now work like this:

android-modify-menu.gif

<<< Previous

Next >>>