Toolbar: podstata, panel nástrojů v Android aplikacích

Autor: IT Sectr Publikováno: 2026-02-23 Doba čtení: 12 min

Toolbar (panel nástrojů) — komponent Androidu, který nahradil ActionBar, zobrazuje nadpis obrazovky, navigační prvky a akce. Toolbar je součástí Material Design Library a je plně přizpůsobitelný: od standardního nadpisu po vlastní zobrazení a animované ikony. Více o komponentu si přečtěte v specifikaci Material Design 3.

Hlavní body

  • Toolbar — přizpůsobitelný panel nástrojů Androidu, nástupce ActionBar z Material Design
  • ActionBar — systémový panel existující před Android 5.0, nahrazen Toolbarem
  • Material 3 — Top App Bar se třemi variantami: Center, Small, Medium, Large
  • Menu — XML menu s action items, integrované do Toolbaru přes onCreateOptionsMenu
  • Přizpůsobení — nadpis, logo, navigační ikona, vlastní zobrazení a animace

Co je Toolbar?

Toolbar — komponent Androidu z knihovny Material Design (androidx.appcompat.widget.Toolbar), který poskytuje flexibilní panel nástrojů pro obrazovku aplikace. Toolbar nahradil zastaralý ActionBar a dává vývojářům plnou kontrolu nad vzhledem a chováním. Může být umístěn kdekoli v layoutu, mít vlastní podřízená zobrazení, být animován a přizpůsoben různým velikostem obrazovky.

Material Design 3 (2026) definuje Top App Bar — evoluci Toolbaru — se čtyřmi variantami: Small (kompaktní, 48 dp), Center-aligned (nadpis na střed), Medium (zvětšený nadpis, 112 dp) a Large (velký nadpis, 168 dp). Každá varianta má své vlastní chování při rolování: Small zůstává fixní, Medium a Large se sbalí na Small při rolování obsahu nahoru.

Toolbar zobrazuje tři klíčové zóny: navigační ikonu (vlevo, obvykle „hamburger" nebo šipka „Zpět"), nadpis obrazovky (uprostřed nebo vlevo) a action items (vpravo — ikony akcí, overflow menu). Toolbar může obsahovat logo, subtitle, vlastní View (search view, switch) a animovaný CollapsingToolbarLayout v kombinaci s CoordinatorLayout.

ActionBar: historie a evoluce

ActionBar — systémový panel Androidu, který se objevil v Android 3.0 (API 11) jako náhrada zastaralého Title Bar. ActionBar byl pevně svázán s Activity, měl fixní pozici nahoře na obrazovce a omezené možnosti přizpůsobení. S vydáním Android 5.0 (Lollipop, 2014) a knihovny AppCompat Google představila Toolbar jako flexibilní náhradu.

Hlavní nedostatky ActionBar, které Toolbar vyřešil: fixní pozice (pouze nahoře), nemožnost animace, potíže s vlastními zobrazeními, problémy s CoordinatorLayout a CollapsingToolbarLayout. Google oficiálně prohlásil ActionBar za zastaralý (deprecated) v roce 2015 a doporučuje Toolbar pro všechny nové projekty. Počínaje Android 12 (2021) je ActionBar ve výchozím nastavení vypnutý v nových tématech Material 3.

VlastnostActionBarToolbar
PoziceFixní horníKdekoli v layoutu
PřizpůsobeníOmezené (barva, pozadí)Plné (zobrazení, styly, animace)
CollapsingNepodporovánoCollapsingToolbarLayout
AnimacePouze systémováJakákoli (ObjectAnimator, Transition)
Material 3NepodporovánoSmall / Medium / Large App Bar

Nastavení Toolbaru v Androidu

Pro použití Toolbar je třeba: (1) nastavit téma bez ActionBar (Theme.Material3.NoActionBar nebo Theme.AppCompat.NoActionBar), (2) přidat Toolbar do XML layoutu, (3) nastavit jej jako ActionBar přes setSupportActionBar. Poté Toolbar získá všechny funkce ActionBar: zpracování Menu, navigační ikonu, nadpis z AndroidManifest.

xml
<!-- activity_main.xml s Toolbarem -->
<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)

        // Nastavení navigační ikony
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Vlastní nadpis
        supportActionBar?.title = "Hlavní stránka"
        supportActionBar?.subtitle = "Ahoj, uživateli!"
    }

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

Integrace Menu do Toolbaru

Toolbar se integruje se systémem Android Menu přes callbacky onCreateOptionsMenu a onOptionsItemSelected. Menu definuje action items — ikony akcí zobrazené vpravo v Toolbaru. Pokud se action items nevejdou, jsou automaticky přesunuty do overflow menu (tři tečky). Vývojář to řídí atributem 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="Hledat"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Oznámení"
        app:showAsAction="ifRoom" />

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

Material 3: Center a Large Top App Bar

