Start Magazin Workshop: Einstieg in die Android-Programmierung mit Android Wear – Teil 2

Workshop: Einstieg in die Android-Programmierung mit Android Wear – Teil 2

Wir machen eine Produktivitäts-App, die dich in regelmäßigen Abständen an die Uhrzeit erinnert. Dies kann zum Beispiel hilfreich sein, weil die Zeit nicht “wie im Flug” vorüber geht, sondern du immer einen Überblick hast, wie viel Zeit vergangen ist, und was du in der vergangenen Zeit erreicht (oder eben nicht erreicht) hast. Damit lässt sich effektiver Arbeiten, als mit einer gewöhnlichen Uhr.

Im ersten Teil haben wir beschrieben, wie du die grundlegende App programmierst. Teil 1 dieses Workshops findest du hier auf der Android User Webseite und in der aktuellen Ausgabe #06 von Android Power User. Im zweiten Teil geht es nun darum den Wear-Teil der App zu programmieren, der dafür verantwortlich ist, dass die Infos auch auf der Android-Uhr ankommen.

Das Layout der Wear App

Wir haben ein Problem. Ein Problem, vor dem Android-Entwickler grundsätzlich stehen: Es gibt (zu?) viele Geräte – große, kleine, hochauflösende, niedrig-auflösende, … und bei Smartwatches leider auch noch: eckige und runde. Wenn man ein ganz normales Layout erstellt, wie man es gewohnt ist, stolpert man zwingend über das Problem, dass das Design auf (mindestens) einer der zwei Uhr-Typen nicht gut aussieht:

Was auf einem viereckigen Display noch passt, sieht auf einem runden nicht mehr so toll aus...  Bildquelle: developer.android.com
Was auf einem viereckigen Display noch passt, sieht auf einem runden nicht mehr so toll aus…
Bildquelle: developer.android.com

Google hat hierfür allerdings eine halbwegs komfortable Lösung eingeführt: WatchViewStubs als Teil der noch leicht inoffiziellen Wearable UI Library. Man erstellt quasi zwei Layouts, eines für rechteckige, eines für runde Uhren, und die App inflated zur Laufzeit der Applikation dann das richtige Layout. Das machen wir in unserer Wear-App nun auch so.

Unsere App erinnert dich jede Stunde, dass wieder etwas Zeit vergangen ist.
Unsere App erinnert dich jede Stunde, dass wieder etwas Zeit vergangen ist.

Die Layout-Dateien der Wear-App findest du im wear Modul: /wear/src/main/res/layout/. Es sind drei Dateien: activity_wear, rect_activity_wear und round_activity_wear.

In activity_wear ist einfach nur die WatchViewStub enthalten, mit der Angabe, welche Layouts sie zu laden hat: app:rectLayout="@layout/rect_activity_wear" und app:roundLayout="@layout/round_activity_wear". In den beiden anderen Layouts definieren wir uns zwei TextViews und den Switch zum de-/aktivieren. Großartig unterscheiden tun die zwei sich nicht – primär sind nur die Margins angepasst.

Wenn die App jetzt auf einer runden Uhr gestartet wird, wird automatisch das runde Layout, bei einer eckigen das eckige Layout geladen.

Auch hier gibt es natürlich viel Spielraum, wie ihr die Oberfläche ändern könnt. So ließe sich grundsätzlich das Design aufhübschen oder vielleicht die zwei TextViews animieren oder ähnliches. In diesem Fall hätte sich für das Layouting auch ein einzelnes BoxInsetLayout gelohnt, anstelle der zwei extra Layouts. Wie das ginge, steht zum Beispiel in der Dokumentation auf den Android-Entwicklerseiten. Spielt einfach ein wenig damit rum.

Quellcode zum Workshop: Den Source Code zum Projekt findest du auf Github unter der URL: https://github.com/mammuth/Time-Reminder-Wear-App

WearActivity

Kommen wir nun zu der App, die direkt auf der Uhr laufen soll. Hier erstellen wir nur eine Activity, die dann die Klassen unserer Smartphone-App verwendet, um den Timer zu de-/aktivieren.

In der onCreate() der WearActivity setzen wir zunächst das eben definierte Layout der Activity: setContentView(R.layout.activity_wear); (Merke, dass wir hier das WatchViewStub als ContentView setzen). In Zeile 38ff erstellen wir anschließend ein WatchViewStub und registrieren einen onLayoutInflated() Listener auf ihm. Wenn das Layout geladen wird, initalisieren wir den Switch in der Activity (Zeile 43). Zu beachten ist, dass wir die Methode findViewById() auf dem WatchViewStub ausführen.

