Drawer — apa itu, DrawerLayout dan menu samping di aplikasi

Apa itu Drawer?

Drawer (Navigation Drawer) — elemen navigasi berupa panel yang muncul dari tepi kiri layar dengan gerakan gesek atau klik ikon 'hamburger' (tiga garis horizontal). Drawer berisi tautan navigasi, judul, dan elemen opsional: avatar pengguna, penghitung notifikasi, pemisah. Panel dapat menutupi konten (Modal) atau menggesernya (Standard).

Material Design 3 (2026) mendefinisikan Navigation Drawer sebagai komponen untuk aplikasi dengan 6+ titik navigasi. Berbeda dengan Bottom Navigation, Drawer tidak menempati tempat tetap di layar dan hanya ditampilkan atas permintaan pengguna. Ini membebaskan ruang untuk konten, tetapi memerlukan tindakan tambahan untuk membukanya. Google merekomendasikan Drawer untuk aplikasi dengan hierarki bagian yang dalam.

Penelitian UX Planet (2025) menunjukkan: Drawer cocok untuk aplikasi dengan 5–15 bagian, tetapi waktu navigasi 40% lebih tinggi daripada Bottom Navigation. Pengguna melewatkan item menu yang berada di bawah lipatan layar (scroll). Oleh karena itu, bagian penting harus berada di bagian atas Drawer, dan yang kurang penting (Tentang aplikasi, Pengaturan) — di bagian bawah, dipisahkan oleh pemisah.

Jenis Drawer: Modal dan Standard

Modal Drawer — muncul di atas konten, menggelapkan latar belakang. Digunakan pada perangkat seluler yang layarnya terbatas lebarnya. Setelah memilih item, Drawer otomatis menutup. Standard Drawer (Permanent) — panel tetap, selalu terlihat, yang menggeser konten. Digunakan pada tablet dan desktop dengan lebar layar dari 900 dp. Material 3 juga mendefinisikan Rail Drawer — versi ringkas untuk tablet yang hanya menampilkan ikon.

DrawerLayout di Android

DrawerLayout — ViewGroup standar di Android yang mengimplementasikan menu geser samping. DrawerLayout berisi dua elemen anak: pertama — konten utama (FrameLayout dengan NavHostFragment), kedua — NavigationView dengan menu. DrawerLayout menangani gerakan gesek dan pembukaan/penutupan terprogram melalui ActionBarDrawerToggle.

// Aktivitas dengan DrawerLayout dan NavigationView
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        drawerLayout = binding.drawerLayout
        val navView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Menghubungkan Drawer dengan Navigation Component
        NavigationUI.setupActionBarWithNavController(
            this, navController, drawerLayout
        )
        NavigationUI.setupWithNavController(navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(
            findNavController(R.id.nav_host_fragment),
            drawerLayout
        )
    }
}

// XML: activity_main.xml
// <androidx.drawerlayout.widget.DrawerLayout
//   android:id="@+id/drawerLayout"
//   ...>
//   <!-- Konten utama -->
//   <FrameLayout android:id="@+id/nav_host_fragment"
//     android:layout_width="match_parent"
//     android:layout_height="match_parent" />
//   <!-- Navigation Drawer -->
//   <com.google.android.material.navigation.NavigationView
//     android:id="@+id/navView"
//     android:layout_width="wrap_content"
//     android:layout_height="match_parent"
//     android:layout_gravity="start"
//     app:menu="@menu/nav_menu" />
// </androidx.drawerlayout.widget.DrawerLayout>

NavigationView — komponen Material Design untuk isi Drawer. Mendukung header (headerLayout), item menu (menu), subjudul, checkbox, dan bendera. Atribut app:menu menunjuk ke XML-menu dengan titik navigasi. NavigationUI secara otomatis menyorot item aktif dan menyinkronkan status dengan NavController.

Side Menu di iOS

iOS tidak memiliki komponen 'Drawer' bawaan — Apple tidak merekomendasikan menu samping untuk iPhone (HIG, 2026). Namun, untuk iPad digunakan UISplitViewController dengan panel primary dan secondary. Untuk iPhone, menu samping diimplementasikan melalui pustaka pihak ketiga (SideMenu, SwiftUI-side-menu) atau solusi kustom dengan offset konten. Di SwiftUI, menu samping dibuat melalui ZStack dengan animasi offset.

