Toolbar (panel narzędzi) — komponent Androida, który zastąpił ActionBar, wyświetlający tytuł ekranu, elementy nawigacyjne i akcje. Toolbar wchodzi w skład Material Design Library i jest w pełni konfigurowalny: od standardowego tytułu po niestandardowe widoki i animowane ikony. Więcej o komponencie przeczytasz w specyfikacji Material Design 3.
Najważniejsze
Toolbar — komponent Androida z biblioteki Material Design (androidx.appcompat.widget.Toolbar), zapewniający elastyczny panel narzędzi dla ekranu aplikacji. Toolbar zastąpił przestarzały ActionBar, dając programistom pełną kontrolę nad wyglądem i zachowaniem. Może być umieszczany w dowolnym miejscu layoutu, mieć niestandardowe widoki potomne, animować się i dostosowywać do różnych rozmiarów ekranu.
Material Design 3 (2026) definiuje Top App Bar — ewolucję Toolbar — z czterema wariantami: Small (kompaktowy, 48 dp), Center-aligned (tytuł wyśrodkowany), Medium (powiększony tytuł, 112 dp) i Large (duży tytuł, 168 dp). Każdy wariant ma swoje zachowanie podczas przewijania: Small pozostaje stały, Medium i Large zwijają się do Small przy przewijaniu treści w górę.
Toolbar wyświetla trzy kluczowe strefy: ikonę nawigacji (po lewej, zwykle „hamburger” lub strzałka „Wstecz”), tytuł ekranu (na środku lub po lewej) oraz action items (po prawej — ikony akcji, menu overflow). Toolbar może zawierać logo, subtitle, niestandardowe View (search view, switch) i animowany CollapsingToolbarLayout w połączeniu z CoordinatorLayout.
ActionBar — systemowy panel Androida, który pojawił się w Android 3.0 (API 11) jako zamiennik przestarzałego Title Bar. ActionBar był sztywno związany z Activity, miał stałą pozycję na górze ekranu i ograniczone możliwości personalizacji. Wraz z wydaniem Android 5.0 (Lollipop, 2014) i biblioteki AppCompat Google przedstawiła Toolbar jako elastyczny zamiennik.
Główne wady ActionBar, które rozwiązał Toolbar: stała pozycja (tylko na górze), brak możliwości animacji, trudności z niestandardowymi widokami, problemy z CoordinatorLayout i CollapsingToolbarLayout. Google oficjalnie uznało ActionBar za przestarzały (deprecated) w 2015 roku i zaleca Toolbar dla wszystkich nowych projektów. Począwszy od Android 12 (2021), ActionBar jest domyślnie wyłączony w nowych motywach Material 3.
| Cecha | ActionBar | Toolbar |
|---|---|---|
| Pozycja | Stała góra | Dowolne miejsce w layout |
| Personalizacja | Ograniczona (kolor, tło) | Pełna (widoki, style, animacje) |
| Collapsing | Nieobsługiwane | CollapsingToolbarLayout |
| Animacja | Tylko systemowa | Dowolna (ObjectAnimator, Transition) |
| Material 3 | Nieobsługiwane | Small / Medium / Large App Bar |
Do korzystania z Toolbar należy: (1) ustawić temat bez ActionBar (Theme.Material3.NoActionBar lub Theme.AppCompat.NoActionBar), (2) dodać Toolbar w XML layout, (3) ustawić go jako ActionBar przez setSupportActionBar. Następnie Toolbar otrzymuje wszystkie funkcje ActionBar: obsługę Menu, ikonę nawigacji, tytuł z AndroidManifest.
<!-- activity_main.xml z 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)
// Konfiguracja ikony nawigacji
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
// Niestandardowy tytuł
supportActionBar?.title = "Strona główna"
supportActionBar?.subtitle = "Witaj, użytkowniku!"
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return true
}
}Toolbar integruje się z systemem Android Menu przez callbacki onCreateOptionsMenu i onOptionsItemSelected. Menu definiuje action items — ikony akcji wyświetlane po prawej stronie w Toolbar. Jeśli action items się nie mieszczą, są automatycznie przenoszone do menu overflow (trzy kropki). Programista zarządza tym przez atrybut 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="Szukaj"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_notifications"
android:title="Powiadomienia"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Ustawienia"
app:showAsAction="never" />
</menu>override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.action_search -> {
Toast.makeText(this, "Szukaj", Toast.LENGTH_SHORT).show()
true
}
R.id.action_notifications -> {
openNotifications()
true
}
R.id.action_settings -> {
openSettings()
true
}
else -> super.onOptionsItemSelected(item)
}
}Material 3 wprowadza cztery warianty Top App Bar: Small (kompaktowy, 48 dp), Center-aligned (tytuł wyśrodkowany), Medium (112 dp z powiększonym tytułem) i Large (168 dp z dużym tytułem). Medium i Large App Bar obsługują zachowanie collapsible — podczas przewijania treści w górę płynnie zwijają się do Small. Animacja jest zarządzana przez CoordinatorLayout i AppBarLayout.
Center-aligned Top App Bar — nowy wariant Material 3, w którym tytuł znajduje się na środku panelu. Ten styl jest często używany w aplikacjach Google (Play Market, YouTube) i zalecany do ekranów z minimalną liczbą action items. Small Top App Bar — klasyczny Toolbar, kompatybilny ze starszymi wersjami Androida. Medium i Large nadają się do ekranów, gdzie tytuł jest kluczowym elementem (profil, strona główna).
<!-- Material 3 Large Top App Bar z 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="Zawartość ekranu..." />
</NestedScrollView>
</CoordinatorLayout>Toolbar obsługuje pełną personalizację: zmianę wysokości, animację pojawiania/ukrywania, niestandardowe widoki potomne, logo, ikonę nawigacji, PopupMenu i integrację z CoordinatorLayout. Do animacji ukrywania podczas przewijania używa się AppBarLayout z flagami scroll, enterAlways, snap. Do efektu paralaksy obrazu pod Toolbar — CollapsingToolbarLayout z trybem parallax.
Logo i subtitle ustawia się przez metody setLogo i setSubtitle. Ikona nawigacji jest konfigurowana przez setNavigationIcon i setNavigationOnClickListener. Niestandardowe widoki dodaje się przez addView bezpośrednio do Toolbar. Dla SearchView używa się MenuItem z actionViewClass. Dla ciemnego motywu automatycznie stosowane są kolory z atrybutów Material 3.
// Zaawansowana personalizacja Toolbar
with (toolbar) {
// Logo i tytuł
setLogo(R.drawable.ic_logo)
setTitle("Moja aplikacja")
setSubtitle("Wersja 2.0")
// Ikona nawigacji z obsługą
setNavigationIcon(R.drawable.ic_drawer)
setNavigationOnClickListener {
drawerLayout.open()
}
// Niestandardowy widok — Switch dla motywu
val themeSwitch = Switch(this@MainActivity).apply {\n thumbDrawable = ContextCompat.getDrawable(
this@MainActivity, R.drawable.ic_theme
)
}
addView(themeSwitch)
// Niestandardowy PopupMenu
setOnMenuItemClickListener { item ->
Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
true
}
}Często zadawane pytania
ActionBar — systemowy panel Android 3.0–4.4 z ograniczoną personalizacją. Toolbar — elastyczny komponent Material Design, który można umieszczać w dowolnym miejscu layoutu, animować i wypełniać niestandardowymi widokami. Toolbar całkowicie zastępuje ActionBar przez setSupportActionBar.
Użyj CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Skonfiguruj flagę scroll dla Toolbar w layout_scrollBehavior. Podczas przewijania w dół Toolbar się ukrywa, podczas przewijania w górę — pojawia się z animacją. W Material 3 Medium/Large Top App Bar zwija się do Small.
Ograniczeniem jest fizyczna szerokość ekranu. Zaleca się 2–4 action items (ikony). Pozostałe są przenoszone do menu overflow (trzy kropki). Konfiguracja przez app:showAsAction: always (zawsze pokazuj), ifRoom (jeśli jest miejsce), never (do overflow).
SearchView dodaje się jako action view w Menu. W XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView automatycznie zwija się do ikony wyszukiwania i rozszerza po kliknięciu. Obsługuje wyszukiwanie głosowe i autouzupełnianie przez SearchRecentSuggestionsProvider.
CollapsingToolbarLayout — kontener dla Toolbar, który animacyjnie zwija się podczas przewijania treści. Używany z CoordinatorLayout i AppBarLayout. Obsługuje tryby: pin (stały), parallax (efekt paralaksy). Idealny do ekranów z obrazem w nagłówku (profil, strona szczegółów).
Podsumowanie
Opracujemy aplikację mobilną pod klucz
IT Sectr tworzy aplikacje na iOS i Androida dla startupów i firm od 2017 roku. Doradzimy Ci i zaproponujemy najlepsze rozwiązanie.
Przeczytaj również