วิธีใช้ NavigationView (Navigation Drawer) ใน Android

การใช้งาน NavigationView (Navigation Drawer) ใน Android

ตัวอย่างนี้สาธิตการสร้าง Navigation Drawer ด้วย NavigationView ของ Material Design พร้อม Header, Menu และ Fragment Navigation

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

ไปที่ File → New Project เลือก Template "Navigation Drawer Activity" เพื่อสร้างโครงสร้างอัตโนมัติ

ขั้นตอนที่ 2: Layout หลัก (activity_main.xml)

<?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">

    <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" />

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.drawerlayout.widget.DrawerLayout>

ขั้นตอนที่ 3: โค้ดหลัก (MainActivity.java)

import android.os.Bundle;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;
import android.view.View;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import com.google.android.material.navigation.NavigationView;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.view.Menu;

public class MainActivity extends AppCompatActivity {
    private AppBarConfiguration mAppBarConfiguration;

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

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

        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(view -> Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
            .setAction("Action", null).show());

        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);

        mAppBarConfiguration = new AppBarConfiguration.Builder(
            R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow,
            R.id.nav_tools, R.id.nav_share, R.id.nav_send)
            .setDrawerLayout(drawer).build();

        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
        NavigationUI.setupWithNavController(navigationView, navController);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onSupportNavigateUp() {
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        return NavigationUI.navigateUp(navController, mAppBarConfiguration) || super.onSupportNavigateUp();
    }
}

ไฟล์ที่เกี่ยวข้อง (สร้างโดย Template อัตโนมัติ)

• nav_header_main.xml - Layout หัวข้อ Drawer (รูปโปรไฟล์, ชื่อ, อีเมล)
• activity_main_drawer.xml - Menu รายการใน Drawer (Home, Gallery, Slideshow, Tools, Share, Send)
• app_bar_main.xml - Layout Toolbar และ Content Container (NavHostFragment)
• Fragment ต่างๆ - HomeFragment, GalleryFragment, SlideshowFragment, etc.

💡 แนวทางปฏิบัติที่ดี (Best Practices)

• ใช้ Navigation Component (NavController, NavGraph) สำหรับจัดการนำทาง
• แยก Logic ออกเป็น ViewModel ตามหลัก MVVM
• ใช้ Safe Args สำหรับส่งข้อมูลระหว่าง Fragment อย่างปลอดภัย
• กำหนด app:menuCategory="secondary" สำหรับเมนูที่ไม่ใช่หลัก

ขั้นตอนที่ 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.myapplication">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

การทดสอบ

รันแอป สไวปจากขอบซ้ายหรือกดไอคอนแฮมเบอร์เกอร์ จะเปิด Navigation Drawer เลือกเมนูจะนำทางไป Fragment ต่างๆ