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 — 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 — 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.
| Fitur | ActionBar | Toolbar |
|---|---|---|
| Posisi | Atas tetap | Di mana saja di layout |
| Kustomisasi | Terbatas (warna, latar) | Penuh (tampilan, gaya, animasi) |
| Collapsing | Tidak didukung | CollapsingToolbarLayout |
| Animasi | Hanya sistem | Apa saja (ObjectAnimator, Transition) |
| Material 3 | Tidak didukung | Small / Medium / Large App Bar |
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.
<!-- 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>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
}
}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.
<!-- 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>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 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).
<!-- 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>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.
// 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
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.
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.
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).
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.
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
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.
Baca juga