Toolbar: istota, panel narzędzi w aplikacjach Android

Autor: IT Sectr Opublikowano: 2026-02-23 Czas czytania: 12 min

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 — konfigurowalny panel narzędzi Androida, następca ActionBar z Material Design
  • ActionBar — panel systemowy istniejący przed Android 5.0, zastąpiony przez Toolbar
  • Material 3 — Top App Bar z trzema wariantami: Center, Small, Medium, Large
  • Menu — menu XML z action items, integrowane z Toolbar przez onCreateOptionsMenu
  • Personalizacja — tytuł, logo, ikona nawigacji, niestandardowe widoki i animacje

Czym jest Toolbar?

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: historia i ewolucja

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.

CechaActionBarToolbar
PozycjaStała góraDowolne miejsce w layout
PersonalizacjaOgraniczona (kolor, tło)Pełna (widoki, style, animacje)
CollapsingNieobsługiwaneCollapsingToolbarLayout
AnimacjaTylko systemowaDowolna (ObjectAnimator, Transition)
Material 3NieobsługiwaneSmall / Medium / Large App Bar

Konfiguracja Toolbar w Android

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.

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

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

Integracja Menu z Toolbar

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.

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

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

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

Zaawansowana personalizacja Toolbar

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.

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

Jaka jest różnica między Toolbar a ActionBar?

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.

Jak ukryć Toolbar podczas przewijania?

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.

Ile action items można umieścić w Toolbar?

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

Jak dodać SearchView do Toolbar?

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.

Czym jest CollapsingToolbarLayout?

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

  • Toolbar — elastyczny panel narzędzi Androida, który zastąpił ActionBar i jest w pełni zintegrowany z Material Design
  • Material 3 Top App Bar — cztery warianty: Small, Center-aligned, Medium, Large z różnym zachowaniem podczas przewijania
  • ActionBar — przestarzały panel systemowy, ograniczony w personalizacji i animacji
  • Menu i action items — integracja przez menu XML z flagami always/ifRoom/never do zarządzania widocznością
  • CollapsingToolbarLayout — animowane zwijanie Toolbar podczas przewijania dla ekranów z obrazem w nagłówku
  • Personalizacja — logo, subtitle, niestandardowe View, SearchView, PopupMenu i kolory Material 3
  • SearchView — wbudowane action view do wyszukiwania z wprowadzaniem głosowym i autouzupełnianiem

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.

Omów projekt

Przeczytaj również