Toolbar: Die Symbolleiste in Android-Anwendungen

Autor: IT Sectr Veröffentlicht: 2026-02-23 Lesezeit: 12 Min.

Toolbar (Symbolleiste) ist eine Android-Komponente, die ActionBar ersetzt hat und den Bildschirmtitel, Navigationselemente und Aktionen anzeigt. Toolbar ist Teil der Material Design Library und vollständig anpassbar: von einem Standardtitel bis zu benutzerdefinierten Ansichten und animierten Symbolen. Weitere Informationen zur Komponente finden Sie in der Material Design 3 Spezifikation.

Wichtige Punkte

  • Toolbar ist eine anpassbare Android-Symbolleiste, Nachfolger von ActionBar aus Material Design
  • ActionBar ist die Systemleiste, die vor Android 5.0 existierte, durch Toolbar ersetzt
  • Material 3 — Top App Bar mit vier Varianten: Small, Center-aligned, Medium, Large
  • Menu — XML-Menü mit action items, in Toolbar integriert über onCreateOptionsMenu
  • Anpassung — Titel, Logo, Navigationssymbol, benutzerdefinierte Ansichten und Animationen

Was ist Toolbar?

Toolbar ist eine Android-Komponente aus der Material Design Bibliothek (androidx.appcompat.widget.Toolbar), die eine flexible Symbolleiste für den App-Bildschirm bereitstellt. Toolbar hat die veraltete ActionBar ersetzt und gibt Entwicklern die volle Kontrolle über Aussehen und Verhalten. Sie kann überall im Layout platziert werden, benutzerdefinierte untergeordnete Ansichten haben, animiert werden und sich an verschiedene Bildschirmgrößen anpassen.

Material Design 3 (2026) definiert die Top App Bar — die Weiterentwicklung von Toolbar — mit vier Varianten: Small (kompakt, 48 dp), Center-aligned (zentrierter Titel), Medium (vergrößerter Titel, 112 dp) und Large (großer Titel, 168 dp). Jede Variante hat ihr eigenes Scrollverhalten: Small bleibt fixiert, Medium und Large klappen beim Hochscrollen des Inhalts zu Small zusammen.

Toolbar zeigt drei Hauptbereiche an: das Navigationssymbol (links, normalerweise ein Hamburger-Menü oder Zurück-Pfeil), den Bildschirmtitel (Mitte oder links) und die action items (rechts — Aktionssymbole, Overflow-Menü). Toolbar kann ein Logo, Untertitel, benutzerdefinierte Ansichten (Suchansicht, Switch) und das animierte CollapsingToolbarLayout in Kombination mit CoordinatorLayout enthalten.

ActionBar: Geschichte und Entwicklung

ActionBar ist eine System-Android-Leiste, die in Android 3.0 (API 11) als Ersatz für die veraltete Title Bar erschien. ActionBar war stark an Activity gebunden, hatte eine feste Position oben auf dem Bildschirm und begrenzte Anpassungsmöglichkeiten. Mit der Veröffentlichung von Android 5.0 (Lollipop, 2014) und der AppCompat Bibliothek führte Google Toolbar als flexible Alternative ein.

Die Hauptnachteile von ActionBar, die Toolbar behoben hat: feste Position (nur oben), keine Animationsmöglichkeit, Schwierigkeiten mit benutzerdefinierten Ansichten, Probleme mit CoordinatorLayout und CollapsingToolbarLayout. Google hat ActionBar 2015 offiziell für veraltet (deprecated) erklärt und empfiehlt Toolbar für alle neuen Projekte. Ab Android 12 (2021) ist ActionBar in neuen Material 3 Designs standardmäßig deaktiviert.

FunktionActionBarToolbar
PositionOben fixiertÜberall im Layout
AnpassungBegrenzt (Farbe, Hintergrund)Vollständig (Ansichten, Stile, Animationen)
EinklappbarNicht unterstütztCollapsingToolbarLayout
AnimationNur systemweitBeliebig (ObjectAnimator, Transition)
Material 3Nicht unterstütztSmall / Medium / Large App Bar

Toolbar in Android einrichten

Um Toolbar zu verwenden, müssen Sie: (1) ein Design ohne ActionBar festlegen (Theme.Material3.NoActionBar oder Theme.AppCompat.NoActionBar), (2) Toolbar zum XML-Layout hinzufügen, (3) es als ActionBar über setSupportActionBar festlegen. Danach erhält Toolbar alle ActionBar-Funktionen: Menüverarbeitung, Navigationssymbol, Titel aus AndroidManifest.

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

        // Navigationssymbol einrichten
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Benutzerdefinierter Titel
        supportActionBar?.title = "Startseite"
        supportActionBar?.subtitle = "Hallo, Benutzer!"
    }

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

Menü in Toolbar integrieren

Toolbar integriert sich über die Callbacks onCreateOptionsMenu und onOptionsItemSelected in das Android-Menüsystem. Das Menü definiert action items — Aktionssymbole, die rechts in der Toolbar angezeigt werden. Wenn action items nicht passen, werden sie automatisch in das Overflow-Menü (drei Punkte) verschoben. Der Entwickler steuert dies über das Attribut 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="Suchen"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Benachrichtigungen"
        app:showAsAction="ifRoom" />

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

Material 3: Center und Large Top App Bar

