Option Menu Examples

Introduction to Option Menu in Android and Examples.

Option Menu is a common feature in Android applications that provides a set of actions or options that can be performed in the app. It is usually represented by three vertical dots in the upper-right corner of the screen and can be accessed by tapping on it. The options in the menu are displayed in a list and can be selected by the user.

In this article, we will discuss how to create an Option Menu in Android and add options to it. We will also show how to handle the selected option in the code. We will use Kotlin programming language to write the code examples.

Creating an Option Menu

To create an Option Menu in Android, we need to add a menu resource file to the app's res/menu directory. The menu resource file defines the options that will be displayed in the Option Menu.

1. First, create a new menu resource file in the res/menu directory. To do this, right-click on the res/menu directory and select New -> Menu Resource File.

2. Give the file a name, for example, menu_main.xml.

3. Open the file and add the following code:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        android:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        android:showAsAction="never" />
</menu>

This code defines two options in the menu: Search and Settings. The android:id attribute specifies a unique identifier for each option. The android:icon attribute specifies the icon that will be displayed next to the option. The android:title attribute specifies the text that will be displayed for the option. The android:showAsAction attribute specifies how the option will be displayed in the menu. ifRoom means that the option will be displayed in the action bar if there is enough room, otherwise it will be displayed in the overflow menu. never means that the option will always be displayed in the overflow menu.

Adding an Option Menu to an Activity

Once we have created the menu resource file, we need to add the Option Menu to an activity. To do this, we need to override the onCreateOptionsMenu method in the activity.

1. Open the activity where you want to add the Option Menu.

2. Override the onCreateOptionsMenu method and inflate the menu resource file.

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu_main, menu)
    return true
}

This code inflates the menu_main.xml file and adds it to the menu. The return true statement indicates that the menu has been created successfully.

Handling Option Menu Selection

When the user selects an option from the Option Menu, we need to handle the selection in the code. To do this, we need to override the onOptionsItemSelected method in the activity.

1. Override the onOptionsItemSelected method and handle the selected option.

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
        R.id.action_search -> {
            // Handle search option
            return true
        }
        R.id.action_settings -> {
            // Handle settings option
            return true
        }
        else -> return super.onOptionsItemSelected(item)
    }
}

This code checks the itemId of the selected option and handles it accordingly. If the itemId is R.id.action_search, it means that the Search option has been selected. We can add the code to handle the search option inside the when statement. Similarly, if the itemId is R.id.action_settings, it means that the Settings option has been selected. We can add the code to handle the settings option inside the when statement. If the itemId is not recognized, the code calls the super.onOptionsItemSelected(item) method to handle the option.

Advantages of Menus

However, menus are probably still the easiet and most popular and advantageous. This is because of the following:

1. They are easy to use for users with respect to navigation.
2. Menus can confine more menu items in a small space compared to other navigation utilities like the navigationview, tabs and bottom bar.
3. Menus are typically easy to customize as we represent them via XML in many cases.
4. It's relatively easier to apply animations to menu items than other navigation components.

In this section we will look at several examples of how to create menus.

Example 1: Kotlin Options Menu Example

Let's start by looking at the most commonly used menu, the options or toolbar menu. This type of menu is especially suitable if you want to implement actions that have a global impact on the app such as settings and search. You can control how the menu items are shown based on the device.

Demo

Here is a demo:

Step 1: Dependencies

No special dependencies are needed for this project.

Step 2: Create Menus

The next thing is to create a menu xml file inside a folder called menu and placed inside the res folder.

menu_text.xml

Inside it place the menu items:

<?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/kotlin"
        android:title="Kotloin"
        app:showAsAction="always"
        android:icon="@drawable/kotlin"/>

    <item
        android:id="@+id/info"
        android:title="info"
        android:icon="@drawable/kotlin"/>

    <item
        android:id="@+id/about"
        android:title="about us"
        android:icon="@drawable/kotlin"/>

</menu>

Step 3: Create Style

