TopAppBar: apa itu, konfigurasi dan penggunaan di Jetpack Compose

Apa itu TopAppBar di Jetpack Compose?

TopAppBar adalah fungsi composable dari pustaka Material Design untuk Jetpack Compose yang mengimplementasikan panel atas aplikasi (App Bar). Komponen ini menampilkan judul layar saat ini, tombol navigasi di kiri, dan tindakan tambahan di kanan.

Tidak seperti sistem View klasik, versi Compose dari TopAppBar sepenuhnya deklaratif: panel digambar ulang saat status berubah, tidak dikelola melalui findViewById. TopAppBar menggunakan konsep slot API, di mana title, navigationIcon, dan actions diteruskan sebagai lambda composable. Ini memungkinkan penyesuaian elemen panel apa pun tanpa pewarisan.

Menurut Google Material Design (2025), TopAppBar di Compose tersedia dalam tiga jenis: CenterAlignedTopAppBar (judul terpusat), SmallTopAppBar (standar), dan MediumTopAppBar (diperluas). Setiap jenis menentukan tinggi panel, ukuran font judul, dan perilaku saat menggulir. Varian terpusat lebih sering digunakan di layar utama, sedangkan MediumTopAppBar untuk halaman dengan konten di mana judul mengecil secara bertahap saat menggulir.

Untuk pengoperasian TopAppBar yang benar, margin sistem harus dipertimbangkan: Insets dari WindowInsetsCompat. Menurut rekomendasi Android Developers (2025), pemanggilan Modifier.statusBarsPadding() atau windowInsetsPadding(WindowInsets.systemBars) mencegah panel menimpa bilah status.

Parameter TopAppBar: konfigurasi judul dan pengubah

Komponen TopAppBar menerima sejumlah parameter wajib dan opsional. Yang utama adalah title, yang menerima blok composable dengan teks judul. Karena title adalah lambda @Composable, tidak hanya teks tetapi juga ikon dengan teks, bilah pencarian, atau bilah kemajuan dapat disisipkan.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar() {
    TopAppBar(
        title = { Text("Utama") },
        navigationIcon = {
            IconButton(onClick = { /* open drawer */ }) {
                Icon(
                    Icons.Filled.Menu,
                    contentDescription = "Menu"
                )
            }
        },
        actions = {
            IconButton(onClick = { /* search */ }) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
        }
    )
}

Parameter Modifier memungkinkan pengaturan margin, ukuran, dan perataan seluruh panel. Melalui Modifier.heightIn, tinggi minimum dan maksimum dapat dibatasi. Parameter colors menerima objek TopAppBarColors untuk mengganti warna latar belakang, judul, dan ikon.

Secara default, TopAppBar menggunakan skema warna dari MaterialTheme saat ini. Jika palet khusus diperlukan, gunakan TopAppBarDefaults.smallTopAppBarColors(). Di Material3, warna latar belakang secara otomatis menyesuaikan dengan surfaceColor dalam tema terang dan gelap, menghilangkan kebutuhan konfigurasi manual.

Tombol navigasi di TopAppBar

NavigationIcon adalah blok composable di bagian kiri TopAppBar yang mengimplementasikan navigasi. Skenario umum: membuka Navigation Drawer (ikon Menu), kembali ke layar sebelumnya (ikon ArrowBack), atau menutup layar saat ini (ikon Close).

Pemilihan ikon tergantung pada posisi layar di tumpukan navigasi. Jika layar adalah root — ikon Menu ditampilkan untuk membuka Drawer. Jika layar bersarang — ikon ArrowBack untuk kembali. Di Compose, logika ini diimplementasikan melalui NavController: entri tumpukan back stack saat ini menentukan ikon mana yang akan ditampilkan.

Menurut rekomendasi Material Design (2025), lebar area navigasi adalah 48 dp — target standar untuk interaksi sentuh. Ikon harus dapat diklik dengan umpan balik visual (ripple). Di Compose, ini dijamin dengan pembungkusan dalam IconButton dengan callback onClick yang memulai navigasi.

Saat menggunakan Scaffold, tombol navigasi dapat menduplikasi DrawerState yang diteruskan ke Scaffold, bukan langsung ke TopAppBar. Dalam hal ini, navigationIcon merujuk ke status Drawer melalui rememberDrawerState.

Menambahkan aksi dan menu drop-down

Parameter actions di TopAppBar menerima blok composable dengan konteks RowScope, memungkinkan penempatan beberapa ikon atau tombol di kanan judul. Setiap aksi harus berupa elemen ikonografis yang dapat diklik: pencarian, notifikasi, pengaturan, favorit.

