How to Use Navigation Drawer in Android Studio (Java) – A Complete Guide

by

The Navigation Drawer is a common UI pattern in Android applications that provides quick navigation between different sections of the app. It appears as a sliding menu from the left side of the screen when the user swipes from the edge or taps on the hamburger menu.

This tutorial will guide you through:

  • What is a Navigation Drawer?
  • Advantages of Using a Navigation Drawer
  • Step-by-Step Implementation in Android Studio (Java)
  • Handling Navigation Item Clicks
  • Customizing the Navigation Drawer
  • Complete Code Example

What is a Navigation Drawer?

A Navigation Drawer is a sliding menu that provides navigation to different sections of an app. It is part of Android’s Material Design and is commonly used in apps like Google Drive, Gmail, and YouTube.

Example Use Cases

  • Switching between different fragments or activities.
  • Navigating between app sections like Home, Settings, Profile, Logout.
  • Providing additional functionality like Help & Support, About Us, Feedback.

Advantages of Using a Navigation Drawer

✅ User-Friendly: Provides an easy way to navigate within the app.
✅ Space-Saving: Does not take up screen space unless opened.
✅ Consistent UI: Used in many popular apps, making it familiar to users.
✅ Expandable: Can hold many options without cluttering the UI.

Step-by-Step Guide to Implement Navigation Drawer in Android Studio (Java)

Step 1: Create a New Android Project

  1. Open Android Studio.
  2. Select New Project → Empty Activity.
  3. Choose Java as the language.
  4. Click Finish.

Step 2: Add Dependencies

Ensure you have Material Components installed in your build.gradle (Module: app):

dependencies {
    implementation 'com.google.android.material:material:1.6.0'
}

Sync your project after adding this.

Step 3: Modify activity_main.xml to Include DrawerLayout

Replace the default ConstraintLayout with a DrawerLayout. This will serve as the container for the NavigationView and Toolbar.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- Main Content Layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- Toolbar -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:title="Navigation Drawer" />

        <!-- Main Content -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <!-- Navigation Drawer -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

Step 4: Create a Menu File (res/menu/nav_menu.xml)

Create a menu resource file for the navigation drawer items.

  1. Go to res → menu (If menu folder is not present, create one).
  2. Right-click menu → New → Menu Resource File → Name it nav_menu.xml.
  3. Add the following menu items:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@android:drawable/ic_menu_home"
        android:title="Home" />

    <item
        android:id="@+id/nav_profile"
        android:icon="@android:drawable/ic_menu_myplaces"
        android:title="Profile" />

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

    <item
        android:id="@+id/nav_logout"
        android:icon="@android:drawable/ic_menu_close_clear_cancel"
        android:title="Logout" />
</menu>

Step 5: Modify MainActivity.java to Handle Navigation

Now, set up the NavigationView and DrawerLayout in MainActivity.java.

package com.example.navigationdrawer;

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

import androidx.annotation.NonNull;
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 {

    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
    private Toolbar toolbar;

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

        // Initialize Views
        drawerLayout = findViewById(R.id.drawer_layout);
        navigationView = findViewById(R.id.nav_view);
        toolbar = findViewById(R.id.toolbar);

        // Set Toolbar as ActionBar
        setSupportActionBar(toolbar);

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

        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        // Handle Navigation Item Clicks
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();

                if (id == R.id.nav_home) {
                    Toast.makeText(MainActivity.this, "Home Clicked", Toast.LENGTH_SHORT).show();
                } else if (id == R.id.nav_profile) {
                    Toast.makeText(MainActivity.this, "Profile Clicked", Toast.LENGTH_SHORT).show();
                } else if (id == R.id.nav_settings) {
                    Toast.makeText(MainActivity.this, "Settings Clicked", Toast.LENGTH_SHORT).show();
                } else if (id == R.id.nav_logout) {
                    Toast.makeText(MainActivity.this, "Logout Clicked", Toast.LENGTH_SHORT).show();
                }

                // Close Drawer After Selection
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }
}

Step 6: Add Strings in res/values/strings.xml

Add these strings for better accessibility:

<resources>
    <string name="app_name">Navigation Drawer</string>
    <string name="navigation_drawer_open">Open Navigation Drawer</string>
    <string name="navigation_drawer_close">Close Navigation Drawer</string>
</resources>

Step 7: Run the App

  1. Click Run ▶️ in Android Studio.
  2. The app will launch with a hamburger menu on the top-left.
  3. Click the menu icon to open the Navigation Drawer.
  4. Click on any menu item to see a Toast message.

Conclusion

🎯 Navigation Drawer provides an intuitive way to navigate between different app sections. It’s widely used in modern Android apps for better user experience.

Key Takeaways

  • DrawerLayout is the main container for the Navigation Drawer.
  • NavigationView holds menu items inside the drawer.
  • ActionBarDrawerToggle helps in toggling the drawer.
  • NavigationItemSelectedListener handles item clicks.

💡 Next Steps: Try replacing Toast messages with Fragment transactions to load different screens when menu items are clicked. 🚀

Leave a Comment

© 2025 Marketer • Built with GeneratePress
Privacy Policy Terms Contact