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 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 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.
| Funktion | ActionBar | Toolbar |
|---|---|---|
| Position | Oben fixiert | Überall im Layout |
| Anpassung | Begrenzt (Farbe, Hintergrund) | Vollständig (Ansichten, Stile, Animationen) |
| Einklappbar | Nicht unterstützt | CollapsingToolbarLayout |
| Animation | Nur systemweit | Beliebig (ObjectAnimator, Transition) |
| Material 3 | Nicht unterstützt | Small / Medium / Large App Bar |
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.
<!-- 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>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
}
}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.
<!-- 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>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 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).
<!-- 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>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.
// 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
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.
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.
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).
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.
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
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.
Lesen Sie auch