Toolbar (eszköztár) — Android komponens, amely felváltotta az ActionBart, megjeleníti a képernyő címét, navigációs elemeket és műveleteket. A Toolbar a Material Design Library része és teljesen testreszabható: a szabványos címtől az egyedi nézetekig és animált ikonokig. További információ a komponensről a Material Design 3 specifikációban olvasható.
Főbb pontok
Toolbar — Android komponens a Material Design könyvtárból (androidx.appcompat.widget.Toolbar), amely rugalmas eszköztárat biztosít az alkalmazás képernyőjéhez. A Toolbar felváltotta az elavult ActionBart, teljes irányítást adva a fejlesztőknek a megjelenés és viselkedés felett. Elhelyezhető bárhol a layout-ban, lehet egyedi gyermek nézete, animálható és különböző képernyőméretekhez igazítható.
A Material Design 3 (2026) meghatározza a Top App Bar-t — a Toolbar evolúcióját — négy változattal: Small (kompakt, 48 dp), Center-aligned (középre igazított cím), Medium (megnövelt cím, 112 dp) és Large (nagy cím, 168 dp). Minden változatnak saját viselkedése van görgetéskor: Small rögzített marad, Medium és Large összehúzódik Small-ra a tartalom felfelé görgetésekor.
A Toolbar három kulcsfontosságú zónát jelenít meg: navigációs ikon (balra, általában "hamburger" vagy "Vissza" nyíl), képernyő cím (középen vagy balra) és action items (jobbra — műveletikonok, overflow menü). A Toolbar tartalmazhat logót, subtitle-t, egyedi View-kat (search view, switch) és animált CollapsingToolbarLayout-ot CoordinatorLayout-tal kombinálva.
ActionBar — Android rendszerpanel, amely az Android 3.0-ban (API 11) jelent meg az elavult Title Bar helyettesítőjeként. Az ActionBar szorosan kötődött az Activity-hez, rögzített pozíciója volt a képernyő tetején és korlátozott testreszabási lehetőségekkel rendelkezett. Az Android 5.0 (Lollipop, 2014) és az AppCompat könyvtár megjelenésével a Google bemutatta a Toolbart rugalmas helyettesítőként.
Az ActionBar fő hátrányai, amelyeket a Toolbar megoldott: rögzített pozíció (csak felül), animáció lehetetlensége, nehézségek az egyedi nézetekkel, problémák a CoordinatorLayout-tal és CollapsingToolbarLayout-tal. A Google 2015-ben hivatalosan elavulttá (deprecated) nyilvánította az ActionBart és a Toolbart ajánlja minden új projekthez. Android 12-től (2021) kezdve az ActionBar alapértelmezés szerint ki van kapcsolva az új Material 3 témákban.
| Jellemző | ActionBar | Toolbar |
|---|---|---|
| Pozíció | Rögzített felső | Bárhol a layout-ban |
| Testreszabás | Korlátozott (szín, háttér) | Teljes (nézetek, stílusok, animációk) |
| Collapsing | Nem támogatott | CollapsingToolbarLayout |
| Animáció | Csak rendszer | Bármilyen (ObjectAnimator, Transition) |
| Material 3 | Nem támogatott | Small / Medium / Large App Bar |
A Toolbar használatához: (1) állítson be témát ActionBar nélkül (Theme.Material3.NoActionBar vagy Theme.AppCompat.NoActionBar), (2) adja hozzá a Toolbart az XML layout-hoz, (3) állítsa be ActionBar-ként a setSupportActionBar segítségével. Ezt követően a Toolbar megkapja az ActionBar összes funkcióját: Menu feldolgozás, navigációs ikon, cím az AndroidManifest-ből.
<!-- activity_main.xml Toolbar-ral -->
<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)
// Navigációs ikon beállítása
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
// Egyedi cím
supportActionBar?.title = "Főoldal"
supportActionBar?.subtitle = "Helló, felhasználó!"
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return true
}
}Toolbar integrálódik az Android Menu rendszerrel az onCreateOptionsMenu és onOptionsItemSelected callback-eken keresztül. A Menu meghatározza az action items-eket — műveletikonokat, amelyek jobbra jelennek meg a Toolbar-ban. Ha az action items-ek nem férnek el, automatikusan áthelyeződnek az overflow menübe (három pont). A fejlesztő ezt az app:showAsAction attribútummal vezérli: 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="Keresés"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_notifications"
android:title="Értesítések"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Beállítások"
app:showAsAction="never" />
</menu>override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.action_search -> {
Toast.makeText(this, "Keresés", Toast.LENGTH_SHORT).show()
true
}
R.id.action_notifications -> {
openNotifications()
true
}
R.id.action_settings -> {
openSettings()
true
}
else -> super.onOptionsItemSelected(item)
}
}Material 3 négy változatot vezet be a Top App Bar-ból: Small (kompakt, 48 dp), Center-aligned (középre igazított cím), Medium (112 dp megnövelt címmel) és Large (168 dp nagy címmel). A Medium és Large App Bar támogatja az összecsukható viselkedést — a tartalom felfelé görgetésekor simán összehúzódik Small-ra. Az animációt a CoordinatorLayout és AppBarLayout kezeli.
Center-aligned Top App Bar — a Material 3 új változata, ahol a cím a panel közepére kerül. Ezt a stílust gyakran használják a Google alkalmazásokban (Play Market, YouTube) és minimális action items számú képernyőkhöz ajánlott. Small Top App Bar — klasszikus Toolbar, kompatibilis a régebbi Android verziókkal. A Medium és Large olyan képernyőkhöz alkalmas, ahol a cím kulcsfontosságú elem (profil, főoldal).
<!-- Material 3 Large Top App Bar CollapsingToolbarLayout-tal -->
<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="Képernyő tartalma..." />
</NestedScrollView>
</CoordinatorLayout>Toolbar teljes testreszabást támogat: magasság változtatása, megjelenés/eltűnés animáció, egyedi gyermek View-k, logo, navigációs ikon, PopupMenu és integráció CoordinatorLayout-tal. A görgetéskori eltűnési animációhoz AppBarLayout használatos scroll, enterAlways, snap jelzőkkel. A Toolbar alatti kép parallax effektusához — CollapsingToolbarLayout parallax móddal.
A logo és subtitle a setLogo és setSubtitle metódusokkal állítható be. A navigációs ikon a setNavigationIcon és setNavigationOnClickListener segítségével konfigurálható. Az egyedi View-k az addView-n keresztül közvetlenül a Toolbar-ba adhatók hozzá. A SearchView-hoz MenuItem használatos actionViewClass-szal. A sötét témához a színek automatikusan alkalmazódnak a Material 3 attribútumokból.
// Toolbar fejlett testreszabása
with (toolbar) {
// Logo és cím
setLogo(R.drawable.ic_logo)
setTitle("Az én alkalmazásom")
setSubtitle("2.0 verzió")
// Navigációs ikon kezelővel
setNavigationIcon(R.drawable.ic_drawer)
setNavigationOnClickListener {
drawerLayout.open()
}
// Egyedi nézet — Switch a témához
val themeSwitch = Switch(this@MainActivity).apply {\n thumbDrawable = ContextCompat.getDrawable(
this@MainActivity, R.drawable.ic_theme
)
}
addView(themeSwitch)
// Egyedi PopupMenu
setOnMenuItemClickListener { item ->
Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
true
}
}Gyakran Ismételt Kérdések
ActionBar — Android 3.0–4.4 rendszerpanel korlátozott testreszabással. Toolbar — rugalmas Material Design komponens, amely bárhol elhelyezhető a layout-ban, animálható és egyedi nézetekkel tölthető fel. A Toolbar teljesen helyettesíti az ActionBart a setSupportActionBar segítségével.
Használja a CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout-ot. Állítsa be a scroll jelzőt a Toolbar számára a layout_scrollBehavior-ben. Lefelé görgetéskor a Toolbar eltűnik, felfelé görgetéskor animációval jelenik meg. Material 3-ban a Medium/Large Top App Bar Small-ra húzódik össze.
A korlát a képernyő fizikai szélessége. 2–4 action item (ikon) ajánlott. A többi áthelyeződik az overflow menübe (három pont). Beállítás az app:showAsAction segítségével: always (mindig mutasd), ifRoom (ha van hely), never (overflow-ban).
SearchView action view-ként adható hozzá a Menu-ban. Az XML menu-ben: app:actionViewClass="androidx.appcompat.widget.SearchView". A SearchView automatikusan összecsukódik keresés ikonná és kattintásra kibontakozik. Támogatja a hangalapú keresést és automatikus kiegészítést a SearchRecentSuggestionsProvider segítségével.
CollapsingToolbarLayout — konténer a Toolbar számára, amely animáltan összehúzódik a tartalom görgetésekor. CoordinatorLayout és AppBarLayout segítségével használható. Támogatott módok: pin (rögzített), parallax (parallax effektus). Ideális olyan képernyőkhöz, ahol kép van a fejlécben (profil, részletes oldal).
Összegzés
Kulcsrakész mobilalkalmazást fejlesztünk
Az IT Sectr 2017 óta készít iOS és Android alkalmazásokat induló vállalkozásoknak és vállalkozásoknak. Tanácsot adunk, és a legjobb megoldást javasoljuk.
Olvassa el is