1. Introduction

Menus and navigation components are important parts of Android application design.

They help users access different features and move between different sections of an application.

For example, a student management application may contain:

• Home

• Students

• Courses

• Settings

• About

Instead of placing every option directly on the screen, we can organize these options using menus and navigation components.

In this tutorial, we will learn how to create:

1. Options Menu

2. Popup Menu

3. Toolbar

4. Navigation Drawer

We will implement these components using Android Studio and Java.

2. What Is a Menu in Android?

A Menu is a user interface component that displays a list of available actions or options.

For example, an application may provide options such as:

• Settings

• Search

• Share

• Logout

Android provides different types of menus.

Types of Menus

1. Options Menu

Displays important actions for an Activity, commonly through the app bar's overflow menu.

2. Context Menu

Displays actions related to a selected View, commonly after a long press.

3. Popup Menu

Displays a small menu anchored to a particular View, such as a button.

In this tutorial, we will practically implement Options Menu and Popup Menu.

3. Create an Options Menu in Android Studio

An Options Menu provides actions related to the current Activity.

For example, we can display Settings and About options in the app bar.

Step 1: Create a Menu Resource File

Open your Android project.

Navigate to:

app → res

Right-click the res folder and select:

New → Android Resource Directory

Choose:

• Resource Type: menu

Click OK.

Now right-click the newly created menu folder.

Select:

New → Menu Resource File

Name the file:

main_menu.xml

Step 2: Add Menu Items

Open main_menu.xml and add the following code:

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

    <item
        android:id="@+id/menu_settings"
        android:title="Settings" />

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

    <item
        android:id="@+id/menu_logout"
        android:title="Logout" />

</menu>

Code Explanation:

• <menu> defines the menu resource.

• <item> creates an individual menu option.

• android:id gives each item a unique ID.

• android:title defines the text displayed to the user.

Step 3: Display the Options Menu in MainActivity

Open MainActivity.java.

Add these methods inside your Activity class:

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    getMenuInflater().inflate(
        R.menu.main_menu,
        menu
    );

    return true;
}

Explanation:

• onCreateOptionsMenu() is called when Android creates the Activity's Options Menu.

• getMenuInflater() provides the MenuInflater.

• inflate() loads the menu XML resource.

• return true indicates that the menu should be displayed.

Add the required import:

import android.view.Menu;

Step 4: Handle Menu Item Clicks

Add the following method inside MainActivity:

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    if (id == R.id.menu_settings) {

        Toast.makeText(
            this,
            "Settings Clicked",
            Toast.LENGTH_SHORT
        ).show();

        return true;

    } else if (id == R.id.menu_about) {

        Toast.makeText(
            this,
            "About Clicked",
            Toast.LENGTH_SHORT
        ).show();

        return true;

    } else if (id == R.id.menu_logout) {

        Toast.makeText(
            this,
            "Logout Clicked",
            Toast.LENGTH_SHORT
        ).show();

        return true;
    }

    return super.onOptionsItemSelected(item);
}

Add these imports if they are not already present:

import android.view.MenuItem;
import android.widget.Toast;

Explanation:

• onOptionsItemSelected() handles menu item selection.

• getItemId() identifies which item was clicked.

• The if-else conditions check the selected menu option.

• Toast displays a short message.

Result: Your Activity can now display an Options Menu with Settings, About, and Logout options.

Note: The menu appears in the app bar or overflow area when the Activity has a compatible app bar setup.

4. What Is a Popup Menu?

A Popup Menu is a small menu that appears near a particular View.

For example, when a user clicks a three-dot button, a small menu may appear with Edit, Delete, and Share options.

Step 1: Add a Button in activity_main.xml

<Button
    android:id="@+id/btnPopup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Open Popup Menu" />

Add this Button inside your existing layout.

Step 2: Create a Popup Menu Resource

Create another menu resource file:

popup_menu.xml

Add the following code:

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

    <item
        android:id="@+id/popup_edit"
        android:title="Edit" />

    <item
        android:id="@+id/popup_delete"
        android:title="Delete" />

    <item
        android:id="@+id/popup_share"
        android:title="Share" />

</menu>

Step 3: Write Popup Menu Java Code

Open MainActivity.java.

Button btnPopup;

btnPopup = findViewById(R.id.btnPopup);

btnPopup.setOnClickListener(v -> {

    PopupMenu popupMenu = new PopupMenu(
        MainActivity.this,
        btnPopup
    );

    popupMenu.getMenuInflater().inflate(
        R.menu.popup_menu,
        popupMenu.getMenu()
    );

    popupMenu.setOnMenuItemClickListener(item -> {

        int id = item.getItemId();

        if (id == R.id.popup_edit) {

            Toast.makeText(
                this,
                "Edit Clicked",
                Toast.LENGTH_SHORT
            ).show();

            return true;

        } else if (id == R.id.popup_delete) {

            Toast.makeText(
                this,
                "Delete Clicked",
                Toast.LENGTH_SHORT
            ).show();

            return true;

        } else if (id == R.id.popup_share) {

            Toast.makeText(
                this,
                "Share Clicked",
                Toast.LENGTH_SHORT
            ).show();

            return true;
        }

        return false;
    });

    popupMenu.show();

});

