Skip to main content
Home  ›  Android  ›  Pemrograman

Bottom Navigation Android Tutorial: Membuat Menu Navigasi Bawah Modern di Android Studio

Diperbarui: 4 Desember 2025

Ringkasan cepat:

  • Bottom navigation adalah menu navigasi di bagian bawah layar yang berisi 3–5 item utama, mengikuti panduan Material Design, dan sangat umum di aplikasi modern seperti Instagram, YouTube, atau aplikasi dompet digital.
  • Untuk pemula, cara termudah membuat bottom navigation adalah memakai BottomNavigationView (Material Components) dengan kombinasi Fragment untuk tiap tab.
  • Alur kerja: pasang dependency Material, buat menu XML untuk item bottom nav, siapkan layout Activity utama berisi BottomNavigationView dan container Fragment, lalu tulis kode untuk ganti Fragment saat item dipilih.
  • Bottom navigation cocok untuk aplikasi yang punya 3–5 fitur utama: misalnya Beranda, Kategori, Transaksi, dan Profil.
  • Dari sisi syariat, menu navigasi hanyalah “struktur UI”; yang perlu diperhatikan adalah isi aplikasi tetap halal (tidak dipakai untuk judi, konten vulgar, penipuan, atau promosi riba).

Daftar isi

Kapan sebaiknya memakai bottom navigation di aplikasi Android?

Pertimbangkan memakai bottom navigation jika aplikasi kamu punya karakteristik berikut:

  • Memiliki 3–5 fitur utama yang sering diakses (misalnya Beranda, Pencarian, Favorit, Profil).
  • Pengguna akan sering berpindah antar fitur dengan cepat dan berulang.
  • Aplikasi berorientasi mobile-first, dengan mayoritas pengguna dari HP, bukan tablet/desktop.
  • Kamu ingin UI yang mengikuti standar modern sehingga pengguna merasa familiar.

Kalau fitur utama hanya 1–2, cukup gunakan toolbar dan menu biasa. Kalau fitur utama lebih dari 5, pertimbangkan kombinasi bottom navigation + drawer atau tab tambahan agar tidak terlalu penuh.

Apa itu bottom navigation dan bagaimana konsep kerjanya di Android?

Bottom navigation di Android biasanya dibuat dengan komponen BottomNavigationView dari Material Components. Komponen ini menampilkan bar di bagian bawah dengan ikon dan teks.

Konsep kerjanya:

  1. BottomNavigationView menampilkan item menu yang didefinisikan di file XML (misalnya menu_bottom_nav.xml).
  2. Setiap item menu punya id yang mewakili “halaman” atau fitur.
  3. Saat item dipilih, Activity akan merespons lewat listener dan:
    • Menampilkan Fragment berbeda (HomeFragment, ProfileFragment, dll.), atau
    • Melakukan aksi tertentu seperti membuka Activity lain (umumnya untuk kasus khusus).
  4. Dengan Fragment, bottom navigation bisa tetap di tempat, sementara konten di bagian atas berubah.

Syarat sebelum mengikuti tutorial bottom navigation Android

1. Perangkat & software

  • Laptop/PC dengan Android Studio yang sudah terinstal dan bisa menjalankan project sederhana.
  • HP Android atau emulator untuk testing.
  • Koneksi internet (untuk download dependency Material Components jika belum ada).

2. Ilmu pemrograman yang sebaiknya sudah dikuasai

  • Dasar Kotlin untuk Android (class, fungsi, variabel, when, if).
  • Dasar layout XML (LinearLayout, FrameLayout/ConstraintLayout).
  • Dasar penggunaan Fragment (cara menambah dan mengganti Fragment).

3. Syarat syariat & etika

  • Niatkan belajar untuk membangun aplikasi yang bermanfaat dan halal (edukasi, usaha, administrasi, dakwah, dll.).
  • Hindari menggunakan skill ini untuk aplikasi maksiat: judi, pornografi, penipuan, atau promosi transaksi haram.
  • Jika aplikasi memuat iklan atau tautan luar, seleksi agar tidak menampilkan konten yang jelas melanggar syariat.

