Toolbar (toolbar) — komponent ng Android na pumalit sa ActionBar, nagpapakita ng pamagat ng screen, mga elemento ng nabigasyon at mga aksyon. Ang Toolbar ay bahagi ng Material Design Library at ganap na nako-customize: mula sa karaniwang pamagat hanggang sa mga custom na view at animated na icon. Magbasa pa tungkol sa komponent sa detalye ng Material Design 3.
Mga Pangunahing Punto
Toolbar — komponent ng Android mula sa Material Design library (androidx.appcompat.widget.Toolbar), na nagbibigay ng flexible na toolbar para sa screen ng application. Pinalitan ng Toolbar ang lumang ActionBar, na nagbibigay sa mga developer ng buong kontrol sa hitsura at pag-uugali. Maaaring ilagay kahit saan sa layout, magkaroon ng custom na child view, ma-animate at umangkop sa iba't ibang laki ng screen.
Ang Material Design 3 (2026) ay tumutukoy sa Top App Bar — ebolusyon ng Toolbar — na may apat na baryante: Small (compact, 48 dp), Center-aligned (naka-center na pamagat), Medium (pinalaking pamagat, 112 dp) at Large (malaking pamagat, 168 dp). Ang bawat baryante ay may sariling pag-uugali kapag nag-s scroll: Small ay nananatiling fixed, Medium at Large ay lumiliit patungong Small kapag nag-scroll pataas ang content.
Ang Toolbar ay nagpapakita ng tatlong pangunahing zone: navigation icon (kaliwa, karaniwang "hamburger" o "Bumalik" na arrow), pamagat ng screen (gitna o kaliwa) at action items (kanan — mga action icon, overflow menu). Ang Toolbar ay maaaring maglaman ng logo, subtitle, custom na View (search view, switch) at animated na CollapsingToolbarLayout kasama ng CoordinatorLayout.
ActionBar — system bar ng Android na lumitaw sa Android 3.0 (API 11) bilang kapalit ng lumang Title Bar. Ang ActionBar ay mahigpit na nakatali sa Activity, may fixed na posisyon sa itaas ng screen at limitadong kakayahan sa pag-customize. Sa paglabas ng Android 5.0 (Lollipop, 2014) at AppCompat library, ipinakilala ng Google ang Toolbar bilang flexible na kapalit.
Mga pangunahing kahinaan ng ActionBar na nilutas ng Toolbar: fixed na posisyon (itaas lang), hindi posibilidad ng animation, problema sa custom na view, problema sa CoordinatorLayout at CollapsingToolbarLayout. Opisyal na idineklara ng Google na deprecated ang ActionBar noong 2015 at inirerekomenda ang Toolbar para sa lahat ng bagong proyekto. Simula sa Android 12 (2021), ang ActionBar ay naka-default na naka-disable sa mga bagong tema ng Material 3.
| Tampok | ActionBar | Toolbar |
|---|---|---|
| Posisyon | Fixed na itaas | Kahit saan sa layout |
| Pag-customize | Limitado (kulay, background) | Buong (view, estilo, animation) |
| Collapsing | Hindi sinusuportahan | CollapsingToolbarLayout |
| Animation | Sistem lang | Kahit ano (ObjectAnimator, Transition) |
| Material 3 | Hindi sinusuportahan | Small / Medium / Large App Bar |
Para gamitin ang Toolbar kailangan: (1) mag-set ng tema na walang ActionBar (Theme.Material3.NoActionBar o Theme.AppCompat.NoActionBar), (2) magdagdag ng Toolbar sa XML layout, (3) i-set ito bilang ActionBar sa pamamagitan ng setSupportActionBar. Pagkatapos nito, ang Toolbar ay makakatanggap ng lahat ng function ng ActionBar: pagproseso ng Menu, navigation icon, pamagat mula sa AndroidManifest.
<!-- activity_main.xml na may 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)
// Pag-configure ng navigation icon
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
// Custom na pamagat
supportActionBar?.title = "Tahanan"
supportActionBar?.subtitle = "Kumusta, gumagamit!"
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return true
}
}Toolbar ay isinasama sa Android Menu system sa pamamagitan ng mga callback na onCreateOptionsMenu at onOptionsItemSelected. Ang Menu ay tumutukoy sa action items — mga action icon na ipinapakita sa kanan sa Toolbar. Kung hindi kasya ang action items, awtomatikong inililipat ang mga ito sa overflow menu (tatlong tuldok). Kinokontrol ito ng developer sa pamamagitan ng attribute na 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="Maghanap"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_notifications"
android:title="Mga Notipikasyon"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Mga Setting"
app:showAsAction="never" />
</menu>override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.action_search -> {
Toast.makeText(this, "Maghanap", Toast.LENGTH_SHORT).show()
true
}
R.id.action_notifications -> {
openNotifications()
true
}
R.id.action_settings -> {
openSettings()
true
}
else -> super.onOptionsItemSelected(item)
}
}Material 3 ay nagpapakilala ng apat na baryante ng Top App Bar: Small (compact, 48 dp), Center-aligned (naka-center na pamagat), Medium (112 dp na may pinalaking pamagat) at Large (168 dp na may malaking pamagat). Ang Medium at Large App Bar ay sumusuporta sa collapsible na pag-uugali — kapag nag-scroll pataas ang content, sila ay maayos na lumiliit patungong Small. Ang animation ay pinamamahalaan ng CoordinatorLayout at AppBarLayout.
Center-aligned Top App Bar — bagong baryante ng Material 3, kung saan ang pamagat ay inilalagay sa gitna ng panel. Ang estilo na ito ay madalas na ginagamit sa mga application ng Google (Play Market, YouTube) at inirerekomenda para sa mga screen na may minimal na bilang ng action items. Small Top App Bar — klasikong Toolbar, compatible sa mas lumang bersyon ng Android. Ang Medium at Large ay angkop para sa mga screen kung saan ang pamagat ay pangunahing elemento (profile, pangunahing pahina).
<!-- Material 3 Large Top App Bar na may 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="Nilalaman ng screen..." />
</NestedScrollView>
</CoordinatorLayout>Toolbar ay sumusuporta sa buong pag-customize: pagbabago ng taas, animation ng paglitaw/pagtago, custom na child View, logo, navigation icon, PopupMenu at integrasyon sa CoordinatorLayout. Para sa animation ng pagtago kapag nag-s scroll, ginagamit ang AppBarLayout na may mga flag na scroll, enterAlways, snap. Para sa parallax effect ng imahe sa ilalim ng Toolbar — CollapsingToolbarLayout na may parallax mode.
Ang logo at subtitle ay itinatakda sa pamamagitan ng mga pamamaraang setLogo at setSubtitle. Ang navigation icon ay nako-configure sa pamamagitan ng setNavigationIcon at setNavigationOnClickListener. Ang custom na View ay idinaragdag sa pamamagitan ng addView nang direkta sa Toolbar. Para sa SearchView, ginagamit ang MenuItem na may actionViewClass. Para sa dark theme, awtomatikong inilalapat ang mga kulay mula sa mga attribute ng Material 3.
// Advanced na pag-customize ng Toolbar
with (toolbar) {
// Logo at pamagat
setLogo(R.drawable.ic_logo)
setTitle("Aking application")
setSubtitle("Bersyon 2.0")
// Navigation icon na may handler
setNavigationIcon(R.drawable.ic_drawer)
setNavigationOnClickListener {
drawerLayout.open()
}
// Custom na view — Switch para sa tema
val themeSwitch = Switch(this@MainActivity).apply {\n thumbDrawable = ContextCompat.getDrawable(
this@MainActivity, R.drawable.ic_theme
)
}
addView(themeSwitch)
// Custom na PopupMenu
setOnMenuItemClickListener { item ->
Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
true
}
}Mga Madalas Itanong
ActionBar — system bar ng Android 3.0–4.4 na may limitadong pag-customize. Toolbar — flexible na komponent ng Material Design na maaaring ilagay kahit saan sa layout, i-animate at punuin ng custom na view. Ang Toolbar ay ganap na pumapalit sa ActionBar sa pamamagitan ng setSupportActionBar.
Gamitin ang CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. I-configure ang scroll flag para sa Toolbar sa layout_scrollBehavior. Kapag nag-scroll pababa, ang Toolbar ay nagtatago, kapag nag-scroll pataas, lumilitaw na may animation. Sa Material 3, ang Medium/Large Top App Bar ay lumiliit patungong Small.
Ang limitasyon ay ang pisikal na lapad ng screen. Inirerekomenda ang 2–4 action items (icon). Ang natitira ay inililipat sa overflow menu (tatlong tuldok). Pag-configure sa pamamagitan ng app:showAsAction: always (palaging ipakita), ifRoom (kung may puwang), never (sa overflow).
SearchView ay idinaragdag bilang action view sa Menu. Sa XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". Ang SearchView ay awtomatikong lumiliit sa icon ng paghahanap at lumalawak kapag na-click. Sumusuporta sa voice search at autocomplete sa pamamagitan ng SearchRecentSuggestionsProvider.
CollapsingToolbarLayout — lalagyan para sa Toolbar na lumiliit nang may animation kapag nag-s scroll ang content. Ginagamit kasama ng CoordinatorLayout at AppBarLayout. Sumusuporta sa mga mode: pin (fixed), parallax (parallax effect). Mainam para sa mga screen na may imahe sa header (profile, pahina ng detalye).
Buod
Gagawa kami ng mobile application na turnkey
Gumagawa ang IT Sectr ng mga iOS at Android application para sa mga startup at negosyo mula noong 2017. Magpapayo kami sa iyo at magmumungkahi ng pinakamahusay na solusyon.
Basahin din