Add these imports:

import android.widget.Button;
import android.widget.PopupMenu;

Explanation:

• PopupMenu creates a popup menu.

• The second constructor argument specifies the View where the menu should appear.

• inflate() loads the popup menu resource.

• setOnMenuItemClickListener() handles menu selections.

• show() displays the menu.

Result: When the user clicks the button, Edit, Delete, and Share options appear.

5. What Is a Toolbar in Android?

A Toolbar is an app bar component that displays the application title, navigation icon, and action items.

It helps users understand which screen they are viewing and provides access to important actions.

A Toolbar can contain:

• Application title

• Navigation icon

• Menu options

• Action buttons

In modern Android applications, developers commonly use the AndroidX Toolbar.

Step 1: Add Toolbar Dependency

If your project does not already include the AndroidX AppCompat library, add the appropriate AppCompat dependency in your app-level Gradle file.

For example:

implementation 'androidx.appcompat:appcompat:1.7.0'

Use a compatible version for your project.

Step 2: Create Toolbar in XML

Open activity_main.xml.

Use the following layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#1976D2"
        app:title="My Application"
        app:titleTextColor="#FFFFFF" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to My Application"
        android:textSize="22sp"
        android:layout_gravity="center"
        android:layout_marginTop="40dp" />

</LinearLayout>

Step 3: Configure Toolbar in Java

Open MainActivity.java.

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;

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

        toolbar = findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);
    }
}

Explanation:

• Toolbar refers to the AndroidX Toolbar component.

• findViewById() connects the XML Toolbar with Java.

• setSupportActionBar() sets the Toolbar as the Activity's app bar.

Important: If you use a custom Toolbar as the Activity's support action bar, choose a compatible NoActionBar theme so that Android does not display a second default action bar.

You can also define menu items through onCreateOptionsMenu() and handle them through onOptionsItemSelected().

6. What Is a Navigation Drawer?

A Navigation Drawer is a side panel that displays the main navigation options of an application.

It usually opens when the user clicks a hamburger menu icon.

For example, a student management application may contain:

• Home

• Students

• Attendance

• Reports

• Settings

Navigation Drawers are useful when an application contains multiple main sections.

Step 1: Add Material Components Dependency

The Material Components library provides NavigationView and other Material Design components.

Add a compatible dependency in your app-level Gradle file:

implementation 'com.google.android.material:material:1.12.0'

Use a version compatible with your Android Gradle Plugin and project configuration.

Step 2: Create Navigation Menu Resource

Inside res/menu, create:

drawer_menu.xml

Add:

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

    <item
        android:id="@+id/nav_home"
        android:title="Home" />

    <item
        android:id="@+id/nav_students"
        android:title="Students" />

    <item
        android:id="@+id/nav_attendance"
        android:title="Attendance" />

    <item
        android:id="@+id/nav_settings"
        android:title="Settings" />

</menu>

Step 3: Create Navigation Drawer Layout

Replace the content of activity_main.xml with this example:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#1976D2"
            app:title="Student App"
            app:titleTextColor="#FFFFFF" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Home Screen"
                android:textSize="24sp" />

        </FrameLayout>

    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

Explanation:

• DrawerLayout is the main container for the navigation drawer.

• Toolbar displays the application title.

• NavigationView displays the drawer menu.

• app:menu connects the drawer with the menu resource.

• layout_gravity="start" positions the drawer at the start side of the screen.

Step 4: Write Navigation Drawer Java Code

Open MainActivity.java.

package com.example.myapp;

import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;
import android.widget.Toast;

import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.drawerlayout.widget.DrawerLayout;

import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    DrawerLayout drawerLayout;
    NavigationView navigationView;

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

        toolbar = findViewById(R.id.toolbar);
        drawerLayout = findViewById(R.id.drawerLayout);
        navigationView = findViewById(R.id.navigationView);

        setSupportActionBar(toolbar);

        ActionBarDrawerToggle toggle =
                new ActionBarDrawerToggle(
                        this,
                        drawerLayout,
                        toolbar,
                        R.string.navigation_drawer_open,
                        R.string.navigation_drawer_close
                );

        drawerLayout.addDrawerListener(toggle);

        toggle.syncState();

        navigationView.setNavigationItemSelectedListener(item -> {

            int id = item.getItemId();

            if (id == R.id.nav_home) {

                Toast.makeText(
                        this,
                        "Home Selected",
                        Toast.LENGTH_SHORT
                ).show();

            } else if (id == R.id.nav_students) {

                Toast.makeText(
                        this,
                        "Students Selected",
                        Toast.LENGTH_SHORT
                ).show();

            } else if (id == R.id.nav_attendance) {

                Toast.makeText(
                        this,
                        "Attendance Selected",
                        Toast.LENGTH_SHORT
                ).show();

            } else if (id == R.id.nav_settings) {

                Toast.makeText(
                        this,
                        "Settings Selected",
                        Toast.LENGTH_SHORT
                ).show();
            }

            drawerLayout.closeDrawer(Gravity.START);

            return true;
        });
    }
}

