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 — 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 — 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.
| Vlastnost | ActionBar | Toolbar |
|---|---|---|
| Pozice | Fixní horní | Kdekoli v layoutu |
| Přizpůsobení | Omezené (barva, pozadí) | Plné (zobrazení, styly, animace) |
| Collapsing | Nepodporováno | CollapsingToolbarLayout |
| Animace | Pouze systémová | Jakákoli (ObjectAnimator, Transition) |
| Material 3 | Nepodporováno | Small / Medium / Large App Bar |
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.
<!-- 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>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
}
}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.
<!-- 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>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 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).
<!-- 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>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.
// 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
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.
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.
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).
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.
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í
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í.
Přečtěte si také