Advertisement
  1. Code
  2. Android SDK

So codieren Sie eine untere Navigationsleiste für eine Android-App

by
Read Time:9 minsLanguages:

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Das Materialdesign-Team von Google definiert die Funktionalität der unteren Navigationsleisten in Android wie folgt:

Die unteren Navigationsleisten erleichtern das Erkunden und Wechseln zwischen den Ansichten der obersten Ebene mit einem einzigen Fingertipp.
Durch Tippen auf ein unteres Navigationssymbol gelangen Sie direkt zur zugehörigen Ansicht oder aktualisieren die aktuell aktive Ansicht.

Gemäß den offiziellen Materialdesign-Richtlinien für die untere Navigationsleiste sollte diese verwendet werden, wenn Ihre App über Folgendes verfügt:

  • drei bis fünf Top-Level-Destinationen
  • Ziele, die einen direkten Zugang erfordern

Ein Beispiel für eine beliebte App, die die untere Navigationsleiste implementiert, ist die Google+ Android App von Google, die damit zu verschiedenen Zielen der App navigiert. Sie können dies selbst sehen, indem Sie die Google+ App aus dem Google Play Store herunterladen (falls Sie sie noch nicht auf Ihrem Gerät haben). Der folgende Screenshot stammt aus der Google+ App und zeigt eine untere Navigationsleiste an.

Screenshot of Google Android appScreenshot of Google Android appScreenshot of Google Android app

In diesem Beitrag erfahren Sie, wie Sie Menüelemente in einer unteren Navigationsleiste in Android anzeigen. Wir verwenden die BottomNavigationView-API, um die Aufgabe auszuführen. Als zusätzlichen Bonus erfahren Sie auch, wie Sie die Android Studio-Vorlagenfunktion verwenden, um Ihr Projekt mit einer unteren Navigationsleiste schnell zu booten.

Ein Beispielprojekt (in Kotlin) für dieses Tutorial finden Sie in unserem GitHub-Repository, damit Sie es leicht verfolgen können.

Voraussetzungen

Um diesem Tutorial folgen zu können, benötigen Sie:

1. Erstellen Sie ein Android Studio-Projekt

Starten Sie Android Studio und erstellen Sie ein neues Projekt (Sie können es BottomNavigationDemo nennen) mit einer leeren Aktivität namens MainActivity. Stellen Sie sicher, dass Sie auch das Kontrollkästchen Kotlin-Unterstützung einschließen aktivieren.

Create Android Project dialog Create Android Project dialog Create Android Project dialog

2. Hinzufügen der BottomNavigationView

Um BottomNavigationView in Ihrem Projekt zu verwenden, müssen Sie die Designunterstützung und auch das Android-Unterstützungsartefakt importieren. Fügen Sie diese der Datei build.gradle Ihres Moduls hinzu, um sie zu importieren.

Besuchen Sie auch Ihre Datei res/layout/activlty_main.xml, um das BottomNavigationView-Widget einzuschließen. Diese Layoutdatei enthält auch ein ConstraintLayout und ein FrameLayout. Beachten Sie, dass das FrameLayout als Container oder Platzhalter für die verschiedenen Fragmente dient, die darauf platziert werden, wenn auf ein Menüelement in der unteren Navigationsleiste geklickt wird. (Dazu kommen wir gleich.)

Hier haben wir ein BottomNavigationView-Widget mit der ID navigationView erstellt. In der offiziellen Dokumentation heißt es:

BottomNavigationView stellt eine standardmäßige untere Navigationsleiste für die Anwendung dar. Es ist eine Implementierung der unteren Navigation des Materialdesigns.
Die unteren Navigationsleisten erleichtern es Benutzern, mit einem einzigen Fingertipp zwischen den Ansichten der obersten Ebene zu navigieren und zwischen ihnen zu wechseln. Es sollte verwendet werden, wenn die Anwendung drei bis fünf Ziele auf oberster Ebene hat.