Step 5: Add String Resources

Open res/values/strings.xml.

Add these strings inside the existing <resources> element:

<string name="navigation_drawer_open">Open navigation drawer</string>

<string name="navigation_drawer_close">Close navigation drawer</string>

These strings are used by ActionBarDrawerToggle for accessibility descriptions.

Result:

• A Toolbar appears at the top.

• A hamburger icon opens the Navigation Drawer.

• The drawer displays Home, Students, Attendance, and Settings.

• Clicking a menu item displays a Toast and closes the drawer.

This example demonstrates menu selection. In a complete application, you would replace the Toast messages with actual screen navigation or content changes.

7. What Is ActionBarDrawerToggle?

ActionBarDrawerToggle connects the Toolbar with the DrawerLayout.

It provides:

• Hamburger menu interaction.

• Opening and closing drawer behavior.

• Synchronization between the Toolbar icon and drawer state.

• Accessibility descriptions for opening and closing the drawer.

Important methods:

1. addDrawerListener()

Connects the toggle with DrawerLayout.

2. syncState()

Synchronizes the hamburger icon with the current drawer state.

8. Difference Between Options Menu, Popup Menu, Toolbar and Navigation Drawer

Options Menu:

Displays Activity-related actions such as Settings and About.

Popup Menu:

Displays a small list of actions near a particular View.

Toolbar:

Displays the app title, navigation controls, and action items at the top of the screen.

Navigation Drawer:

Provides access to the main sections of an application through a side panel.

Each component serves a different purpose. Choose the component according to the navigation and interaction requirements of your application.

9. Common Mistakes

1. Incorrect Menu Resource Location

Menu XML files must be placed inside:

res/menu

2. Incorrect Menu IDs

The IDs used in Java must match the IDs declared in the XML file.

3. Forgetting setSupportActionBar()

If you are using an AndroidX Toolbar as the support app bar, configure it using:

setSupportActionBar(toolbar);

4. Missing Dependencies

NavigationView requires the Material Components library, and DrawerLayout requires the appropriate AndroidX DrawerLayout dependency.

5. Forgetting Drawer Toggle Synchronization

Call:

toggle.syncState();

to synchronize the hamburger icon.

6. Using an Incompatible Theme

A custom Toolbar used as the support action bar should generally be paired with a compatible NoActionBar theme.

10. Practice Tasks

Complete these practical tasks in Android Studio:

1. Create an Options Menu with Home, Settings, and About.

2. Display a Toast when each Options Menu item is clicked.

3. Create a Popup Menu with Edit, Delete, and Share.

4. Add a custom Toolbar with an application title.

5. Create a Navigation Drawer with Home, Students, Courses, and Settings.

6. Display a different message when each drawer item is selected.

7. Replace at least one Toast action with navigation to another Activity.

11. Conclusion

Menus, Toolbars, and Navigation Drawers help organize Android applications and make navigation easier.

In this tutorial, we learned how to:

• Create an Options Menu using XML.

• Handle menu item clicks in Java.

• Create a Popup Menu.

• Add a custom AndroidX Toolbar.

• Build a Navigation Drawer using DrawerLayout and NavigationView.

• Connect the hamburger icon with the drawer using ActionBarDrawerToggle.

These components are commonly used in real-world Android applications.

12. Frequently Asked Questions (FAQs)

Q1. What is an Options Menu in Android?

An Options Menu displays important actions related to the current Activity.

Q2. What is a Popup Menu?

A Popup Menu is a small menu that appears near a specific View.

Q3. What is a Toolbar?

A Toolbar is an app bar component that displays the application title, navigation controls, and action items.

Q4. What is a Navigation Drawer?

A Navigation Drawer is a side panel that displays the main navigation options of an application.

Q5. Which class is used to create a Popup Menu?

The PopupMenu class is used to create a Popup Menu.

Q6. Which component is used to create a Navigation Drawer?

DrawerLayout and NavigationView are commonly used together to create a Navigation Drawer.

Q7. What is the purpose of ActionBarDrawerToggle?

It connects the Toolbar hamburger icon with the Navigation Drawer and synchronizes their states.