import SwiftUI

struct DrawerView<Content: View, Menu: View>: View {
    let menuWidth: CGFloat = 280

    @Binding var isOpen: Bool
    @ViewBuilder let content: Content
    @ViewBuilder let menu: Menu

    var body: some View {
        ZStack(alignment: .leading) {
            content
                .offset(x: isOpen ? menuWidth : 0)
                .animation(.easeInOut, value: isOpen)

            if isOpen {
                menu
                    .frame(width: menuWidth)
                    .transition(.move(edge: .leading))

                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture { isOpen = false }
            }
        }
    }
}

// Penggunaan
struct ContentView: View {
    @State private var showDrawer = false

    var body: some View {
        DrawerView(isOpen: $showDrawer) {
            NavigationStack {
                HomeView()
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button(action: { showDrawer.toggle() }) {
                                Image(systemName: "line.horizontal.3")
                            }
                        }
                    }
            }
        } menu: {
            DrawerMenuView()
        }
    }
}

Untuk proyek produksi di iOS sering digunakan pustaka SideMenu (GitHub, 8k+ bintang). Pustaka ini menyediakan UIViewController siap pakai dengan dukungan gestur, buram latar belakang, lebar kustom, dan animasi. SideMenu mendukung menu kiri dan kanan, beberapa level, dan integrasi dengan UIKit melalui UINavigationController. Alternatif — UISplitViewController di iPad (sistem, tanpa animasi kustom).

Kustomisasi Drawer: judul, ikon, bagian

Drawer memungkinkan kustomisasi yang luas. Di Android, NavigationView mendukung headerLayout — layout kustom yang ditempatkan di atas item menu. Di dalamnya ditempatkan avatar, nama pengguna, email, dan sampul. Item menu dikelompokkan melalui <menu> dengan subjudul, pemisah, dan bendera. Di iOS, kustomisasi SideMenu mencakup pengaturan warna latar, buram, lebar, dan sudut membulat.

// Header kustom untuk NavigationView
val headerView = binding.navView.inflateHeaderView(R.layout.nav_header)
headerView.findViewById<ImageView>(R.id.iv_avatar)
    .setImageResource(R.drawable.avatar)
headerView.findViewById<TextView>(R.id.tv_name)
    .text = "John Doe"

// Konfigurasi item menu
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Menambahkan badge
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design merekomendasikan struktur Drawer berikut: judul (nama, avatar), item navigasi utama (5–8), pemisah, item sekunder (Pengaturan, Bantuan), footer (Tentang aplikasi, versi). Di Material 3, NavigationView juga mendukung penyorotan kustom item aktif melalui itemShape dan itemBackground.

Kapan menggunakan Drawer: rekomendasi UX

Drawer efektif untuk aplikasi dengan 6+ bagian, pengaturan, dan halaman bantuan. Tidak cocok untuk aplikasi di mana akses cepat ke bagian sangat penting — dalam kasus seperti itu Bottom Navigation lebih baik. Material Design merekomendasikan menggabungkan Drawer dengan Bottom Navigation: navigasi utama — Bottom (3–5 tab), tambahan — Drawer (pengaturan, bantuan, tentang aplikasi).

Kesalahan utama dalam implementasi Drawer: menu terlalu padat (15+ item tanpa pengelompokan), menyembunyikan bagian penting di bawah lipatan, tidak adanya ikon (teks tanpa ikon dipindai 30% lebih lambat), animasi dengan penundaan (harus ≤ 200 ms). Praktik terbaik: judul dengan nama pengguna, ikon di setiap item, pemisah antar grup, penyorotan bagian aktif, dukungan gestur gesek untuk membuka.

• 6+ bagian — Drawer dibenarkan, lebih sedikit — gunakan Bottom Navigation
• Ikon — wajib untuk setiap item, mempercepat pencarian visual
• Pengelompokan — pemisah antara item utama dan sekunder
• Judul — avatar, nama, dan email untuk personalisasi (aplikasi sosial)
• Gestur gesek — wajib untuk membuka, digandakan dengan tombol 'hamburger'