Because we will be showing menus, we must make sure the theme we are using in our activity supports a toolbar. In such a case you cannot use a NoActionBar theme. Instead you can a theme like the one below:

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Step 3: Handle Menu Selection Events

To do this start by overriding the two methods. Override the onCreateOptionsMenu() then inside it inflate the menu xml resource you had created.

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {

        menuInflater.inflate(R.menu.menu_test , menu)

        return true
    }

Next override the onOptionsItemSelected:

    override fun onOptionsItemSelected(item: MenuItem): Boolean {

Here is the full code:

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {

        menuInflater.inflate(R.menu.menu_test , menu)

        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {

        if (item != null)
            when(item.itemId){
                R.id.kotlin -> {
                    Toast.makeText(this,"What is Kotlin ?\n" +
                            "Kotlin is a statically-typed programming language for modern multi-platform applications.  Kotlin was developed by JetBrains, a company acclaimed for developing tools for professionals. The foremost goal of Kotlin is to provide a concise, productive and safer alternative to Java. The most common areas to use Kotlin are\n" +
                            "Building server-side code\n" +
                            "Building mobile applications that run on Android devices",Toast.LENGTH_LONG).show()
                }
                R.id.info -> {
                    Toast.makeText(this,"GitHub.com/alirezsbashi",Toast.LENGTH_SHORT).show()
                }
                R.id.about -> {
                    Toast.makeText(this,"im AlirezaBashi programming android",Toast.LENGTH_SHORT).show()
                }
            }

        return true
    }
}

Run

Run the project.

Reference

Find code links below:

No.	Link
1.	Download code
2.	Browse code
1.	Follow code author

Example 2: Kotlin Android Options Menu Example

Learn how to create a toolbar options menu in this example.

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No third party libraries are needed or used.

Step 3: Create Menu resource file

Create a folder known as menu under the res directory and inside it create main_menu.xml

menu/main_menu.xml

Add the menu items:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menu_about"
        android:title="About Us" />

    <item
        android:id="@+id/menu_help"
        android:title="Help" />

    <group android:id="@+id/menu_items">

        <item
            android:id="@+id/item_1"
            android:title="Item 1"/>

        <item
            android:id="@+id/item_2"
            android:title="Item 2"/>

        <item
            android:id="@+id/item_3"
            android:title="Item 3"/>
    </group>

</menu>

Step 4: Design Layout

Here is our layout:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Write Code

Inflate the main_menu.xml inside the onCreateOptionsMenu() callback:

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        super.onCreateOptionsMenu(menu)
        menuInflater.inflate(R.menu.main_menu, menu)
        return true
    }

Then get the selected menu item as follows:

    override fun onOptionsItemSelected(item: MenuItem): Boolean {

        var selectedOption = ""

        when(item.itemId)
        {
            R.id.menu_about -> selectedOption = "About Us"
            R.id.menu_help -> selectedOption = "Help"
            R.id.item_1 -> selectedOption = "Item 1"
            R.id.item_2 -> selectedOption = "Item 2"
            R.id.item_3 -> selectedOption = "Item 3"
        }
        Toast.makeText(this,"Option : $selectedOption", Toast.LENGTH_SHORT).show()

        return super.onOptionsItemSelected(item)
    }