Material 3 zavádí čtyři varianty Top App Bar: Small (kompaktní, 48 dp), Center-aligned (nadpis na střed), Medium (112 dp se zvětšeným nadpisem) a Large (168 dp s velkým nadpisem). Medium a Large App Bar podporují chování collapsible — při rolování obsahu nahoru se plynule sbalí na Small. Animaci řídí CoordinatorLayout a AppBarLayout.

Center-aligned Top App Bar — nová varianta Material 3, kde je nadpis umístěn uprostřed panelu. Tento styl se často používá v aplikacích Google (Play Market, YouTube) a doporučuje se pro obrazovky s minimálním počtem action items. Small Top App Bar — klasický Toolbar, kompatibilní se staršími verzemi Androidu. Medium a Large jsou vhodné pro obrazovky, kde je nadpis klíčovým prvkem (profil, hlavní stránka).

xml
<!-- Material 3 Large Top App Bar s 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="Obsah obrazovky..." />
    </NestedScrollView>
</CoordinatorLayout>

Pokročilé přizpůsobení Toolbaru

Toolbar podporuje plné přizpůsobení: změnu výšky, animaci zobrazení/skrytí, vlastní podřízené View, logo, navigační ikonu, PopupMenu a integraci s CoordinatorLayout. Pro animaci skrytí při rolování se používá AppBarLayout s příznaky scroll, enterAlways, snap. Pro paralaxní efekt obrázku pod Toolbarem — CollapsingToolbarLayout s režimem parallax.

Logo a subtitle se nastavují pomocí metod setLogo a setSubtitle. Navigační ikona se konfiguruje přes setNavigationIcon a setNavigationOnClickListener. Vlastní View se přidávají přes addView přímo do Toolbaru. Pro SearchView se používá MenuItem s actionViewClass. Pro tmavé téma se barvy automaticky aplikují z atributů Material 3.

kotlin
// Pokročilé přizpůsobení Toolbaru
with (toolbar) {
    // Logo a nadpis
    setLogo(R.drawable.ic_logo)
    setTitle("Moje aplikace")
    setSubtitle("Verze 2.0")

    // Navigační ikona s handlerem
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Vlastní zobrazení — Switch pro téma
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

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

Často kladené otázky

Jaký je rozdíl mezi Toolbarem a ActionBarem?

ActionBar — systémový panel Android 3.0–4.4 s omezeným přizpůsobením. Toolbar — flexibilní komponent Material Design, který lze umístit kamkoli do layoutu, animovat a naplnit vlastními zobrazeními. Toolbar zcela nahrazuje ActionBar přes setSupportActionBar.

Jak skrýt Toolbar při rolování?

Použijte CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Nastavte příznak scroll pro Toolbar v layout_scrollBehavior. Při rolování dolů se Toolbar skryje, při rolování nahoru se objeví s animací. V Material 3 se Medium/Large Top App Bar sbalí na Small.

Kolik action items lze umístit do Toolbaru?

Omezení je fyzická šířka obrazovky. Doporučuje se 2–4 action items (ikony). Zbývající se přesunou do overflow menu (tři tečky). Nastavení přes app:showAsAction: always (vždy zobrazit), ifRoom (pokud je místo), never (do overflow).

Jak přidat SearchView do Toolbaru?

SearchView se přidá jako action view v Menu. V XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView se automaticky sbalí do ikony vyhledávání a rozbalí se po kliknutí. Podporuje hlasové vyhledávání a automatické doplňování přes SearchRecentSuggestionsProvider.

Co je CollapsingToolbarLayout?

CollapsingToolbarLayout — kontejner pro Toolbar, který se animovaně sbalí při rolování obsahu. Používá se s CoordinatorLayout a AppBarLayout. Podporuje režimy: pin (fixní), parallax (paralaxní efekt). Ideální pro obrazovky s obrázkem v záhlaví (profil, stránka podrobností).

Shrnutí

  • Toolbar — flexibilní panel nástrojů Androidu, který nahradil ActionBar a je plně integrován s Material Design
  • Material 3 Top App Bar — čtyři varianty: Small, Center-aligned, Medium, Large s různým chováním při rolování
  • ActionBar — zastaralý systémový panel, omezený v přizpůsobení a animaci
  • Menu a action items — integrace přes XML menu s příznaky always/ifRoom/never pro správu viditelnosti
  • CollapsingToolbarLayout — animované sbalení Toolbaru při rolování pro obrazovky s obrázkem v záhlaví
  • Přizpůsobení — logo, subtitle, vlastní View, SearchView, PopupMenu a barvy Material 3
  • SearchView — vestavěný action view pro vyhledávání s hlasovým vstupem a automatickým doplňováním

Vyvineme mobilní aplikaci na klíč

IT Sectr vytváří aplikace pro iOS a Android pro startupy a podniky od roku 2017. Poradíme vám a navrhneme nejlepší řešení.

Prodiskutovat projekt

Přečtěte si také