Toolbar: lényege, eszköztár Android alkalmazásokban

Szerző: IT Sectr Megjelenés: 2026-02-23 Olvasási idő: 12 perc

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 — testreszabható Android eszköztár, az ActionBar utódja a Material Design-ból
  • ActionBar — rendszerpanel, amely az Android 5.0 előtt létezett, felváltotta a Toolbar
  • Material 3 — Top App Bar három variációval: Center, Small, Medium, Large
  • Menu — XML menü action items-ekkel, integrálva a Toolbar-ba az onCreateOptionsMenu-n keresztül
  • Testreszabás — cím, logo, navigációs ikon, egyedi nézetek és animációk

Mi az a Toolbar?

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: történelem és evolúció

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őActionBarToolbar
PozícióRögzített felsőBárhol a layout-ban
TestreszabásKorlátozott (szín, háttér)Teljes (nézetek, stílusok, animációk)
CollapsingNem támogatottCollapsingToolbarLayout
AnimációCsak rendszerBármilyen (ObjectAnimator, Transition)
Material 3Nem támogatottSmall / Medium / Large App Bar

Toolbar beállítása Androidban

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.

xml
<!-- 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>
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)

        // 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
    }
}

Menu integrálása a Toolbar-ba

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.

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="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>
kotlin
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: Center és Large Top App Bar

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).

xml
<!-- 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 fejlett testreszabása

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.

kotlin
// 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

Mi a különbség a Toolbar és az ActionBar között?

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.

Hogyan lehet elrejteni a Toolbart görgetéskor?

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.

Hány action item helyezhető el a Toolbar-ban?

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).

Hogyan lehet SearchView-t hozzáadni a Toolbar-hoz?

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.

Mi az a CollapsingToolbarLayout?

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

  • Toolbar — rugalmas Android eszköztár, amely felváltotta az ActionBart és teljesen integrálódott a Material Design-ba
  • Material 3 Top App Bar — négy változat: Small, Center-aligned, Medium, Large különböző görgetési viselkedéssel
  • ActionBar — elavult rendszerpanel, korlátozott testreszabással és animációval
  • Menu és action items — integráció XML menüvel always/ifRoom/never jelzőkkel a láthatóság kezeléséhez
  • CollapsingToolbarLayout — Toolbar animált összehúzódása görgetéskor fejléc képpel rendelkező képernyőkhöz
  • Testreszabás — logo, subtitle, egyedi View, SearchView, PopupMenu és Material 3 színek
  • SearchView — beépített action view kereséshez hangbemenettel és automatikus kiegészítéssel

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.

Projekt megbeszélése

Olvassa el is