Android Academy · Pelajaran

Navigasi Bawah & Tab

Implementasikan navigasi multi-bagian dengan BottomNavigationView yang terhubung ke NavController, serta tab yang dapat digeser dengan TabLayout, ViewPager2, dan TabLayoutMediator.

Navigasi Bawah & Tab adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 5 dari 5. 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 Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 5 pelajaran total.

Pola Navigasi

Dua pola umum untuk navigasi tingkat atas pada aplikasi Android:

Navigasi Bawah — untuk 3–5 tujuan utama. Selalu terlihat. Cocok untuk bagian yang memiliki tingkat kepentingan sama (misalnya Beranda, Penelusuran, Profil).
Tab — untuk konten terkait dalam satu layar (misalnya Semua / Aktif / Selesai). Sering digunakan dengan ViewPager2 untuk mendukung geser.

Tata Letak BottomNavigationView

Tambahkan BottomNavigationView dan FragmentContainerView ke tata letak Activity Anda:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/navHostFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:navGraph="@navigation/nav_graph"
        app:defaultNavHost="true" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu" />

</LinearLayout>

Item Menu Navigasi Bawah

Tentukan item dalam res/menu/bottom_nav_menu.xml. ID setiap item harus cocok dengan ID tujuan grafik navigasi:

<!-- res/menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/searchFragment"
        android:icon="@drawable/ic_search"
        android:title="Search" />
    <item
        android:id="@+id/profileFragment"
        android:icon="@drawable/ic_person"
        android:title="Profile" />
</menu>

Menghubungkan ke NavController

Hubungkan BottomNavigationView ke NavController dalam onCreate():

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navHost = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        val navController = navHost.navController

        binding.bottomNav.setupWithNavController(navController)

        // Hide bottom nav on detail screens:
        navController.addOnDestinationChangedListener { _, destination, _ ->
            binding.bottomNav.visibility = when (destination.id) {
                R.id.detailFragment -> View.GONE
                else -> View.VISIBLE
            }
        }
    }
}

Lencana pada Navigasi Bawah

Tampilkan lencana notifikasi pada item navigasi bawah:

// Show a numbered badge:
val badge = binding.bottomNav.getOrCreateBadge(R.id.homeFragment)
badge.number = 5
badge.isVisible = true

// Show dot badge (no number):
val dotBadge = binding.bottomNav.getOrCreateBadge(R.id.searchFragment)
dotBadge.isVisible = true

// Remove badge:
binding.bottomNav.removeBadge(R.id.homeFragment)

TabLayout

TabLayout menampilkan tab horizontal, biasanya digunakan bersama ViewPager2 untuk konten yang dapat digeser:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

ViewPager2 + FragmentStateAdapter

Buat adapter yang menyediakan fragment untuk setiap posisi tab:

class TasksPagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {

    override fun getItemCount() = 3

    override fun createFragment(position: Int): Fragment = when (position) {
        0 -> AllTasksFragment()
        1 -> ActiveTasksFragment()
        2 -> CompletedTasksFragment()
        else -> throw IllegalStateException("Unknown tab $position")
    }
}

TabLayoutMediator

Hubungkan ViewPager2 dan TabLayout dengan TabLayoutMediator:

// In Fragment.onViewCreated():
val adapter = TasksPagerAdapter(this)
binding.viewPager.adapter = adapter

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    tab.text = when (position) {
        0 -> "All"
        1 -> "Active"
        2 -> "Done"
        else -> ""
    }
}.attach()

// Disable swipe if needed:
binding.viewPager.isUserInputEnabled = false

Tab dengan Ikon

Tambahkan ikon ke tab TabLayout:

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    when (position) {
        0 -> {
            tab.text = "Home"
            tab.setIcon(R.drawable.ic_home)
        }
        1 -> {
            tab.text = "Search"
            tab.setIcon(R.drawable.ic_search)
        }
        2 -> {
            tab.text = "Profile"
            tab.setIcon(R.drawable.ic_person)
        }
    }
}.attach()

Batas Halaman di Luar Layar

Secara default, ViewPager2 hanya menyimpan halaman yang bersebelahan di memori. Tingkatkan offscreenPageLimit jika tab Anda harus tetap aktif saat berpindah:

// Keep 2 pages on each side alive:
binding.viewPager.offscreenPageLimit = 2

// Note: FragmentStateAdapter saves and restores state for off-screen
// fragments even when offscreenPageLimit is 1 (default).
// Only increase this when you need views (not just state) to survive.

Navigasi Bawah vs Tab: Memilih

Panduan singkat untuk memilih pola yang tepat:

Gunakan Navigasi Bawah ketika: terdapat 3–5 tujuan tingkat atas dengan fungsi berbeda (Beranda, Penelusuran, Notifikasi, Profil)
Gunakan Tab ketika: Anda memfilter atau mengategorikan jenis konten yang sama (Semua / Aktif / Tugas yang Diarsipkan)
Gabungkan keduanya: gunakan Navigasi Bawah untuk bagian tingkat atas, dan Tab di dalam suatu bagian untuk pemfilteran lanjutan

Pemeriksaan Cepat

Kelas apa yang menghubungkan TabLayout ke ViewPager2 dan menetapkan label tab?

Ringkasan: Navigasi Bawah & Tab

Navigasi untuk banyak bagian yang dilakukan dengan tepat:

BottomNavigationView — 3–5 tujuan dengan tingkat kepentingan sama, ID menu cocok dengan ID tujuan grafik navigasi
setupWithNavController() — pergantian tab + tumpukan kembali otomatis
Lencana dengan getOrCreateBadge()
TabLayout + ViewPager2 — tampilan konten yang sama yang dapat digeser dan difilter
TabLayoutMediator — menghubungkan keduanya dan menetapkan label

Berikutnya: Pengujian Unit dengan JUnit untuk menjaga kode Anda tetap andal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Navigasi Bawah & Tab” gratis?

Ya — teks lengkap “Navigasi Bawah & Tab” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 5 pelajaran total.

Apa yang akan aku pelajari di “Navigasi Bawah & Tab”?

Implementasikan navigasi multi-bagian dengan BottomNavigationView yang terhubung ke NavController, serta tab yang dapat digeser dengan TabLayout, ViewPager2, dan TabLayoutMediator. Kamu berlatih Android 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 Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android 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 5 dari 5.

Berapa lama pelajaran “Navigasi Bawah & 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 Android Academy ini?

Ya. Setiap pelajaran Android 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 Android Academy