Zuvor haben wir noch, wie gewohnt in Zeile 30 den GoogleApiClient initialisiert.

Nachdem wir den Switch initialisiert haben, laden wir noch die Einstellungen über die DataApi mit der MethodegetEinstellungen()

Woher wissen wir, wann der Nutzer den Toogle-Button in unserer Wear App gedrückt hat? Wie immer nehmen wir auch hier einen Listener, und registrieren auf unseren toggleButton einen onCheckedChangeListener (Zeile 49).

 

Nun fehlt noch die Synchronisation mit der Handy-App:

wear_send-message

 

Wenn der Nutzer auf den Button klickt, wird wie wir es bereits kennen die Methode onCheckedChanged() aufgerufen. Hier nutzen wir nun die DataApi um eine Message zu erstellen, die dann an das Handy geschickt wird. Hierzu fragen wir alle verfügbaren Nodes ab und warten auf das Ergebnis (Zeile 56f). Haben wir eine Liste aller Nodes, so gehen wir diese durch und senden die gewünschte Message: /START_ERINNERUNG oder /ENTFERNE_ERINNERUNG.

Diese Message wird in der Smartphone App in der Klasse WearSchnittstelle empfangen; daraufhin wird der Alarm beim Android AlarmManager gelöscht oder gesetzt, wie oben in Punkt 5. erörtert.

Es hat sich der Status der App geändert – also müssen wir noch die Einstellungen in die DataApi sichern und rufen hierzu unsere Methode schreibe Einstellungen(boolean enabled) mit dem isChecked() Status des Buttons auf.

 

App auf Handy und Uhr laufen lassen

Um die App von Android Studio auf die Uhr zu laden ist ein klein wenig Vorarbeit nötig. Die Idee dahinter ist, die Uhr mit Bluetooth mit dem Handy zu verbinden, das Handy ist währenddessen via USB an den PC angeschlossen. Als Ziel soll der PC mit der Uhr über USB mit dem Handy und dann über Bluetooth mit der Uhr kommunizieren und vice versa.

Um Debugging zu aktivieren muss nun folgendes gemacht werden:

  1. Aktiviere USB Debugging auf dem Handy
    1. Gehe in die Einstellungen und suche ganz unten nach Entwickler Einstellungen
    2. Sollte der Eintrag nicht vorhanden sein, gehe zu Über das Telefon und drücke ein paar mal auf die Build Number. Gehe zurück und zu den jetzt erschienenen Developer Options.
    3. Aktiviere den Eintrag USB Debugging
  2. Aktiviere Bluetooth Debugging auf der Uhr.
    1. Dies geht ebenso in den Entwickler Einstellungen in dem Settings Screen.
    2. Den Settings Screen erreicht man, indem doppelt auf den Homescreen getippt wird.
    3. Sollten die Developer Options nicht vorhanden sein, wiederhole obiges Spiel mit der Build Number
    4. Aktiviere Debugging über Bluetooth

In den Einstellungen der Android Wear App auf dem Handy muss noch Debugging über Bluetooth aktiviert werden. Der Status hierbei lautet jetzt Host: disconnected, Target: connected. Nun sind die Voraussetzungen erfüllt.

Als nächstes müssen wir eine “Weiterleitung” zwischen der Uhr und dem Handy herstellen. Hierzu müssen wir in einem Terminal zwei adb (Android Debug Bridge) Befehle ausführen.

Die Android Debug Bridge funktioniert nicht nur über das USB-Kabel.
Die Android Debug Bridge funktioniert nicht nur über das USB-Kabel.

 

Navigiere mit cmd (für Windows. Erreichbar via Win-Taste + R und dann cmd starten) in das Verzeichnis, wo das Android-SDK gespeichert ist und anschließend in den Ordner platform-tools (Linux und Mac Nutzer nehmen einfach die gewohnte Shell). Wenn ihr Android Studio installiert habt, sollte sich der SDK Ordner innerhalb des Installations-Ordners befinden. In diesem Verzeichnis liegt das Executable von adb.

Der Befehl zum Navigieren lautet bei allen Betriebssysteme cd "/pfad/zum/ordner" (in Windows mit einem C:\ bzw. dem entsprechenden Laufwerksbuchstaben davor).