Untuk aksi yang berlebih, menu drop-down digunakan melalui DropdownMenu. Jika jumlah aksi melebihi tiga, aksi tambahan ditempatkan di OverflowMenu dengan ikon MoreVert. Saat ditekan, daftar aksi tersembunyi terbuka. DropdownMenu secara otomatis diposisikan relatif terhadap ikon.

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profil") },
        actions = {
            IconButton(onClick = { /* share */ }) {
                Icon(Icons.Filled.Share, contentDescription = "Share")
            }
            Box {
                IconButton(onClick = { menuExpanded = true }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "More")
                }
                DropdownMenu(
                    expanded = menuExpanded,
                    onDismissRequest = { menuExpanded = false }
                ) {
                    DropdownMenuItem(text = { Text("Pengaturan") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("Tentang") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

Penting untuk mengatur contentDescription untuk setiap ikon — ini adalah persyaratan aksesibilitas. Tanpa deskripsi, TalkBack tidak akan mengumumkan tombol. Untuk elemen dekoratif murni, gunakan contentDescription = null.

TopAppBar di Material3: Dynamic Color dan adaptasi

Material3 (M3) adalah versi terbaru Material Design, yang direkomendasikan Google untuk proyek baru. TopAppBar di M3 diimplementasikan melalui TopAppBar, CenterAlignedTopAppBar, dan MediumTopAppBar. Perbedaan utama dari Material2 — dukungan bawaan untuk dynamic color, tinggi adaptif, dan scroll behavior.

Dynamic Color secara otomatis memilih warna panel berdasarkan wallpaper perangkat (Android 12+). TopAppBar di M3 menggunakan surfaceColor untuk latar belakang dan primary untuk judul. Jika dynamic color tidak tersedia, palet fallback dari MaterialTheme diterapkan. Menurut Google Material Design (2025), 63% pengguna Android 12+ menggunakan dynamic color di aplikasi.

MediumTopAppBar adalah varian yang diperluas dengan judul besar (32 sp), yang saat digulir secara bertahap mengecil menjadi 20 sp dan berubah menjadi SmallTopAppBar. Efek ini diwujudkan melalui TopAppBarDefaults.mediumTopAppBarColors() dan parameter scrollBehavior. Animasi transisi dikendalikan oleh TopAppBarState yang melacak penciutan judul.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MediumTopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = { Text("Perpustakaan") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(contentPadding = padding) { /* content */ }
    }
}

Untuk Material3 TopAppBar, harus menggunakan @OptIn(ExperimentalMaterial3Api::class) — anotasi menunjukkan bahwa API dapat berubah di versi mendatang. Pada tahun 2025, TopAppBar di M3 tetap experimental, tetapi Google merekomendasikannya untuk produksi dengan verifikasi yang sesuai.

ScrollBehavior: menyembunyikan panel saat menggulir

ScrollBehavior adalah mekanisme yang mengelola visibilitas TopAppBar saat menggulir konten secara vertikal. Di Jetpack Compose, scrollBehavior memungkinkan menyembunyikan atau mengecilkan panel untuk membebaskan ruang, yang sangat berguna di layar dengan daftar konten besar.

Material3 menawarkan tiga strategi: enterAlways (panel muncul saat menggulir ke atas dan bersembunyi saat menggulir ke bawah), exitUntilCollapsed (panel bersembunyi hanya setelah judul menciut sepenuhnya), dan khusus melalui implementasi antarmuka TopAppBarScrollBehavior. Varian pertama cocok untuk umpan konten, yang kedua — untuk layar dengan MediumTopAppBar.

ScrollBehavior memerlukan koordinasi dengan LazyColumn atau LazyRow melalui rememberLazyListState(). Status gulir diteruskan ke TopAppBar melalui parameter scrollBehavior. Komponen secara otomatis berlangganan ke peristiwa gulir dan menganimasikan visibilitas panel. Menurut Android Developers (2025), enterAlwaysScrollBehavior adalah strategi paling populer, digunakan di 75% aplikasi dengan TopAppBar yang dapat digulir.

Konfigurasi ScrollBehavior khusus

Untuk membuat perilaku khusus, warisi dari TopAppBarScrollBehavior dan timpa metode onScroll dan onDrag. Perilaku khusus berguna ketika skenario standar tidak mencakup persyaratan desain — misalnya, panel harus bersembunyi hanya setelah melewati ambang gulir tertentu.

Secara default, scrollBehavior tidak menambahkan margin untuk konten — paddingTop harus diatur secara manual melalui contentPadding di Scaffold atau melalui Modifier.padding di LazyColumn. Di MediumTopAppBar, margin dihitung secara otomatis melalui TopAppBarState.collapsedFraction.

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    topBar = {
        MediumTopAppBar(
            title = { Text("Konten") },
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    LazyColumn(contentPadding = padding) { /* items */ }
}

ScrollBehavior hanya tersedia di Material3. Di Material2, TopAppBar tidak memiliki dukungan bawaan untuk disembunyikan saat menggulir — untuk perilaku serupa, diperlukan implementasi manual melalui NestedScrollConnection.