Die wichtigen Attribute, die Sie beachten sollten, die unserer BottomNavigationView hinzugefügt wurden, sind:

  • app:itemBackground: Dieses Attribut setzt den Hintergrund unserer Menüpunkte auf die angegebene Ressource. In unserem Fall haben wir ihm nur eine Hintergrundfarbe gegeben.
  • app:itemIconTint: legt den Farbton fest, der auf die Icons unserer Menüpunkte angewendet wird.
  • app:itemTextColor: legt die Farben fest, die für die verschiedenen Zustände (normal, ausgewählt, fokussiert usw.) des Menüeintragstexts verwendet werden sollen.

Um die Menüelemente für die untere Navigationsleiste einzuschließen, können wir das Attribut app:menu mit einem Wert verwenden, der auf eine Menüressourcendatei verweist.

Hier ist die Menüressourcendatei res/menu/navigation.xml:

Hier haben wir ein Menu mit dem <menu> definiert, das als Container für Menüpunkte dient. Ein <item> erstellt ein MenuItem, das ein einzelnes Element in einem Menü darstellt. Wie Sie sehen, hat jedes <item> eine ID, ein Symbol und einen Titel.

3. Initialisierung von Komponenten

Als Nächstes initialisieren wir eine Instanz von BottomNavigationView. Die Initialisierung erfolgt in onCreate() in MainActivity.kt.

4. Testen der App

Jetzt können wir die App ausführen!

First demo app showing bottom navigation First demo app showing bottom navigation First demo app showing bottom navigation

Wie Sie sehen können, wird unsere untere Navigationsleiste am unteren Rand des App-Bildschirms angezeigt. Wenn Sie dort auf eines der Navigationselemente klicken, passiert nichts – wir werden diesen Teil im nächsten Abschnitt behandeln.

5. Konfigurieren von Klickereignissen

Sehen wir uns nun an, wie Sie Klickereignisse für jedes der Elemente in der unteren Navigationsleiste konfigurieren. Denken Sie daran, dass das Klicken auf ein Element darin den Benutzer zu einem neuen Ziel in der App führen sollte.

Hier haben wir die Methode setOnNavigationItemSelectedListener aufgerufen. Hier ist, was es laut der offiziellen Dokumentation tut:

Legen Sie einen Listener fest, der benachrichtigt wird, wenn ein unteres Navigationselement ausgewählt wird.

Wir haben den when-Ausdruck verwendet, um basierend auf dem angeklickten Menüelement verschiedene Aktionen auszuführen – die Menüelement-IDs dienen als Konstanten für den when-Ausdruck. Am Ende jeder when-Verzweigung geben wir true zurück.

Anschließend übergeben wir unseren mOnNavigationItemSelectedListener-Listener als Argument an setOnNavigationItemSelectedListener().

Beachten Sie, dass es eine weitere ähnliche Methode namens setOnNavigationItemReselectedListener gibt, die benachrichtigt wird, wenn das aktuell ausgewählte untere Navigationselement erneut ausgewählt wird.

Als Nächstes erstellen wir die verschiedenen Seiten (oder Fragmente) für jedes der Menüelemente in der Navigationsleiste, sodass beim Klicken oder Tippen auf ein Menüelement ein anderes Android-Fragment oder eine andere Seite angezeigt wird.

6. Erstellen der Fragmente (Seiten)

Wir beginnen mit der SongsFragment.kt-Klasse, und Sie sollten für die verbleibenden zwei Fragmentklassen – AlbumsFragment.kt und ArtistsFragment.kt – ähnlich vorgehen.

Hier ist mein SongsFragment.kt:

Hier ist auch mein R.layout.fragment_songs:

7. Starten der Fragmente

Wenn auf einen der Menüpunkte geklickt wird, öffnen wir das entsprechende Fragment und ändern auch den Titel der Aktionsleiste.

Hier verwenden wir eine Methode namens openFragment(), die einfach die FragmentTransaction verwendet, um unser Fragment zur Benutzeroberfläche hinzuzufügen.

Führen Sie nun das Projekt erneut aus, um zu sehen, wie alles funktioniert!

Final app demo with click events Final app demo with click events Final app demo with click events

Jedes Mal, wenn Sie auf ein Menüelement klicken, wird der Benutzer zu einem neuen Fragment weitergeleitet.