Nun führen wir hinterinander die folgenden zwei Befehle aus:
adb forward tcp:4444 localabstract:/adb-hub
adb connect localhost:4444

Der Bluethooth Debugging Status in der Android Wear App sollte sich jetzt geändert haben: Host: connected, Target: connected

Ab jetzt könnt ihr Befehle direkt auf der Uhr ausführen, indem ihr -e als Parameter an adb übergebt (übrigens: diese Kurzschreibweise klappt nur, wenn keine Android-Emulatoren zeitgleich laufen).

Beispiel: adb -e logcat um in Echtzeit den Logcat der Uhr zu sehen.
(Für Linux/Mac User: Es lohnt sich die Ausgabe nach einem Teil des Packagenamens zu filtern: ./adb -e logcat | grep de.mammuth.)

Um die App jetzt auf die Uhr zu deployen, öffnet ihr die WearActivity im Wear-Modul, macht einen Rechtsklick und wählt Run ‘WearActivity’ .

Es erscheint der gewohnte Dialog zur Geräteauswahl und hier wird die Uhr ausgewählt. Die Verbindung ist etwas langsam, habt also Geduld, bzw. beobachtet den Fortschritt in der Console von Studio.

 

 

Zum Abschluss wird die App auf der Android-Uhr installiert.
Zum Abschluss wird die App auf der Android-Uhr installiert.

Referenz hierzu auf developer.android.com

 

9. Weiterentwicklung & Optimierungsmöglichkeiten

Die App ist an einigen Stellen absichtlich vereinfacht oder zu Gunsten der Verständlichkeit teils nicht optimal programmiert. Auch gibt es einige naheligenden Erweiterungen, die getroffen werden können, wovon ich hier ein paar nennen möchte, sodass die Möglichkeit besteht, selbst ein bisschen weiterzubasteln.

  1. Einstellung für Erinnerungsintervall
    1. Die App ist aktuell hardgecoded, dass sie alle 60 Minuten erinnert. Hier sollte man mehrere Zeiten anbieten, wie 30 Minuten oder 2 Stunden. Die Methode getErstenAlarm() in der Klasse ErinnerungVerwalter enthält schon die Anpassung für 30 Minuten.
    2. Wenn hier etwas geändert werden soll, muss sich überlegt werden, was alles angepasst werden muss. So ist es zB. primär das Speichern der Einstellungen, das überarbeitet werden muss.
    3. Von der Benutzung her würde ich vorschlagen, dass die Wear App nach wie vor nur de-/aktivieren kann, und man das Intervall am Handy einstellt. Hier eignen sich zB. RadioButtons für 2-3 Intervalle.
  2. Design
    1. Du solltest ein Hintergrundbild oder zumindest eine Farbe einbauen und die Settings in Google Now ähnliche „Cards“ verpacken. Dadurch sieht das Ganze gleich um Welten besser aus.
    2. Um eine solche Card zu erstellen, reicht es ein Layout zu definieren, das um die gewünschten Card Elemente herum ist, und dieses mit ein paar Attributen anzupassen. Am einfachsten ist es, den Background des Layouts auf diese Drawable zu setzen, die ich vorbereitet habe. (Hierfür gibt es ab Android 5 übrigens auch extra Views wie die CardViewhttps://developer.android.com/training/material/lists-cards.html)
    3. Das Design der Wear App kann optimiert werden, indem man einen hübscheren Toggle Button erstellt. Auch sollte man ein BoxInsetLayout verwenden, statt der zwei separaten Layout-Dateien.
  3. Die Notifications können verschönert werden, indem man ein bigBackgroundImage setzt, welches auf der Uhr dann unter der Notification angezeigt wird.
  4. Animationen. Je nachdem, was zuvor schon gemacht wurde, können Views animiert werden. Wenn man in der Handy App zB. mehrere RadioButtons hat – warum lässt man diese nicht leicht einfaden oder ähnliches: https://developer.android.com/guide/topics/graphics/view-animation.html

Hat dir der Workshop gefallen? Dann freuen wir uns über Rückmeldung via redaktion@android-user.de und eine Bewertung bei Laterpay!

Danke, dass du diesen Artikel gekauft hast! Falls du beim Nachprogrammieren auf Probleme stoßen solltest, erreichst du die Redaktion per Mail an redaktion@android-user.de. Bitte in der E-Mail als Betreff den Support-Code: 74089 angeben.

Kommentiere den Artikel

Please enter your comment!
Please enter your name here