Langkah-langkah membuat bottom navigation di Android Studio (XML + Fragment)

Pada tutorial ini, kita akan membuat aplikasi dengan 3 tab di bottom navigation: Home, Transaksi, dan Profil. Setiap tab diwakili oleh satu Fragment.

Langkah 1 – Buat project baru

  1. Buka Android Studio > New Project > pilih Empty Activity.
  2. Nama aplikasi: misalnya BottomNavDemo.
  3. Bahasa: Kotlin. Minimum SDK: Android 5.0/6.0 sesuai kebutuhan.
  4. Klik Finish dan tunggu Gradle selesai.

Langkah 2 – Tambahkan dependency Material Components

Di file build.gradle (Module: app), pastikan sudah ada Material Components:

dependencies {
    implementation("com.google.android.material:material:1.12.0")
    // dependency lain...
}

Sinkronkan project (Sync Now).

Langkah 3 – Buat menu bottom navigation (menu_bottom_nav.xml)

  1. Buat folder menu (kalau belum ada): res > New > Android Resource Directory, pilih menu.
  2. Di dalamnya buat file baru menu_bottom_nav.xml.
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/nav_transaksi"
        android:icon="@drawable/ic_receipt"
        android:title="Transaksi" />

    <item
        android:id="@+id/nav_profil"
        android:icon="@drawable/ic_person"
        android:title="Profil" />

</menu>

Gunakan ikon bawaan atau vector asset (New > Vector Asset) untuk ic_home, ic_receipt, dan ic_person.

Langkah 4 – Desain layout Activity utama

Kita pakai FrameLayout sebagai container Fragment dan BottomNavigationView di bawahnya. Edit activity_main.xml seperti berikut: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/menu_bottom_nav"
        app:itemIconTint="@color/selector_bottom_nav"
        app:itemTextColor="@color/selector_bottom_nav" />

</LinearLayout>

Kamu bisa memakai selector warna untuk kondisi aktif/nonaktif di @color/selector_bottom_nav, atau biarkan default dulu kalau masih pemula.

Langkah 5 – Siapkan Fragment untuk setiap tab

Buat tiga Fragment baru: HomeFragment, TransaksiFragment, dan ProfilFragment.

class HomeFragment : Fragment(R.layout.fragment_home)
class TransaksiFragment : Fragment(R.layout.fragment_transaksi)
class ProfilFragment : Fragment(R.layout.fragment_profil)

Buat layout sederhana untuk masing-masing, misalnya fragment_home.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Halaman Home"
        android:textSize="20sp" />

</FrameLayout>

Lakukan hal serupa untuk fragment_transaksi.xml dan fragment_profil.xml dengan teks berbeda.

Langkah 6 – Logika pergantian Fragment di MainActivity

Edit MainActivity.kt untuk menangani klik bottom navigation:

class MainActivity : AppCompatActivity() {

    private lateinit var bottomNav: BottomNavigationView

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

        bottomNav = findViewById(R.id.bottom_navigation)

        // Tampilkan fragment awal
        if (savedInstanceState == null) {
            openFragment(HomeFragment())
        }

        bottomNav.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.nav_home -> {
                    openFragment(HomeFragment())
                    true
                }
                R.id.nav_transaksi -> {
                    openFragment(TransaksiFragment())
                    true
                }
                R.id.nav_profil -> {
                    openFragment(ProfilFragment())
                    true
                }
                else -> false
            }
        }
    }

    private fun openFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commit()
    }
}

Dengan ini, setiap item bottom navigation akan mengganti Fragment yang tampil.

Langkah 7 – Menangani tombol back

Untuk aplikasi sederhana, tombol back cukup dibiarkan default: jika di MainActivity, back akan menutup aplikasi. Kalau kamu ingin tombol back memindahkan tab ke “Home” dulu sebelum keluar, bisa dibuat logika tambahan, tapi itu langkah lanjutan.

Langkah 8 – Jalankan dan uji di perangkat

  1. Run aplikasi di HP/emulator.
  2. Perhatikan apakah bottom navigation muncul di bawah dan item bisa diklik.
  3. Pastikan setiap tab menampilkan Fragment yang sesuai.
  4. Sesuaikan teks, ikon, dan warna agar sesuai brand aplikasi.

Tips desain dan performa bottom navigation agar nyaman dipakai

  1. Batasi 3–5 item saja: terlalu banyak tab membuat ikon mengecil dan membingungkan pengguna.
  2. Gunakan ikon yang jelas dan familiar: rumah untuk Home, manusia untuk Profil, keranjang/nota untuk transaksi, dll.
  3. Konsisten: jangan mengganti posisi item (misal, Profil di kanan hari ini, besok di kiri) karena akan membingungkan.
  4. Pastikan setiap tab “bermakna”: jangan membuat tab kosong yang hanya berisi teks tanpa fungsi.
  5. Gabungkan dengan data nyata: di tab Transaksi, misalnya kamu bisa menampilkan data dari database lokal atau dari server MySQL (lihat artikel Beginisob tentang menghubungkan Android–MySQL).
  6. Pertimbangkan analitik: kalau aplikasi sudah serius, pasang Google Analytics 4/analitik lain untuk melihat tab mana yang paling sering diklik, lalu perbaiki navigasi jika perlu.
  7. Dari sisi syariat: gunakan desain untuk memudahkan orang menuju kebaikan (edukasi, usaha halal), bukan memudahkan akses cepat ke kemaksiatan.

Risiko dan kesalahan umum saat membuat bottom navigation

  • Memaksa terlalu banyak fitur di bawah: 6–7 item membuat tampilan sempit dan melanggar panduan Material Design.
  • Tidak memisahkan state tiap Fragment: setiap pindah tab, data selalu reload dan pengguna kehilangan posisi scroll.
  • Logika Fragment berantakan: misalnya menumpuk Fragment terus tanpa replace(), sehingga back stack kacau.
  • Desain ikon dan teks yang tidak jelas: pengguna tidak paham tab mana untuk fungsi apa.
  • Membuat aplikasi untuk tujuan maksiat: secara teknis berhasil, tapi secara agama dan etika akan sangat merugikan di akhirat.

FAQ seputar bottom navigation Android

1. Apakah bottom navigation wajib memakai Fragment?

Tidak wajib, tapi sangat dianjurkan. Secara praktik, Fragment memudahkan mengelola banyak “halaman” dalam satu Activity. Mengganti Activity untuk setiap tab biasanya terasa lebih berat dan membuat animasi transisi berbeda-beda.

2. Berapa jumlah maksimal item di bottom navigation?

Umumnya 3–5 item. Di atas 5, tampilan akan membesar-besarkan teks atau menyempitkan ikon, dan secara UX tidak disarankan lagi memakai bottom navigation murni.

3. Apa bedanya bottom navigation dengan tab bar (TabLayout)?

Bottom navigation digunakan untuk navigasi level atas (fitur utama). Tab biasanya dipakai untuk mengelompokkan konten di dalam satu fitur (misalnya kategori artikel). Tidak ada larangan menggabungkan keduanya asalkan tidak membingungkan pengguna.

4. Apakah bottom navigation bisa dibuat dengan Jetpack Compose?

Bisa. Di Compose, kamu dapat memakai NavigationBar/BottomNavigation dan NavHost. Namun untuk pemula yang masih memakai XML dan Fragment, tutorial ini sudah cukup sebagai dasar sebelum pindah ke Compose.

5. Apakah aplikasi dengan bottom navigation lebih disukai pengguna?

Jika diimplementasikan dengan benar, bottom navigation membuat fitur utama lebih mudah dijangkau jempol pengguna, terutama di HP layar lebar. Namun yang paling penting tetap isi aplikasi: bermanfaat, cepat, dan tidak membingungkan.

Baca juga di Beginisob.com

Comments

Post a Comment

Edukasi Terpopuler

Connect With Us

Copyright @ 2023 beginisob.com, All right reserved