Ein eigenes Widget erstellen
Diese Anleitung zeigt, wie ein einfaches eigenes Widget erstellt werden kann, welches die aktuelle Uhrzeit und den aktuellen Akku Ladestand anzeigt.
Das Widget wird die Uhr-App öffnen, wenn man den oberen Bereich des Widgets berührt und wird die Akkuverbrauch-Statistik anzeigen, wenn man den unteren Bereich berührt.
Das Widget wird die Uhr-App öffnen, wenn man den oberen Bereich des Widgets berührt und wird die Akkuverbrauch-Statistik anzeigen, wenn man den unteren Bereich berührt.
Schritt 1 - Ein neues Eigenes Widget erstellen
Drücke den markierten Knopf, um das Menü zu öffnen.
Wähle Eigene Widgets um die Liste der eigenen Widgets zu öffnen.
Die Liste der Widgets ist im Moment noch leer, da noch keine Widgets existieren. Drücke den Plus-Knopf unten rechts, um ein neues Widget zu erstellen.
Das Widget besteht zu Beginn aus einem leeren, halb transparenten Hintergrund mit abgerundeten Ecken.
In der unteren Hälfte wird das ausgewählte Element in einem Dropdown angezeigt. Das Dropdown enthält zu Beginn den Namen des Widgets, da das gesamte Widget ausgewählt ist.
Die Bereiche Widget Einstellungen und Klickbare Actions sind Einstellungsgruppen, welche allgemeine Einstellungen zum Widget enthalten. Einstellungsgruppen können mit einer Berührung auf- und zugeklappt werden.
Wir werden nun ein Textelement hinzufügen, um die aktuelle Uhrzeit auf dem Widget anzuzeigen.
Drücke den Knopf Element hinzufügen in der Actionbar um ein neues Element zu erstellen.
In der unteren Hälfte wird das ausgewählte Element in einem Dropdown angezeigt. Das Dropdown enthält zu Beginn den Namen des Widgets, da das gesamte Widget ausgewählt ist.
Die Bereiche Widget Einstellungen und Klickbare Actions sind Einstellungsgruppen, welche allgemeine Einstellungen zum Widget enthalten. Einstellungsgruppen können mit einer Berührung auf- und zugeklappt werden.
Wir werden nun ein Textelement hinzufügen, um die aktuelle Uhrzeit auf dem Widget anzuzeigen.
Drücke den Knopf Element hinzufügen in der Actionbar um ein neues Element zu erstellen.
Die Liste der verfügbaren Elementtypen wird nun angezeigt.
Wähle Text um ein Element zu erstellen, welches einen einzeiligen oder einen mehrzeiligen Text anzeigen kann.
Wähle Text um ein Element zu erstellen, welches einen einzeiligen oder einen mehrzeiligen Text anzeigen kann.
Das neue Textelement wird in der oberen linken Ecke des Widgets platziert und enthält initial den statischen Text Text1.
Ein Element kann mittels Drag & Drop auf dem Widget verschoben werden. Das Element kann durch Ziehen in der unteren rechten Ecke vergrössert oder verkleinert werden.
Da jedes Element eines Widgets verschiedene Einstellungen beinhalten kann, werden bei jedem Elementtypen unterschiedliche Einstellungsgruppen angezeigt.
Ein Textelement enthält folgende Einstellungsgruppen:
Ein Element kann mittels Drag & Drop auf dem Widget verschoben werden. Das Element kann durch Ziehen in der unteren rechten Ecke vergrössert oder verkleinert werden.
Da jedes Element eines Widgets verschiedene Einstellungen beinhalten kann, werden bei jedem Elementtypen unterschiedliche Einstellungsgruppen angezeigt.
Ein Textelement enthält folgende Einstellungsgruppen:
- Bounds: um die Position, Grösse und Rotation zu verändern
- Text: um den angezeigten Text, Schriftart, Ausrichtung etc. zu verändern
- Füllung: um die Farbe und den Schatten der Füllung zu verändern
- Umriss: um die Farbe, die Linienbreite und den Schatten des Umrisses zu verändern
Verschiebe das Textelement ungefähr in die Mitte des oberen Bereiches des Widgets. Die Position kann auch in der Einstellungsgruppe Bounds durch Eingabe eines Wertes oder über die Pfeil-Knöpfe präzise eingestellt werden.
Da das Textelement keinen statischen Text, sondern dynamisch die aktuelle Uhrzeit anzeigen soll, müssen wir einen Inline-Ausdruck verwenden. Man kann auch den [...]-Knopf verwenden, um den Ausdruck aus einer vordefinierten Liste auszuwählen.
Die Funktion getDate liefert die aktuelle Uhrzeit zurück.
dateformat weist Automagic an, den Wert als Datum zu formatieren.
HH:mm weist Automagic an, das 24-Stundenformat für die Formatierung zu verwenden. Man könnte auch das Format hh:mm a verwenden, um die Zeit im 12-Stundenformat mit AM/PM darzustellen.
Der Inline-Ausdruck wird durch Automagic in der Widget-Designansicht direkt ausgewertet und angezeigt.
Da das Textelement keinen statischen Text, sondern dynamisch die aktuelle Uhrzeit anzeigen soll, müssen wir einen Inline-Ausdruck verwenden. Man kann auch den [...]-Knopf verwenden, um den Ausdruck aus einer vordefinierten Liste auszuwählen.
Die Funktion getDate liefert die aktuelle Uhrzeit zurück.
dateformat weist Automagic an, den Wert als Datum zu formatieren.
HH:mm weist Automagic an, das 24-Stundenformat für die Formatierung zu verwenden. Man könnte auch das Format hh:mm a verwenden, um die Zeit im 12-Stundenformat mit AM/PM darzustellen.
Der Inline-Ausdruck wird durch Automagic in der Widget-Designansicht direkt ausgewertet und angezeigt.
Um den aktuellen Ladestand des Akkus anzuzeigen, benötigen wir ein zweites Textelement.
Drücke erneut Element hinzufügen in der Actionbar um ein weiteres Textelement zu erstellen. Verschiebe das Textelement in den unteren Bereich des Widgets und verwende den Text {global_battery_level}.
Dieser Ausdruck weist Automagic an, den Inhalt der globalen Variable global_battery_level anzuzeigen.
Da die Variable im Moment noch nicht existiert, wird der Wert null angezeigt.
Drücke erneut Element hinzufügen in der Actionbar um ein weiteres Textelement zu erstellen. Verschiebe das Textelement in den unteren Bereich des Widgets und verwende den Text {global_battery_level}.
Dieser Ausdruck weist Automagic an, den Inhalt der globalen Variable global_battery_level anzuzeigen.
Da die Variable im Moment noch nicht existiert, wird der Wert null angezeigt.
Automagic aktualisiert ein Widget nur, wenn eine Veränderung einer globalen Variable, die auf dem Widget verwendet wird, erkannt wird oder wenn ein Element modifiziert wird. Da beim Textelement mit der Uhrzeit keiner dieser Fälle zutrifft, muss Automagic explizit angewiesen werden, das Widget minütlich zu aktualisieren.
Wähle das Widget in der Dropdownliste aus oder berühre eine freie Stelle in der Designansicht um das Widget auszuwählen.
Klappe die Einstellungsgruppe Widget Einstellungen auf.
Aktiviere Automatisch aktualisieren und stelle ein Aktualisierungsintervall von einer Minute ein.
Drücke die Zurück-Taste um die Widget-Designansicht zu verlassen und zur Widgetliste zurückzukehren.
Wähle das Widget in der Dropdownliste aus oder berühre eine freie Stelle in der Designansicht um das Widget auszuwählen.
Klappe die Einstellungsgruppe Widget Einstellungen auf.
Aktiviere Automatisch aktualisieren und stelle ein Aktualisierungsintervall von einer Minute ein.
Drücke die Zurück-Taste um die Widget-Designansicht zu verlassen und zur Widgetliste zurückzukehren.
Öffne das Widgetmenü und wähle Umbenennen und benenne das Widget auf Info Widget um.
Drücke die Zurück-Taste um zur Flowliste zurückzukehren.
Drücke die Zurück-Taste um zur Flowliste zurückzukehren.
Schritt 2 - den Akku-Ladestand aktualisieren
In diesem Schritt werden wir einen Flow erstellen, welcher die angezeigte globale Variable mit dem aktuelle Ladestand des Akkus aktualisiert.
Erstelle dazu einen neuen Flow mit einem Trigger Akku Ladestand.
Erstelle dazu einen neuen Flow mit einem Trigger Akku Ladestand.
Konfiguriere den Trigger wie im Screenshot gezeigt.
Dieser Trigger wird den Flow ausführen, wenn sich der Ladestand des Akkus verändert und wird den neuen Wert in der lokalen Variable battery_level dem Flow zur Verfügung stellen.
Bitte aktiviere auch die beiden Checkboxen im Filter, da einige Geräte den Flow sonst sehr oft ausführen, wenn der Akku geladen wird.
Dieser Trigger wird den Flow ausführen, wenn sich der Ladestand des Akkus verändert und wird den neuen Wert in der lokalen Variable battery_level dem Flow zur Verfügung stellen.
Bitte aktiviere auch die beiden Checkboxen im Filter, da einige Geräte den Flow sonst sehr oft ausführen, wenn der Akku geladen wird.
Nun müssen wir den Akku Ladestand, der in der lokalen Variable battery_level verfügbar ist, in die globale Variable global_battery_level übertragen, welche vom Widget angezeigt wird.
Füge dazu eine Action Script dem Flow hinzu.
Füge dazu eine Action Script dem Flow hinzu.
Konfiguriere die Action Script wie auf dem Screenshot ersichtlich ist.
Das Script global_battery_level = battery_level + "%" liest den Wert der lokalen Variable aus, hängt ein Prozentzeichen an und speichert den resultierenden String in der globalen Variable global_battery_level.
Die globale Variable global_battery_level wird einen Wert wie 65% enthalten, wenn der Flow ausgeführt wurde. Das Widget wird den Inhalt der globalen Variable anzeigen, da wir im Textelement den Ausdruck {global_battery_level} verwenden.
Das Script global_battery_level = battery_level + "%" liest den Wert der lokalen Variable aus, hängt ein Prozentzeichen an und speichert den resultierenden String in der globalen Variable global_battery_level.
Die globale Variable global_battery_level wird einen Wert wie 65% enthalten, wenn der Flow ausgeführt wurde. Das Widget wird den Inhalt der globalen Variable anzeigen, da wir im Textelement den Ausdruck {global_battery_level} verwenden.
Der fertige Flow sollte wie auf dem Screenshot dargestellt aussehen.
Schritt 3 - das Widget auf einem Home-Screen platzieren
In diesem Schritt, werden wir das Widget auf einem Home-Screen des Launchers platzieren.
Abhängig vom Gerät, Hersteller und der Android-Version, kann man Widgets auf dem Home-Screen hinzufügen, indem man eine freie Stelle des Home-Screens gedrückt hält und Widgets auswählt.
Das Widget sollte ungefähr dem Widget auf dem Screenshot entsprechen. Das Widget wird einmal pro Minute oder wenn sich der Akku Ladestand verändert aktualisiert.
Schritt 4 - klickbare Actions hinzufügen
In diesem Schritt werden wir das Widget um klickbare Actions erweitern.
Das Widget wird die Uhr-App des Geräts öffnen, wenn man den oberen Bereich des Widgets berührt, oder die Zusammenfassung des Akkuverbrauchs, wenn man den unteren Bereich berührt.
Das Widget wird die Uhr-App des Geräts öffnen, wenn man den oberen Bereich des Widgets berührt, oder die Zusammenfassung des Akkuverbrauchs, wenn man den unteren Bereich berührt.
Öffne das Widget (Menü->Eigene Widgets, dann wähle dein Info Widget).
Klappe die Einstellungsgruppe Klickbare Actions auf und füge mit dem [+]-Knopf zwei Zeilen hinzu.
Das Layout der klickbaren Actions wird auch im Designbereich des Widgets mit einer schwachen blauen Farbe dargestellt. Bitte lese auch die Kurzanleitung für weitere Informationen zum Verhalten der klickbaren Actions auf dem Home-Screen.
Indem eine der zwei blauen Felder gedrückt wird, wird der Dialog zur Auswahl einer Action angezeigt. Du kannst entweder eine bereits vorhandene Action auswählen oder eine neue Action erstellen.
Klappe die Einstellungsgruppe Klickbare Actions auf und füge mit dem [+]-Knopf zwei Zeilen hinzu.
Das Layout der klickbaren Actions wird auch im Designbereich des Widgets mit einer schwachen blauen Farbe dargestellt. Bitte lese auch die Kurzanleitung für weitere Informationen zum Verhalten der klickbaren Actions auf dem Home-Screen.
Indem eine der zwei blauen Felder gedrückt wird, wird der Dialog zur Auswahl einer Action angezeigt. Du kannst entweder eine bereits vorhandene Action auswählen oder eine neue Action erstellen.
Füge eine Action App Starten: com.google.android.deskclock in das erste Feld ein, damit die Uhr-App angezeigt wird, wenn der obere Bereich des Widgets berührt wird. Das Package der Uhr-App heisst auf anderen Android-Versionen anders.
Füge eine Action App Starten: com.android.settings/
Du kannst jede beliebige Action in einem Widget verwenden. Es ist auch möglich eine Action Flows ausführen zu verwenden, um einen kompletten Flow mit mehreren Actions und Conditions auszuführen.
Gehe zurück auf den Home-Screen mit dem Widget und drücke auf das Widget, um die klickbaren Actions auszuprobieren.
Füge eine Action App Starten: com.android.settings/
Du kannst jede beliebige Action in einem Widget verwenden. Es ist auch möglich eine Action Flows ausführen zu verwenden, um einen kompletten Flow mit mehreren Actions und Conditions auszuführen.
Gehe zurück auf den Home-Screen mit dem Widget und drücke auf das Widget, um die klickbaren Actions auszuprobieren.
Tipps
Automagic erlaubt es beinahe jeden Aspekt eines Widgetelementes durch Scripts zu verändern. Diese Methode kann auch verwendet werden, um den Akku Ladestand im Widget zu aktualisieren, ohne eine globale Variable zu verwenden.
Öffne dazu die Action Script, welche wir in diesem Tutorial erstellt haben und drücke den Knopf Funktion um alle verfügbaren Funktionen von Automagic aufzulisten. Scrolle nach unten und wähle die Funktion setWidgetElementProperty.
Automagic zeigt nun den Dialog Widget Property indem das Widget, das Element und die zu verändernde Einstellung ausgewählt werden kann.
Wähle das Info Widget und das Textelement aus, welches den Akku Ladestand anzeigt.
Das Element heisst vermutlich Text_2, wenn dem Element kein anderer Name zugewiesen wurde. Wähle die Einstellung text und ändere den Wert von {global_battery_level} auf {battery_level}% und bestätige mit OK.
Das Script sollte ungefähr wie folgt aussehen: setWidgetElementProperty
Da das Widget und die Elemente über den Namen referenziert werden, sollten die Elemente sinnvoll benannt werden, bevor man beginnt ein komplexes Script zu schreiben.
Diese Methode ein Widget zu verändern ist sehr flexibel, da man damit sehr Vieles erreichen kann. Zum Beispiel:
Öffne dazu die Action Script, welche wir in diesem Tutorial erstellt haben und drücke den Knopf Funktion um alle verfügbaren Funktionen von Automagic aufzulisten. Scrolle nach unten und wähle die Funktion setWidgetElementProperty.
Automagic zeigt nun den Dialog Widget Property indem das Widget, das Element und die zu verändernde Einstellung ausgewählt werden kann.
Wähle das Info Widget und das Textelement aus, welches den Akku Ladestand anzeigt.
Das Element heisst vermutlich Text_2, wenn dem Element kein anderer Name zugewiesen wurde. Wähle die Einstellung text und ändere den Wert von {global_battery_level} auf {battery_level}% und bestätige mit OK.
Das Script sollte ungefähr wie folgt aussehen: setWidgetElementProperty
Da das Widget und die Elemente über den Namen referenziert werden, sollten die Elemente sinnvoll benannt werden, bevor man beginnt ein komplexes Script zu schreiben.
Diese Methode ein Widget zu verändern ist sehr flexibel, da man damit sehr Vieles erreichen kann. Zum Beispiel:
- ändern der Hintegrundfarbe des Widgets auf Rot, wenn der Ladestand unter 30% fällt
- ändern eines Bildes in einem Bildelement abhängig von der Tageszeit von einer Sonne auf einen Mond
- schrittweise die Breite eines Rechteckes anpassen, um den Ladestand als grafischen Balken darzustellen
- ändern des Öffnungswinkels einer Ellipse/Bogens um den Ladestand als Kuchen darzustellen
- die Zeiger einer analogen Uhr nachahmen, indem ein dünnes Rechteckelement rotiert wird
- zwischen zwei Bildern umschalten, wenn eine Einstellung verändert wird
- den Kontaktnamen eines verpassten Anrufes anzeigen
- die Schattenposition eines Textelementes abhängig von der Tageszeit ähnlich einer Sonnenuhr verändern
Ein Widget sollte so selten wie möglich verändert werden, da der Aktualisierungsprozess relativ komplex ist. Der Akkuverbrauch könnte hoch werden, wenn ein Widget alle 5 Sekunden aktualisiert wird.