Lập trình Android -Java

Navigation Drawer + TopAppBar trong Android (Java)

🔍 Giới thiệu

Navigation Drawer (ngăn điều hướng bên trái) là mẫu thiết kế phổ biến giúp người dùng dễ dàng truy cập các phần chính của ứng dụng. Nó thường được kết hợp với TopAppBar (còn gọi là Toolbar hoặc ActionBar) để hiển thị nút menu (≡) và tiêu đề ứng dụng.

✅ Phù hợp với các ứng dụng có nhiều chức năng phân tầng rõ ràng.
🔁 Khác với BottomAppBar, menu điều hướng đặt ở phía trên và thao tác 2 tay dễ hơn.

🧱 Cấu trúc tổng quan

  • DrawerLayout: bọc toàn bộ giao diện.
  • NavigationView: hiển thị ngăn kéo trái.
  • AppBarLayout + Toolbar: là thanh tiêu đề.
  • FrameLayout: vùng hiển thị nội dung.

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

1️⃣ Thêm thư viện Material vào build.gradle

implementation 'com.google.android.material:material:1.10.0'
implementation "androidx.drawerlayout:drawerlayout:1.2.0"

2️⃣ 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"
        app:headerLayout="@layout/nav_header" />

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

        <!-- Top App Bar -->
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:title="Tên ứng dụng"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </com.google.android.material.appbar.AppBarLayout>

        <!-- Nội dung chính -->
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.drawerlayout.widget.DrawerLayout>

3️⃣ Menu điều hướng 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>

4️⃣ Header cho Navigation Drawer res/layout/nav_header.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="@color/colorPrimary"
    android:gravity="bottom"
    android:padding="16dp"
    android:orientation="vertical">
    
    <TextView
        android:id="@+id/nav_header_title"
        android:text="Xin chào!"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

5️⃣ Xử lý logic trong MainActivity.java

public class MainActivity extends AppCompatActivity {

    DrawerLayout drawerLayout;
    NavigationView navigationView;
    Toolbar toolbar;

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

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

        // Thiết lập toolbar làm ActionBar
        setSupportActionBar(toolbar);

        // Hiển thị nút menu
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, 
                R.string.navigation_drawer_open, 
                R.string.navigation_drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        // Xử lý chọn menu
        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;
        });
    }
}

🔄 So sánh với BottomAppBar

Điểm khác biệtTopAppBar + DrawerBottomAppBar + Drawer
🔝 Vị tríPhía trên màn hìnhPhía dưới màn hình
📂 Kiểu trải nghiệmTruyền thốngHiện đại, dễ dùng bằng một tay
📱 Tính tương thíchRộng rãi, phổ biến hơnDành cho app mới/gọn nhẹ

✅ Tổng kết

  • ✅ Giao diện truyền thống, dễ làm quen.
  • ✅ Navigation Drawer giúp phân chia chức năng logic và gọn gàng.
  • ✅ Kết hợp với Toolbar tạo cảm giác “native” Android chuẩn Material.

Comments are closed.