NavigationView trong ActionBar - Navigation Drawer Android

Navigation Drawer (NavigationView) là menu trượt từ cạnh màn hình (thường là trái), chứa các mục điều hướng chính của ứng dụng. Đây là pattern UI chuẩn của Material Design.

Cấu trúc file layout tự động tạo

Khi chọn "Navigation Drawer Activity" trong wizard tạo project, Android Studio tạo sẵn các file:

1. activity_main.xml - Root layout với DrawerLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>

2. app_bar_main.xml - Toolbar và content

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.App.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/Theme.App.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>

<include layout="@layout/content_main" />

3. nav_header_main.xml - Header của NavigationView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:contentDescription="@string/nav_header_desc"
        app:srcCompat="@drawable/ic_launcher_foreground" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:text="Tên người dùng"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#FFF"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="email@example.com"
        android:textColor="#FFF" />
</LinearLayout>

4. menu/activity_main_drawer.xml - Menu items

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

    <group android:checkableBehavior="single">
        <item android:id="@+id/nav_home" android:icon="@drawable/ic_home" android:title="Trang chủ" />
        <item android:id="@+id/nav_profile" android:icon="@drawable/ic_person" android:title="Hồ sơ" />
        <item android:id="@+id/nav_settings" android:icon="@drawable/ic_settings" android:title="Cài đặt" />
    </group>

    <item android:title="Khác">
        <menu>
            <item android:id="@+id/nav_share" android:icon="@drawable/ic_share" android:title="Chia sẻ" />
            <item android:id="@+id/nav_about" android:icon="@drawable/ic_info" android:title="Giới thiệu" />
        </menu>
    </item>
</menu>

MainActivity.java - Xử lý navigation

import android.os.Bundle;
import android.view.MenuItem;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity 
        implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout drawerLayout;

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        drawerLayout = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        // Toggle icon hamburger
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawerLayout, toolbar,
            R.string.navigation_drawer_open,
            R.string.navigation_drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
    }

    @Override
    public void onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        
        if (id == R.id.nav_home) {
            // Xử lý trang chủ
        } else if (id == R.id.nav_profile) {
            // Mở profile
        } else if (id == R.id.nav_settings) {
            // Mở settings
        } else if (id == R.id.nav_share) {
            // Chia sẻ app
        } else if (id == R.id.nav_about) {
            // Giới thiệu
        }

        drawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }
}

Điều khiển NavigationView bằng code

// Mở drawer
drawerLayout.openDrawer(GravityCompat.START);

// Đóng drawer
drawerLayout.closeDrawer(GravityCompat.START);

// Kiểm tra trạng thái
if (drawerLayout.isDrawerOpen(GravityCompat.START)) { ... }

// Đổi vị trí drawer sang phải (END)
drawerLayout.closeDrawer(GravityCompat.END);

Chạy ứng dụng

App khởi động hiển thị Toolbar với icon hamburger. Vuốt từ trái sang hoặc nhấn icon → NavigationView trượt ra. Chọn item → xử lý tương ứng và drawer tự đóng.

Lưu ý quan trọng

• Sử dụng Material Components theme (Theme.MaterialComponents.*)
• NavigationView nên dùng với Navigation Component (NavController) cho app phức tạp
• Header layout có thể cập nhật động (tên, avatar user sau login)
• app:menu chỉ định menu resource, app:headerLayout chỉ định header layout