BottomAppBar + Navigation Drawer trong Android (Java)

🔍 Giới thiệu

BottomAppBar thường được sử dụng với FloatingActionButton (FAB), nhưng bạn cũng có thể kết hợp với Navigation Drawer (ngăn điều hướng bên trái) để tạo trải nghiệm điều hướng hiện đại và tiện dụng bằng một tay.

🔁 Khác với Navigation Drawer truyền thống dùng với TopAppBar, nay chúng ta di chuyển nút menu xuống BottomAppBar.

---

🎯 Khi nào dùng?

• ✅ Bạn muốn giữ màn hình gọn gàng, dễ thao tác bằng tay phải.
• ✅ App có từ 3-6 nhóm chức năng và chỉ cần 1 menu phụ.
• ✅ Không cần Bottom Navigation View (tab cố định).

---

🧱 Cấu trúc tổng quan

• DrawerLayout: bao ngoài toàn bộ.
• NavigationView: là ngăn menu trượt bên trái.
• CoordinatorLayout: chứa FAB và BottomAppBar.

---

🛠️ Hướng dẫn cài đặt

1️⃣ Thêm thư viện Material trong build.gradle

gradleCopyEditimplementation 'com.google.android.material:material:1.10.0'

---

2️⃣ Tạo menu ngăn kéo res/menu/drawer_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/nav_home" android:title="Trang chủ" android:icon="@drawable/ic_home" />
    <item android:id="@+id/nav_settings" android:title="Cài đặt" android:icon="@drawable/ic_settings" />
</menu>

---

3️⃣ Menu cho BottomAppBar res/menu/bottom_app_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_search" android:title="Tìm kiếm" android:icon="@drawable/ic_search" android:showAsAction="ifRoom"/>
</menu>

---

4️⃣ Tạo layout activity_main.xml

<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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <!-- Main content -->
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Nội dung chính -->
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- FAB -->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/ic_add"
            app:layout_anchor="@id/bottom_app_bar"
            app:layout_anchorGravity="center" />

        <!-- BottomAppBar -->
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:navigationIcon="@drawable/ic_menu"
            app:menu="@menu/bottom_app_menu" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.drawerlayout.widget.DrawerLayout>

---

5️⃣ Code xử lý trong MainActivity.java

DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);
NavigationView navigationView = findViewById(R.id.navigation_view);

// Bắt sự kiện click biểu tượng menu
bottomAppBar.setNavigationOnClickListener(v -> {
    drawerLayout.openDrawer(GravityCompat.START);
});

// Xử lý chọn trong Navigation Drawer
navigationView.setNavigationItemSelectedListener(item -> {
    switch (item.getItemId()) {
        case R.id.nav_home:
            Toast.makeText(this, "Trang chủ", Toast.LENGTH_SHORT).show();
            break;
        case R.id.nav_settings:
            Toast.makeText(this, "Cài đặt", Toast.LENGTH_SHORT).show();
            break;
    }
    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
});

// FAB
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(v -> {
    Toast.makeText(this, "Thêm mới", Toast.LENGTH_SHORT).show();
});

---

🧩 Tuỳ chỉnh gợi ý

• Thêm headerLayout cho NavigationView để hiển thị thông tin người dùng.
• Dùng Navigation Component để điều hướng nhiều fragment chuyên nghiệp hơn.
• Có thể thay FrameLayout bằng FragmentContainerView.

---

✅ Tổng kết

Ưu điểm	Hạn chế
✅ Giữ giao diện hiện đại, dễ thao tác	⚠️ Không phù hợp nếu app có nhiều tầng điều hướng
✅ Kết hợp FAB + Menu trong cùng khu vực	⚠️ Ít phổ biến hơn cấu trúc truyền thống
✅ Hỗ trợ Navigation Drawer như kiểu cổ điển

• Share on Facebook