App-Widgets (manchmal auch nur „Widgets“) sind eine Funktion, die in Android 1.5 eingeführt und in Android 3.0 und 3.1 erheblich verbessert wurde. Mit einem Widget können aktuelle oder anderweitig relevante Informationen einer Anwendung auf einen Blick auf dem Startbildschirm eines Nutzers angezeigt werden. Das standardmäßige Android-System-Image enthält mehrere Widgets, darunter ein Widget für die analoge Uhr, Musik und andere Anwendungen.
Abbildung 1: Beispiele für App-Widgets unter Android 4.0
In diesem Dokument wird beschrieben, wie du ein Widget so konzipierst, dass es grafisch mit anderen Widgets und anderen Elementen des Android-Startbildschirms, z. B. Launcher-Symbolen und Tastenkombinationen, grafisch dargestellt wird. Außerdem werden einige Standards für Widget-Artwork beschrieben und Tipps und Tricks für Widget-Grafiken genannt.
Informationen zum Entwickeln von Widgets finden Sie im Entwicklerhandbuch im Abschnitt App-Widgets.
Aufbau eines Standard-Widgets
Typische Android-App-Widgets haben drei Hauptkomponenten: einen Begrenzungsrahmen, einen Frame sowie die grafischen Steuerelemente und anderen Elemente des Widgets. App-Widgets können einen Teil der View-Widgets in Android enthalten. Zu den unterstützten Steuerelementen gehören Textlabels, Schaltflächen und Bilder. Eine vollständige Liste der verfügbaren Ansichten finden Sie im Abschnitt App-Widget-Layout erstellen im Entwicklerhandbuch. Gut gestaltete Widgets lassen einige Ränder zwischen den Rändern des Begrenzungsrahmens und dem Frame sowie einen Abstand zwischen den inneren Rändern des Frames und den Steuerelementen des Widgets.
Abbildung 2: Widgets haben in der Regel Ränder zwischen dem Begrenzungsrahmen und dem Frame sowie einen Abstand zwischen dem Frame und den Widget-Steuerelementen.
Hinweis: Ab Android 4.0 erhalten App-Widgets automatisch Ränder zwischen dem Widget-Frame und dem Begrenzungsrahmen des App-Widgets, um eine bessere Übereinstimmung mit anderen Widgets und Symbolen auf dem Startbildschirm des Nutzers zu schaffen. Legen Sie die targetSdkVersion Ihrer Anwendung auf 14 oder höher fest, um von diesem dringend empfohlenen Verhalten zu profitieren.
Widgets, die optisch zu anderen Widgets auf dem Startbildschirm passen, werden zur Ausrichtung von den anderen Elementen auf dem Startbildschirm übernommen. Sie verwenden auch standardmäßige Schattierungseffekte. All diese Details werden auf dieser Seite beschrieben.
Bestimmen einer Größe für das Widget
Für jedes Widget muss ein minWidth und ein minHeight definiert werden, um anzugeben, wie viel Platz es standardmäßig einnehmen soll. Wenn Nutzer ihrem Startbildschirm ein Widget hinzufügen, belegt es in der Regel mehr als die von Ihnen angegebene Mindestbreite und -höhe. Android-Startbildschirme bieten Nutzern ein Raster mit verfügbaren Bereichen, in denen sie Widgets und Symbole platzieren können. Dieses Raster kann je nach Gerät variieren. Viele Mobilgeräte bieten beispielsweise ein 4 x 4-Raster und Tablets können ein größeres 8 x 7-Raster bieten. Wenn Sie das Widget hinzufügen, wird es so gestreckt, dass es die Mindestanzahl von Zellen einnimmt, horizontal und vertikal, die zur Erfüllung der Einschränkungen minWidth und minHeight erforderlich ist. Wie im nachfolgenden Abschnitt Widget-Layouts und Hintergrundgrafiken entwerfen erläutert, kann die Verwendung von Hintergründen mit neun Patches und flexible Layouts für App-Widgets dazu beitragen, dass sich das Widget an das Raster des Startbildschirms des Geräts anpasst und so nutzerfreundlich und ästhetisch ansprechend bleibt.
Die Breite und Höhe einer Zelle sowie die Anzahl der auf Widgets angewendeten automatischen Ränder können je nach Gerät variieren. Anhand der folgenden Tabelle können Sie die Mindestmaße Ihres Widgets unter Berücksichtigung der gewünschten Anzahl belegter Rasterzellen ungefähr schätzen:
| Anzahl der Zellen (Spalten oder Zeilen) |
Verfügbare Größe (dp) ( minWidth oder minHeight) |
|---|---|
| 1 | 40dp |
| 2 | 110dp |
| 3 | 180dp |
| 4 | 250dp |
| … | … |
| n | 70 × n − 30 |
Es empfiehlt sich, konservativ mit minWidth und minHeight umzugehen und die Mindestgröße anzugeben, mit der das Widget in einem guten Standardzustand gerendert wird. Angenommen, Sie haben ein Musikplayer-Widget, in dem der aktuell wiedergegebene Songkünstler und sein Titel (vertikal gestapelt) angezeigt werden, die Schaltflächen Wiedergabe und Weiter:minWidthminHeight
Abbildung 3: Beispiel für ein Musikplayer-Widget
Die Mindesthöhe sollte der Höhe der beiden TextViews für den Künstler und Titel sowie einiger Textränder entsprechen. Die Mindestbreite sollte der verwendbaren Mindestbreite der Schaltflächen Wiedergabe und Weiter, der Mindesttextbreite (z. B. 10 Zeichen) und horizontalen Texträndern entsprechen.
Abbildung 4: Beispielgrößen und -ränder für minWidth/minHeight-Berechnungen Wir haben 144 dp als Beispiel
eine gute Mindestbreite für die Textlabels gewählt.
Beispielberechnungen:
minWidth= 144dp + (2 × 8dp) + (2 × 56dp) = 272dpminHeight= 48dp + (2 × 4dp) = 56dp
Wenn in deinem Widget-Hintergrund ein Innenrand von neun Patches vorhanden ist, solltest du minWidth und minHeight entsprechend hinzufügen.
Widgets mit anpassbarer Größe
Ab Android 3.1 kann die Größe von Widgets horizontal und/oder vertikal angepasst werden. minWidth und minHeight werden also praktisch zur Standardgröße für das Widget. Sie können die minimale Widgetgröße mit minResizeWidth und minResizeHeight angeben. Diese Werte sollten die Größe angeben, unter der das Widget unlesbar oder anderweitig unbrauchbar wäre.
Dies ist im Allgemeinen eine bevorzugte Funktion für Sammlungs-Widgets, z. B. solche, die auf ListView oder GridView basieren.
Ränder zum App-Widget hinzufügen
Wie bereits erwähnt, fügt Android 4.0 bei Apps, die eine targetSdkVersion von 14 oder höher angeben, automatisch an jedem Rand von Widgets auf dem Startbildschirm kleine Standardränder hinzu. So wird der Startbildschirm optisch ausgeglichen. Wir empfehlen daher, keine zusätzlichen Ränder außerhalb der Hintergrundform des App-Widgets in Android 4.0 hinzuzufügen.
Es ist einfach, ein einzelnes Layout zu schreiben, bei dem in früheren Versionen der Plattform benutzerdefinierte Ränder und keine zusätzlichen Ränder für Android 4.0 und höher angewendet werden. Informationen dazu, wie Sie dies mit Layout-XML erreichen, finden Sie im Entwicklerhandbuch unter Ränder zu App-Widgets hinzufügen.
Widget-Layouts und Hintergrundgrafiken entwerfen
Die meisten Widgets haben ein einfarbiges Hintergrundrechteck oder abgerundete Rechtecke. Es hat sich bewährt, diese Form mithilfe von neun Flecken zu definieren – eines für jede Bildschirmdichte. Weitere Informationen dazu findest du unter Unterstützung mehrerer Bildschirme. Neun Patches können mit dem Tool draw9patch oder einfach mit einem Grafikbearbeitungsprogramm wie Adobe® Photoshop erstellt werden. So nimmt die Widget-Hintergrundform den gesamten verfügbaren Platz ein. Das 9-Patch sollte randlos sein und keine transparenten Pixel bieten, die zusätzliche Ränder bieten. Ein paar Randpixel für subtile Schlagschatten oder andere subtile Effekte einsparen.
Hinweis : Wie bei Steuerelementen in Aktivitäten sollten Sie mithilfe von Drawables mit Statuslisten dafür sorgen, dass auch interaktive Steuerelemente einen deutlich erkennbaren, fokussierten und eingedrückten Status haben.
Abbildung 5: Rahmenpixel, die neun Patches umfassen, die dehnbare Regionen und die Abstände zwischen Inhalten angeben.
Einige App-Widgets, z. B. solche, die StackView verwenden, haben einen transparenten Hintergrund. In diesem Fall sollte jedes einzelne Element in StackView einen 9-Patch-Hintergrund mit wenig oder gar keinen transparenten Pixeln als Rand verwenden.
Für den Inhalt des Widgets solltest du flexible Layouts wie RelativeLayout, LinearLayout oder FrameLayout verwenden. So wie sich Ihre Aktivitätslayouts an verschiedene physische Bildschirmgrößen anpassen müssen, müssen sich auch Widget-Layouts an verschiedene Zellengrößen des Startbildschirm-Rasters anpassen.
Unten sehen Sie ein Beispiellayout, das ein Musik-Widget mit Textinformationen und zwei Schaltflächen verwenden kann.
Sie baut auf der vorherigen Diskussion zum Hinzufügen von Margen je nach Betriebssystemversion auf. Die robusteste und robusteste Methode, dem Widget Ränder hinzuzufügen, besteht darin, den Widget-Frame und die Inhalte in einem abgesetzten FrameLayout-Element umzubrechen.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/widget_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/my_widget_background">
<TextView
android:id="@+id/song_info"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="@+id/play_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
<Button
android:id="@+id/skip_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
Wenn Sie sich nun das Beispiel-Musik-Widget aus dem vorherigen Abschnitt ansehen, können Sie damit beginnen, Attribute für flexible Layouts wie folgt zu verwenden:
Abbildung 6: Auszüge von flexiblen Layouts und Attributen.
Wenn ein Nutzer das Widget zu seinem Startbildschirm hinzufügt, auf einem Android 4.0-Beispielgerät, auf dem jede Rasterzelle 80 dp × 100 dp groß ist und Ränder von 8 dp automatisch auf alle Größen angewendet werden, wird das Widget so gestreckt:
Abbildung 7: Das Musik-Widget befindet sich auf einem Beispielraster mit einer Größe von 80 dp x 100 dp und einem vom System hinzugefügten automatischen Rand von 8 dp.
Verwenden des App Widget Templates Pack
Wenn Sie mit dem Entwerfen eines neuen Widgets beginnen oder ein vorhandenes Widget aktualisieren, sollten Sie sich zuerst die folgenden Widget-Designvorlagen ansehen. Das unten herunterladbare Paket enthält neun Patches für Hintergrundbilder, XML-Dateien und Adobe® Photoshop-Quelldateien für verschiedene Bildschirmdichten, Widget-Stile für Betriebssystemversionen und Widget-Farben. Das Vorlagenpaket enthält auch Grafiken, mit denen Sie Ihr gesamtes Widget oder Teile davon (z.B. Schaltflächen) interaktiv gestalten können.
Abbildung 8: Auszüge aus dem App Widget Templates Pack (mittlere Dichte, dunkel, Android 4.0/frühere Stile, Standard-/fokussierte/betätigte Status).
Über den folgenden Link können Sie das aktuelle Archiv des App Widget Templates Pack herunterladen: