Werbung

Android App Entwicklung: ESP Controller ansprechen #3 Navigationsmenü erstellen

In diesem dritten Teil der Reihe „Android App Entwicklung: ESP Controller ansprechen“ möchte ich gerne erläutern wie wir unsere AndroidApp umbauen damit wir ein schönes Menü zur Auswahl von Seiten bekommen zbsp. um die Daten des Fotowiderstandes in einem Liniendiagramm anzeigen zu können.

Ich empfehle die beiden zuvor veröffentlichten Tutorials zu lesen, damit du auf dem aktuellen stand bist.

Wir haben bisher einen Text an den ESP Controller gesendet und eine Begrüßung empfangen und einen Request abgesendet damit wir den aktuellen Wert des Fotowiderstandes als Respond erhalten. Wollen wir nun die Android App umschreiben so das wir neue Seite erstellen können denn alles auf eine Seite zu pressen sieht nicht schön aus.

Anzeigen eines Wertes vom Fotowiderstand
Anzeigen eines Wertes vom Fotowiderstand

Erstellen eines Layouts mit Navigationsleiste

Zunächst wollen wir ein neues Layout erzeugen. Denn wir benötigen die Möglichkeit die Daten für den Aufbau einer Verbindung zu einem ESP Controller einzugeben und eine Navigationsleiste zum aufrufen von neuen Seiten in der App.

Erzeugen wir also zunächst unser Menüelement, dazu klicken wir auf das Projekt und wählen aus dem Kontextmenü aus dem Pfad „New“ > „Activity“ > „Navigation Drawer Activtiy“, oder aber aus der „Gallery“.

Navigation Drawer Activtiy
Navigation Drawer Activtiy

Nachdem wir nun einen doppelklick auf diesen Eintrag vorgenommen haben müssen wir im neuen Dialog einige Einstellungen vornehmen. Zuerst ändern wir die Bezeichnung in „NavigationActivity“ und setzen den Haken bei „Launcher Activity“.

Daten "Navigation Drawer Actitivy"
Daten „Navigation Drawer Actitivy“

Nun wird AndroidStudio einige neue Dateien erstellen und das Projekt neu bauen, dieses kann je nach Rechenleistung etwas dauern.

Ist der Vorgang abgeschlossen so können wir das Projekt auf dem mobilen Gerät deployen. Wir sehen nach dem erfolgreichen starten dann eine leere Seite mit dem Titel „NavigationActivity“ und rechts und links jeweils ein Menüpunkt.

neue leere Seite für Navigation in der App
neue leere Seite für Navigation in der App

Klickt man nun auf den linken Menüpunkt so wird eine Menüleiste eingeblendet.

neue Navigationsleiste für den Aufruf von Funktionen
neue Navigationsleiste für den Aufruf von Funktionen

Ändern der Icons

Jedoch haben wir nun 2 Icons für unsere App auf dem Homescreen erzeugt. Einmal mit dem Einstiegspunkt zu unserer „alten“ Activity und einmal zu unserer neuen.

AppIcons ESPTutorialApp
AppIcons ESPTutorialApp

Um hier nur ein Icon als Einstiegspunkt in unsere App zu haben müssen wir die Datei „AndroidManifest.xml“ anpassen. Wir sollten hier 2 Activitys deklariert haben, einmal unsere neue „NavigationActivity“ und einmal die „alte“ MainActivity. Um nur ein Icon zu haben müssen wir lediglich den gesamten Tag zu „.MainActivity“ entfernen.

Nun heißt die App auf unserem Homescreen jedoch „NavigationA…“ das ist natürlich sehr unschön. Es sollte also zusätzlich das Attribut „android:label“ in „@string/app_name“ geändert werden.

Nun haben wir nur ein Icon auf unserem Homescreen. Auf meinem Handy wird das Icon rund dargestellt, je nach verwendetem Gerät & Android Version kann dieses abweichen. Hier sollte beachtet werden, wenn die App verteilt wird das andere Geräte ggf. andere Icons benötigen.

Menüpunkte verwalten

Die Menüpunkte werden in der Datei „activity_navigation_drawer.xml“ verwaltet. Hier werden wir nun etwas einkürzen denn wir benötigen z.Zt. nur die Menüpunkte:

  • Fotowiderstand
  • Impressum
  • Datenschutzerklärung

Auswahl eines neuen Icons

Als Icon für den Menüeintrag können wir einmal aus dem Pool von „android:drawable/*“ wählen.

Neues Icon für einen Menüeintrag wählen
Neues Icon für einen Menüeintrag wählen

Oder aber man wählt aus einem „Asset“

Vector Asset erstellen

Ein Vector Asset erstellt man indem man das Projekt wählt und mit der rechten Maustaste das Kontextmenü öffnet, dort wählt man aus dem Pfad „New“ > „Vector Asset“.

In dem neuen Dialog tätigt man einen Doppelklick auf den „Androidrobot“.

Vector Asset erstellen
Vector Asset erstellen

Es wird sich nun ein neues Fenster öffnen wo man links eine Kategorie wählen und recht ein Bild auswählen kann.

Auswahl eines Vector Assets
Auswahl eines Vector Assets

Hat man eine Grafik seiner Wahl gefunden so tätigt man auf dieser einen einfachen Klick und betätigt die Schaltfläche „OK“ nun kehren wir in den Dialog „Asset Studio“ zurück, hier können wir nun den Dateinamen, sowie die Farbe anpassen.

Vector Asset gewählt, Einstellungen setzen
Vector Asset gewählt, Einstellungen setzen

Wenn alle nötigen Einstellungen getroffen wurden so werden diese mit der Schaltfläche „Next“ bestätigt. Im nächsten Dialog wird nun lediglich angezeigt in welchem Verzeichnis diese neue Datei abgelegt wird.

Möchten wir diese nun in unserem Menü verwenden so wird in der XML Datei auf den Dateinamen wifolgt verwiesen:

Dieses machen wir nun für alle weiteren Menüpunkte.

Alte Referenzen entfernen

Bevor wir uns jedoch das neue Menü live in der App anschauen können, müssen wir noch die alten Referenzen auf die gelöschten Menüpunkte entfernen bzw auf die neuen Umschreiben. Dazu öffnen wir die Klasse „NavigationActivity“ und bearbeiten die Funktion „onNavigationItemSelected“ wie folgt:

Zwischen den geschweiften Klammern schreiben wir später unseren Code um den Seitenwechsel zu vollziehen.

Wenn wir also nun die App einmal bauen und starten so sollte unser Menü nun wiefolgt aussehen:

Neues Navigationsmenü in der ESPTutorialApp
Neues Navigationsmenü in der ESPTutorialApp

Ich habe hier zusätzlich noch das Icon & die E-Mail Adresse angepasst. Wenn du dieses auch machen möchtest so kannst du die E-Mail Adresse in der Datei „strings.xml“ im Ordner „app“ > „res“ > „values“ ändern. Als Bild kannst du jedes Bild nutzen, jedoch darf der Dateiname keine große Buchstaben enthalten. Das Bild selber wird im Ordner „app“ > „res“ > „drawable“ abgelegt. Dieses kannst du per Drag’n Drop einfach hineinziehen oder aber über den Explorer deines Betriebssystems. Wenn das Bild abgelegt wurde muss noch die Datei „nav_header_navigation.xml“ angepasst werden, hier gibt es einmal die Möglichkeit die Änderungen über die XML Ansicht zu vollziehen oder aber auch über ein Menü.

Anpassen des Bildes im Navigationmenü
Anpassen des Bildes im Navigationmenü

Neben dem Bild ist noch genügend Platz für weitere Informationen, hier könnte man ggf. noch Versions & Build Nummern anzeigen lassen. Wie man dieses macht erläutere ich in einem weiteren Kapitel.

Werbung

Download

Fazit & Ausblick

Wir haben nun unsere App erweitert so das wir ein Seiten Navigationsmenü haben. Als nächstes wollen wir nun die Aktion für den Menüpunkt „fotoresistor“ ausprogrammieren.

Werbung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Werbung