Material 3 führt vier Top App Bar Varianten ein: Small (kompakt, 48 dp), Center-aligned (zentrierter Titel), Medium (112 dp mit vergrößertem Titel) und Large (168 dp mit großem Titel). Medium und Large App Bar unterstützen einklappbares Verhalten — beim Hochscrollen von Inhalten klappen sie sanft zu Small zusammen. Die Animation wird über CoordinatorLayout und AppBarLayout gesteuert.

Center-aligned Top App Bar ist eine neue Material 3 Variante, bei der der Titel in der Mitte der Leiste positioniert ist. Dieser Stil wird häufig in Google-Apps (Play Store, YouTube) verwendet und wird für Bildschirme mit einer minimalen Anzahl von action items empfohlen. Small Top App Bar ist die klassische Toolbar, kompatibel mit älteren Android-Versionen. Medium und Large eignen sich für Bildschirme, auf denen der Titel ein Schlüsselelement ist (Profil, Startseite).

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

Erweiterte Toolbar-Anpassung

Toolbar unterstützt vollständige Anpassung: Höhenänderung, Ein-/Ausblendanimationen, benutzerdefinierte untergeordnete Ansichten, Logo, Navigationssymbol, PopupMenu und Integration mit CoordinatorLayout. Für die Ausblendanimation beim Scrollen wird AppBarLayout mit den Flags scroll, enterAlways, snap verwendet. Für den Parallax-Bildeffekt unter der Toolbar — CollapsingToolbarLayout mit mode parallax.

Logo und Untertitel werden über die Methoden setLogo und setSubtitle festgelegt. Das Navigationssymbol wird über setNavigationIcon und setNavigationOnClickListener konfiguriert. Benutzerdefinierte Ansichten werden über addView direkt in die Toolbar eingefügt. Für SearchView verwenden Sie MenuItem mit actionViewClass. Für das dunkle Design werden Farben aus den Material 3 Attributen automatisch angewendet.

kotlin
// Erweiterte Toolbar-Anpassung
with (toolbar) {
    // Logo und Titel
    setLogo(R.drawable.ic_logo)
    setTitle("Meine App")
    setSubtitle("Version 2.0")

    // Navigationssymbol mit Handler
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Benutzerdefinierte Ansicht — Switch für Design
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

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

Häufig gestellte Fragen

Was ist der Unterschied zwischen Toolbar und ActionBar?

ActionBar ist eine Systemleiste von Android 3.0–4.4 mit eingeschränkter Anpassung. Toolbar ist eine flexible Material Design Komponente, die überall im Layout platziert, animiert und mit benutzerdefinierten Ansichten gefüllt werden kann. Toolbar ersetzt ActionBar vollständig über setSupportActionBar.

Wie blende ich Toolbar beim Scrollen aus?

Verwenden Sie CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Setzen Sie das scroll-Flag für Toolbar in layout_scrollBehavior. Beim Herunterscrollen wird Toolbar ausgeblendet, beim Hochscrollen erscheint sie mit Animation. In Material 3 klappt Medium/Large Top App Bar zu Small zusammen.

Wie viele action items können in Toolbar platziert werden?

Die Einschränkung ist die physische Bildschirmbreite. Empfohlen werden 2–4 action items (Symbole). Der Rest wird in das Overflow-Menü (drei Punkte) verschoben. Konfiguration über app:showAsAction: always (immer anzeigen), ifRoom (wenn Platz), never (im Overflow).

Wie füge ich SearchView zu Toolbar hinzu?

SearchView wird als action view im Menü hinzugefügt. Im XML-Menü: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView klappt automatisch zu einem Suchsymbol zusammen und erweitert sich bei Berührung. Unterstützt Sprachsuche und Autovervollständigung über SearchRecentSuggestionsProvider.

Was ist CollapsingToolbarLayout?

CollapsingToolbarLayout ist ein Container für Toolbar, der beim Scrollen des Inhalts animiert einklappt. Wird mit CoordinatorLayout und AppBarLayout verwendet. Unterstützt Modi: pin (fixiert), parallax (Parallax-Effekt). Ideal für Bildschirme mit Header-Bild (Profil, Detailseite).

Zusammenfassung

  • Toolbar ist eine flexible Android-Symbolleiste, die ActionBar ersetzt hat und vollständig in Material Design integriert ist
  • Material 3 Top App Bar — vier Varianten: Small, Center-aligned, Medium, Large mit unterschiedlichem Scrollverhalten
  • ActionBar ist eine veraltete Systemleiste, eingeschränkt in Anpassung und Animation
  • Menü und action items — Integration über XML-Menü mit always/ifRoom/never-Flags zur Sichtbarkeitssteuerung
  • CollapsingToolbarLayout — animiertes Einklappen von Toolbar beim Scrollen für Bildschirme mit Header-Bild
  • Anpassung — Logo, Untertitel, benutzerdefinierte Ansichten, SearchView, PopupMenu und Material 3 Farben
  • SearchView — integrierte action view für Suche mit Spracheingabe und Autovervollständigung

Wir entwickeln eine mobile Applikation schlüsselfertig

IT Sectr entwickelt seit 2017 iOS- und Android-Apps für Startups und Unternehmen. Wir beraten Sie und schlagen die beste Lösung vor.

Projekt besprechen

Lesen Sie auch