Android Toolbar Tutorial - XML-Layout und Kotlin

Inhaltsverzeichnis

Die Android Toolbar stellt eine essenzielle Komponente dar, die es App-Entwicklern ermöglicht, individualisierte Aktionsleisten zu gestalten. Diese Leisten passen sich nahtlos an das Material Design von Android an und bieten vielfältige Funktionalitäten, wie beispielsweise die Anzeige von Titeln, Untertiteln, Menüpunkten und Navigationsschaltflächen. Das folgende Tutorial beleuchtet die detaillierte Nutzung der Android Toolbar in XML-Layouts, verbunden mit Kotlin-Code.

XML-Layout: Die Basis der Toolbar

Die Grundlage für die Toolbar wird im XML-Layout der Android-App definiert. Hier ein Beispiel, wie die Toolbar in einer Layout-Datei implementiert werden kann:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="Meine Anwendung"
    app:subtitle="Zusätzliche Information" />

Erläuterung der einzelnen Attribute:

id: Einmalige Kennung, um die Toolbar im Code anzusprechen.
layout_width: Die Breite der Toolbar, die hier an die Breite des übergeordneten Layouts angepasst ist.
layout_height: Die Höhe der Toolbar, die sich nach dem vordefinierten Attribut actionBarSize richtet.
background: Die Hintergrundfarbe der Toolbar, die über das Designattribut definiert wird.
title: Der Haupttitel, welcher in der Toolbar angezeigt wird.
subtitle: Eine optionale Zusatzinformation, die unter dem Titel dargestellt wird.

Kotlin-Code: Die Toolbar zum Leben erwecken

Nachdem die Toolbar im Layout definiert wurde, muss sie im Kotlin-Code initialisiert und als Aktionsleiste der Activity zugewiesen werden:

val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)

Die einzelnen Schritte im Detail:

findViewById: Ruft die Toolbar über ihre im XML-Layout definierte ID ab.
setSupportActionBar: Definiert die Toolbar als die standardmäßige Aktionsleiste für die aktuelle Activity.

Wichtige Eigenschaften der Toolbar

Die Toolbar bietet eine Vielzahl von Eigenschaften zur Anpassung:

Eigenschaft	Beschreibung
title	Der Haupttitel, der angezeigt wird.
subtitle	Ein optionaler Untertitel.
navigationIcon	Eine Navigationsschaltfläche.
menu	Menüpunkte für Aktionen.
contentInsetStart	Der Abstand zwischen dem linken Rand der Toolbar und den Menüelementen.
contentInsetEnd	Der Abstand zwischen dem rechten Rand der Toolbar und den Menüelementen.

Nützliche Methoden für die Toolbar

Die Toolbar bietet zudem einige Methoden, die für die dynamische Manipulation sehr nützlich sind:

Methode	Beschreibung
setTitle	Setzt den Titel der Toolbar.
setSubtitle	Setzt den Untertitel der Toolbar.
setNavigationIcon	Legt das Navigationssymbol fest.
inflateMenu	Lädt Menüpunkte aus einer XML-Ressource.
setOnMenuItemClickListener	Setzt einen Listener für Klicks auf Menüpunkte.

Navigationsschaltflächen

Die Toolbar bietet zwei Standard-Navigationsschaltflächen:

Zurück-Schaltfläche: Zum Navigieren zur vorherigen Activity.
App-Schaltfläche: Für das Öffnen eines App-spezifischen Navigationsmenüs (falls vorhanden).

Das navigationIcon Attribut wird genutzt, um das Navigationssymbol festzulegen:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="Meine Anwendung"
    app:navigationIcon="@drawable/ic_back" />

Menüelemente in der Toolbar

Die Toolbar kann mit Menüelementen erweitert werden, die dem Nutzer zusätzliche Optionen bieten, wie zum Beispiel das Öffnen einer Einstellungsseite oder das Aufrufen der Hilfe.

Menüelemente werden über die inflateMenu Methode hinzugefügt. Die Definition der Menüpunkte erfolgt in einer XML-Datei:

<menu xmlns:android="https://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_settings"
        android:title="Einstellungen"
        android:icon="@drawable/ic_settings" />
    <item
        android:id="@+id/action_help"
        android:title="Hilfe"
        android:icon="@drawable/ic_help" />
</menu>

Im Kotlin-Code erfolgt die Einbindung wie folgt:

toolbar.inflateMenu(R.menu.main_menu)

Events: Reagieren auf Benutzeraktionen

Die Toolbar löst verschiedene Events aus, wenn der Nutzer mit ihr interagiert. Um auf diese Ereignisse zu reagieren, verwendet man Listener:

setOnMenuItemClickListener: Wird bei Klicks auf Menüelemente ausgelöst.
setOnNavigationItemSelectedListener: Wird bei Klicks auf Navigationsschaltflächen ausgelöst.

Hier ein Beispiel, wie auf Klicks auf Menüelemente reagiert werden kann:

toolbar.setOnMenuItemClickListener { item ->
    when (item.itemId) {
        R.id.action_settings -> {
            // Code für die Einstellungen
        }
        R.id.action_help -> {
            // Code für die Hilfe
        }
    }
    true
}

Fazit

Die Android Toolbar ist ein vielseitiges und mächtiges Werkzeug, das es Entwicklern erlaubt, benutzerdefinierte Aktionsleisten zu erstellen. Durch die Kombination von XML-Layouts und Kotlin-Code lassen sich Titel, Untertitel, Navigationsschaltflächen, Menüelemente und Eventhandler einfach und effektiv gestalten. Eine sorgfältige Implementierung der Toolbar trägt maßgeblich zur Verbesserung des Benutzererlebnisses bei. Sie ermöglicht die Realisierung konsistenter und intuitiver Benutzeroberflächen, die den Designrichtlinien von Material Design entsprechen.

Häufig gestellte Fragen

Was ist der Unterschied zwischen einer Toolbar und einer ActionBar?
Die Toolbar ist ein Widget, während die ActionBar eine ältere Implementierung der Aktionsleiste ist.
Kann ich mehrere Menüelemente in einer Toolbar haben?
Ja, die Anzahl der Menüelemente ist nicht begrenzt.
Wie navigiere ich zur vorherigen Aktivität?
Setzen Sie das Navigationssymbol der Toolbar auf das Zurück-Symbol.
Ist es möglich, die Farbe der Toolbar zu ändern?
Ja, das background Attribut erlaubt das Setzen einer beliebigen Farbe.
Wie füge ich einen Suchen-Button hinzu?
Verwenden Sie das SearchView Widget und integrieren Sie es in das Menü der Toolbar.
Kann ich eigene Ansichten in die Toolbar einfügen?
Ja, über die Methode addView der Toolbar.
Wie kann ich Menüpunkte programmgesteuert hinzufügen?
Verwenden Sie die add Methode des Menüobjekts.
Wie kann ich die Ausrichtung des Titels ändern?
Nutzen Sie das android:gravity Attribut, um die Ausrichtung anzupassen.