Jetpack Compose Academy · Pelajaran

NavigationBar dengan Banyak Tab

Beralih antarbagian tingkat teratas di bagian bawah.

NavigationBar dengan Banyak Tab adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Meet NavigationBar

Material 3 gives you NavigationBar, a bar pinned to the bottom that lets people jump between the top-level sections of your app. 📱

When to Use It

Reach for a NavigationBar when your app has three to five equally important destinations, like Home, Search, and Profile.

It Lives in the Scaffold

You usually drop the bar into a Scaffold bottomBar slot, so it stays fixed while the screen content scrolls above it.

Scaffold(
  bottomBar = { NavigationBar { /* items */ } }
) { padding -> Content(padding) }

Each Tab Is an Item

Inside the bar you add one NavigationBarItem per destination. Each item is a clickable tab with its own icon and label.

NavigationBar {
  NavigationBarItem(/* ... */)
  NavigationBarItem(/* ... */)
}

The selected Flag

Every item needs a selected boolean. Exactly one item should be true at a time so the bar shows where the user is.

NavigationBarItem(
  selected = current == "home",
  onClick = { go("home") }
)

Handle the Tap

The onClick lambda runs when the tab is pressed. This is where you tell your navigation to switch to that section.

Give It an Icon

The icon slot takes a Composable, usually an Icon from the Material set, so each tab is instantly recognizable.

icon = { Icon(Icons.Default.Home, contentDescription = "Home") }

Add a Label

The label slot shows short text under the icon. Keep it to one clear word so it fits and reads fast.

label = { Text("Home") }

A Model for Tabs

It helps to keep your tabs in a simple data class list, so the bar can loop over them instead of hard-coding each item.

data class Tab(val route: String, val icon: ImageVector, val label: String)

Loop to Build the Bar

With a tab list you can forEach over it and emit one NavigationBarItem per entry, keeping the bar tidy and easy to extend.

tabs.forEach { tab ->
  NavigationBarItem(/* uses tab fields */)
}

Pair It with Content

The bar only switches the active section. You still pair it with a NavHost or a when block that actually swaps the screen content.

Quick Check

You added three tabs to your NavigationBar. Quick check on the basics.

Recap

You met NavigationBar: drop it in the Scaffold, add a NavigationBarItem per section with an icon, label, selected flag, and onClick. Nice work! 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “NavigationBar dengan Banyak Tab” gratis?

Ya — teks lengkap “NavigationBar dengan Banyak Tab” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “NavigationBar dengan Banyak Tab”?

Beralih antarbagian tingkat teratas di bagian bawah. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “NavigationBar dengan Banyak Tab” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy