Toolbar: esensi, bilah alat di aplikasi Android

Penulis: IT Sectr Diterbitkan: 2026-02-23 Waktu membaca: 12 mnt

Toolbar (bilah alat) — komponen Android yang menggantikan ActionBar, menampilkan judul layar, elemen navigasi, dan tindakan. Toolbar termasuk dalam Material Design Library dan sepenuhnya dapat disesuaikan: dari judul standar hingga tampilan kustom dan ikon animasi. Baca lebih lanjut tentang komponen ini di spesifikasi Material Design 3.

Poin Utama

  • Toolbar — bilah alat Android yang dapat disesuaikan, penerus ActionBar dari Material Design
  • ActionBar — bilah sistem yang ada sebelum Android 5.0, digantikan oleh Toolbar
  • Material 3 — Top App Bar dengan tiga variasi: Center, Small, Medium, Large
  • Menu — Menu XML dengan action items, diintegrasikan ke Toolbar melalui onCreateOptionsMenu
  • Kustomisasi — judul, logo, ikon navigasi, tampilan kustom dan animasi

Apa itu Toolbar?

Toolbar — komponen Android dari pustaka Material Design (androidx.appcompat.widget.Toolbar), yang menyediakan bilah alat fleksibel untuk layar aplikasi. Toolbar menggantikan ActionBar yang sudah usang, memberikan pengembang kendali penuh atas tampilan dan perilaku. Dapat ditempatkan di mana saja dalam layout, memiliki tampilan turunan kustom, dapat dianimasikan dan disesuaikan dengan berbagai ukuran layar.

Material Design 3 (2026) mendefinisikan Top App Bar — evolusi Toolbar — dengan empat varian: Small (kompak, 48 dp), Center-aligned (judul di tengah), Medium (judul diperbesar, 112 dp) dan Large (judul besar, 168 dp). Setiap varian memiliki perilaku sendiri saat digulir: Small tetap tetap, Medium dan Large mengecil ke Small saat konten digulir ke atas.

Toolbar menampilkan tiga zona utama: ikon navigasi (kiri, biasanya "hamburger" atau panah "Kembali"), judul layar (tengah atau kiri) dan action items (kanan — ikon tindakan, menu overflow). Toolbar dapat berisi logo, subtitle, View kustom (search view, switch) dan CollapsingToolbarLayout animasi dalam kombinasi dengan CoordinatorLayout.

ActionBar: sejarah dan evolusi

ActionBar — bilah sistem Android yang muncul di Android 3.0 (API 11) sebagai pengganti Title Bar yang sudah usang. ActionBar terikat erat dengan Activity, memiliki posisi tetap di bagian atas layar dan kemampuan kustomisasi terbatas. Dengan rilis Android 5.0 (Lollipop, 2014) dan pustaka AppCompat, Google memperkenalkan Toolbar sebagai pengganti yang fleksibel.

Kekurangan utama ActionBar yang diselesaikan oleh Toolbar: posisi tetap (hanya di atas), ketidakmungkinan animasi, masalah dengan tampilan kustom, masalah dengan CoordinatorLayout dan CollapsingToolbarLayout. Google secara resmi menyatakan ActionBar tidak digunakan lagi (deprecated) pada tahun 2015 dan merekomendasikan Toolbar untuk semua proyek baru. Mulai Android 12 (2021), ActionBar dinonaktifkan secara default di tema Material 3 baru.

FiturActionBarToolbar
PosisiAtas tetapDi mana saja di layout
KustomisasiTerbatas (warna, latar)Penuh (tampilan, gaya, animasi)
CollapsingTidak didukungCollapsingToolbarLayout
AnimasiHanya sistemApa saja (ObjectAnimator, Transition)
Material 3Tidak didukungSmall / Medium / Large App Bar

Pengaturan Toolbar di Android

Untuk menggunakan Toolbar perlu: (1) mengatur tema tanpa ActionBar (Theme.Material3.NoActionBar atau Theme.AppCompat.NoActionBar), (2) menambahkan Toolbar di XML layout, (3) mengaturnya sebagai ActionBar melalui setSupportActionBar. Setelah itu Toolbar menerima semua fungsi ActionBar: pemrosesan Menu, ikon navigasi, judul dari AndroidManifest.

xml
<!-- activity_main.xml dengan Toolbar -->
<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">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:titleTextColor="@android:color/white"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
kotlin
class MainActivity : AppCompatActivity() {

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

        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        setSupportActionBar(toolbar)

        // Konfigurasi ikon navigasi
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Judul kustom
        supportActionBar?.title = "Beranda"
        supportActionBar?.subtitle = "Halo, pengguna!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Integrasi Menu ke Toolbar

Toolbar terintegrasi dengan sistem Android Menu melalui callback onCreateOptionsMenu dan onOptionsItemSelected. Mendefinisikan action items — ikon tindakan yang ditampilkan di kanan Toolbar. Jika action items tidak muat, mereka secara otomatis dipindahkan ke menu overflow (tiga titik). Pengembang mengontrol ini melalui atribut app:showAsAction: always, ifRoom, never.

xml
<!-- res/menu/toolbar_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Cari"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notifikasi"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Pengaturan"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Cari", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center dan Large Top App Bar

Material 3 memperkenalkan empat varian Top App Bar: Small (kompak, 48 dp), Center-aligned (judul di tengah), Medium (112 dp dengan judul diperbesar) dan Large (168 dp dengan judul besar). Medium dan Large App Bar mendukung perilaku collapsible — saat konten digulir ke atas, mereka menyusut mulus ke Small. Animasi dikelola oleh CoordinatorLayout dan AppBarLayout.

Center-aligned Top App Bar — varian baru Material 3, di mana judul ditempatkan di tengah panel. Gaya ini sering digunakan di aplikasi Google (Play Market, YouTube) dan direkomendasikan untuk layar dengan jumlah action items minimal. Small Top App Bar — Toolbar klasik, kompatibel dengan versi Android lama. Medium dan Large cocok untuk layar di mana judul adalah elemen kunci (profil, halaman utama).

xml
<!-- Material 3 Large Top App Bar dengan CollapsingToolbarLayout -->
<CoordinatorLayout
    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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Konten layar..." />
    </NestedScrollView>
</CoordinatorLayout>

Kustomisasi Lanjutan Toolbar

Toolbar mendukung kustomisasi penuh: perubahan tinggi, animasi muncul/sembunyi, View turunan kustom, logo, ikon navigasi, PopupMenu dan integrasi dengan CoordinatorLayout. Untuk animasi sembunyi saat digulir, AppBarLayout digunakan dengan bendera scroll, enterAlways, snap. Untuk efek paralaks gambar di bawah Toolbar — CollapsingToolbarLayout dengan mode parallax.

Logo dan subtitle diatur melalui metode setLogo dan setSubtitle. Ikon navigasi dikonfigurasi melalui setNavigationIcon dan setNavigationOnClickListener. View kustom ditambahkan melalui addView langsung ke Toolbar. Untuk SearchView, MenuItem dengan actionViewClass digunakan. Untuk tema gelap, warna secara otomatis diterapkan dari atribut Material 3.

kotlin
// Kustomisasi lanjutan Toolbar
with (toolbar) {
    // Logo dan judul
    setLogo(R.drawable.ic_logo)
    setTitle("Aplikasi saya")
    setSubtitle("Versi 2.0")

    // Ikon navigasi dengan handler
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Tampilan kustom — Switch untuk tema
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // PopupMenu kustom
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Pertanyaan yang Sering Diajukan

Apa perbedaan antara Toolbar dan ActionBar?

ActionBar — bilah sistem Android 3.0–4.4 dengan kustomisasi terbatas. Toolbar — komponen Material Design fleksibel yang dapat ditempatkan di mana saja di layout, dianimasikan dan diisi dengan tampilan kustom. Toolbar sepenuhnya menggantikan ActionBar melalui setSupportActionBar.

Bagaimana cara menyembunyikan Toolbar saat digulir?

Gunakan CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Atur bendera scroll untuk Toolbar di layout_scrollBehavior. Saat digulir ke bawah Toolbar disembunyikan, saat digulir ke atas muncul dengan animasi. Di Material 3, Medium/Large Top App Bar menyusut ke Small.

Berapa banyak action items yang bisa ditempatkan di Toolbar?

Batasan adalah lebar fisik layar. Disarankan 2–4 action items (ikon). Sisanya dipindahkan ke menu overflow (tiga titik). Konfigurasi melalui app:showAsAction: always (selalu tampilkan), ifRoom (jika ada ruang), never (di overflow).

Bagaimana cara menambahkan SearchView ke Toolbar?

SearchView ditambahkan sebagai action view di Menu. Di XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView secara otomatis mengecil ke ikon pencarian dan meluas saat diklik. Mendukung pencarian suara dan pelengkapan otomatis melalui SearchRecentSuggestionsProvider.

Apa itu CollapsingToolbarLayout?

CollapsingToolbarLayout — wadah untuk Toolbar yang mengecil secara animasi saat konten digulir. Digunakan dengan CoordinatorLayout dan AppBarLayout. Mendukung mode: pin (tetap), parallax (efek paralaks). Ideal untuk layar dengan gambar di header (profil, halaman detail).

Kesimpulan

  • Toolbar — bilah alat Android fleksibel yang menggantikan ActionBar dan sepenuhnya terintegrasi dengan Material Design
  • Material 3 Top App Bar — empat varian: Small, Center-aligned, Medium, Large dengan perilaku berbeda saat digulir
  • ActionBar — bilah sistem usang, terbatas dalam kustomisasi dan animasi
  • Menu dan action items — integrasi melalui menu XML dengan bendera always/ifRoom/never untuk mengelola visibilitas
  • CollapsingToolbarLayout — pengecilan animasi Toolbar saat digulir untuk layar dengan gambar di header
  • Kustomisasi — logo, subtitle, View kustom, SearchView, PopupMenu dan warna Material 3
  • SearchView — action view bawaan untuk pencarian dengan input suara dan pelengkapan otomatis

Kami akan mengembangkan aplikasi seluler turnkey

IT Sectr membuat aplikasi iOS dan Android untuk startup dan bisnis sejak 2017. Kami akan memberi saran dan mengusulkan solusi terbaik.

Diskusikan proyek

Baca juga