Here is the full code:

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        super.onCreateOptionsMenu(menu)
        menuInflater.inflate(R.menu.main_menu, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {

        var selectedOption = ""

        when(item.itemId)
        {
            R.id.menu_about -> selectedOption = "About Us"
            R.id.menu_help -> selectedOption = "Help"
            R.id.item_1 -> selectedOption = "Item 1"
            R.id.item_2 -> selectedOption = "Item 2"
            R.id.item_3 -> selectedOption = "Item 3"
        }
        Toast.makeText(this,"Option : $selectedOption", Toast.LENGTH_SHORT).show()

        return super.onOptionsItemSelected(item)
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author
3.	Code: Apache 2.0 License

Example 3: ActionBar DropDown Menu Example

Android ActionBar Dropdown Navigation List

This is an android actionbar dropdown menu example.Display a simple dropdown menu and handle its itemClicks.

Section 1 : MainActivity

    package com.tutorials.dropdownnav;

    import android.app.ActionBar;
    import android.app.ActionBar.OnNavigationListener;
    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    import android.widget.Toast;

    public class MainActivity extends Activity {

      //DROPDOWN MENU ITEMS
      String[] actions={"Add","Save","Update","Delete","Copy"};
      ArrayAdapter<String> adapter;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            //ADAPTER INITIALIZATION
            adapter=new ArrayAdapter<String>(this, android.R.layout.simple_expandable_list_item_1, actions);

            //GET ACTIONBAR
            ActionBar ab=getActionBar();

            ab.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

            //GET ACTIONBAR LISTENER
            ActionBar.OnNavigationListener listener=new OnNavigationListener() {

          @Override
          public boolean onNavigationItemSelected(int pos, long id) {
            // WE SHOW SIMPLE TOAST WHEN A DROPDOWN ITEM IS SELECTED
            Toast.makeText(getApplicationContext(), actions[pos], Toast.LENGTH_SHORT).show();
            return false;
          }
        };
        //SET ADAPTER AND LISTENER TO ACTION BAR
        ab.setListNavigationCallbacks(adapter, listener);

        }

    }

Layout

This is our layout. We include nothing of note.

    <RelativeLayout
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_paddingBottom="@dimen/activity_vertical_margin"
        android_paddingLeft="@dimen/activity_horizontal_margin"
        android_paddingRight="@dimen/activity_horizontal_margin"
        android_paddingTop="@dimen/activity_vertical_margin"
        tools_context=".MainActivity" >

    </RelativeLayout>

Good day.

Exampole 4: How to Create Options Menu Programmatically

What about if you want to create your Options Menu without touching XML. Well you can do it in pure Java or Kotlin, or rather create your Menu programmatically. This is what this example is about.

Here is the demo screenshot of the project we will create:

Let's start.

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No special or third party dependencies are needed for this example.

Step 3: Layout

We just have a dummy layout for our MainActivity with a simple TextView.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.ankitkumar.optionmenubycode.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

Step 4: Write Code

To programmatically create the menu all you need to do is override the onCreateOptionsMenu() function then add menu items to the passed Menuobject as follows:

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        menu.add(1, 1, 0, "Option1");

        menu.add(1, 2, 1, "Option2");

        menu.add(1, 3, 2, "Option3");
        return true;
    }

You can then handle the Selected Menu item events as follows:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()){
            case 1:
                Toast.makeText(this, "Clicked on Option 1", Toast.LENGTH_SHORT).show();
                break;
            case 2:
                Toast.makeText(this, "Clicked on Option 2", Toast.LENGTH_SHORT).show();
                break;
            case 3:
                Toast.makeText(this, "Clicked on Option 3", Toast.LENGTH_SHORT).show();
                break;

        }
        return true;
    }

Here is the full code:

MainActivity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        menu.add(1, 1, 0, "Option1");

        menu.add(1, 2, 1, "Option2");

        menu.add(1, 3, 2, "Option3");
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()){
            case 1:
                Toast.makeText(this, "Clicked on Option 1", Toast.LENGTH_SHORT).show();
                break;
            case 2:
                Toast.makeText(this, "Clicked on Option 2", Toast.LENGTH_SHORT).show();
                break;
            case 3:
                Toast.makeText(this, "Clicked on Option 3", Toast.LENGTH_SHORT).show();
                break;

        }
        return true;
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author

Conclusion

In this article, we discussed how to create an Option Menu in Android and add options to it. We also showed how to handle the selected option in the code. We used Kotlin programming language to write the code examples. Option Menu is a common feature in Android applications that provides a set of actions or options that can be performed in the app. It is easy to implement and can enhance the user experience of an app.