Beachten Sie, dass bei mehr als vier Menüpunkten in der unteren Navigationsleiste – d. h. in BottomNavigationView – dann aktiviert das Android-System automatisch den Shift-Modus. Wenn in diesem Modus auf eines der Menüelemente geklickt wird, werden die anderen Elemente rechts oder links des angeklickten Elements verschoben.

BottomNavigationView with shift modeBottomNavigationView with shift modeBottomNavigationView with shift mode

8. Bonus: Verwenden von Android Studio-Vorlagen

Nachdem Sie nun die erforderlichen APIs kennengelernt haben, um eine untere Navigationsleiste in Android von Grund auf neu zu erstellen, zeige ich Ihnen eine Verknüpfung, die es beim nächsten Mal schneller macht. Sie können einfach eine Vorlage verwenden, anstatt eine Navigationsleiste von Grund auf neu zu programmieren.

Android Studio bietet Codevorlagen, die den Best Practices für Android-Design und -Entwicklung entsprechen. Diese vorhandenen Codevorlagen (verfügbar in Java und Kotlin) können Ihnen helfen, Ihr Projekt schnell zu starten. Eine solche Vorlage kann verwendet werden, um eine untere Navigationsleiste zu erstellen.

Um diese praktische Funktion für ein neues Projekt zu verwenden, starten Sie zuerst Android Studio.

Create Android Project dialog Create Android Project dialog Create Android Project dialog

Geben Sie den Anwendungsnamen ein und klicken Sie auf die Schaltfläche Weiter. Sie können die Standardeinstellungen im Dialogfeld Android-Zielgeräte unverändert belassen.

Klicken Sie erneut auf die Schaltfläche Weiter.

Add an Activity to Mobile dialogAdd an Activity to Mobile dialogAdd an Activity to Mobile dialog

Wählen Sie im Dialogfeld Aktivität zu Mobile hinzufügen die Option Bottom-Navigation-Aktivität. Klicken Sie danach erneut auf die Schaltfläche Weiter.

Configure Activity dialogConfigure Activity dialogConfigure Activity dialog

Im letzten Dialog können Sie die Aktivität umbenennen oder ihren Layoutnamen oder Titel ändern, wenn Sie möchten. Klicken Sie abschließend auf die Schaltfläche Fertig stellen, um alle Konfigurationen zu akzeptieren.

Android Studio hat uns jetzt geholfen, ein Projekt mit einer unteren Navigationsaktivität zu erstellen. Wirklich cool!

Es wird dringend empfohlen, den generierten Code zu erkunden.

Um diese Vorlage in einem vorhandenen Android Studio-Projekt zu verwenden, gehen Sie einfach zu Datei > Neu > Aktivität > Aktivität für die untere Navigation.

Navigation from file menu to Bottom Navigation Activity Navigation from file menu to Bottom Navigation Activity Navigation from file menu to Bottom Navigation Activity

Beachten Sie, dass die in Android Studio enthaltenen Vorlagen gut für einfache Layouts und die Erstellung einfacher Apps geeignet sind. Wenn Sie jedoch Ihre App wirklich in Schwung bringen möchten, sollten Sie einige der App-Vorlagen in Betracht ziehen, die von Envato Market erhältlich sind.

Sie sind eine enorme Zeitersparnis für erfahrene Entwickler, da sie ihnen helfen, den Aufwand für die Erstellung einer App von Grund auf zu überwinden und ihre Talente stattdessen auf die einzigartigen und angepassten Teile der Erstellung einer neuen App zu konzentrieren.

Abschluss

In diesem Tutorial haben Sie gelernt, wie Sie eine untere Navigationsleiste in Android mit der BottomNavigationView-API von Grund auf neu erstellen. Wir haben auch untersucht, wie Sie die Android Studio-Vorlagen einfach und schnell verwenden können, um eine Aktivität für die untere Navigation zu erstellen.

Ich empfehle dringend, die offiziellen Richtlinien zum Materialdesign für die untere Navigationsleiste zu lesen, um mehr darüber zu erfahren, wie Sie die untere Navigationsleiste in Android richtig gestalten und verwenden.

Um mehr über das Programmieren für Android zu erfahren, sehen Sie sich einige unserer anderen Kurse und Tutorials hier auf Envato Tuts+ an!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.