Les widgets d'application (parfois simplement "widgets") sont une fonctionnalité introduite dans Android 1.5 et considérablement améliorée dans Android 3.0 et 3.1. Un widget peut afficher en un coup d'œil les informations les plus opportunes ou pertinentes d'une application sur l'écran d'accueil d'un utilisateur. L'image système Android standard inclut plusieurs widgets, dont un pour l'horloge analogique, l'application Musique et d'autres applications.
Figure 1 : Exemples de widgets d'application sous Android 4.0
Ce document explique comment concevoir un widget pour qu'il s'adapte graphiquement aux autres widgets et aux autres éléments de l'écran d'accueil Android, tels que les icônes de lanceur et les raccourcis. Il décrit également certaines normes relatives aux illustrations de widgets, ainsi que quelques conseils et astuces concernant les graphiques de widgets.
Pour en savoir plus sur le développement de widgets, consultez la section Widgets d'application du guide du développeur.
Anatomie d'un widget standard
Les widgets d'application Android classiques comportent trois composants principaux: un cadre de délimitation, un cadre, ainsi que les commandes graphiques et d'autres éléments du widget. Les widgets d'application peuvent contenir un sous-ensemble de widgets View dans Android. Les commandes compatibles incluent les libellés de texte, les boutons et les images. Pour obtenir la liste complète des vues disponibles, consultez la section Créer la mise en page du widget d'application dans le guide du développeur. Les widgets bien conçus laissent certaines marges entre les bords du cadre de délimitation et du cadre, ainsi que des marges intérieures entre les bords internes du cadre et les commandes du widget.
Figure 2. Les widgets présentent généralement des marges entre le cadre de délimitation et le frame, ainsi qu'une marge intérieure entre les commandes du cadre et du widget.
Remarque : À partir d'Android 4.0, des marges sont automatiquement attribuées aux widgets d'application entre le frame du widget et le cadre de délimitation du widget d'application afin de fournir un meilleur alignement avec les autres widgets et icônes sur l'écran d'accueil de l'utilisateur. Pour tirer parti de ce comportement vivement recommandé, définissez la valeur targetSdkVersion de votre application sur 14 ou supérieur.
Les widgets conçus pour s'adapter visuellement aux autres widgets de l'écran d'accueil s'appuient sur les autres éléments de l'écran d'accueil pour l'alignement. Ils utilisent également des effets d'ombrage standards. Tous ces détails sont décrits sur cette page.
Déterminer la taille de votre widget
Chaque widget doit définir des champs minWidth et minHeight, indiquant la quantité minimale d'espace qu'il doit utiliser par défaut. Lorsque les utilisateurs ajoutent un widget à leur écran d'accueil, il occupera généralement plus que la largeur et la hauteur minimales que vous spécifiez. Les écrans d'accueil Android offrent aux utilisateurs une grille d'espaces disponibles dans lesquels ils peuvent placer des widgets et des icônes. Cette grille peut varier selon l'appareil. Par exemple, de nombreux téléphones sont dotés d'une grille de 4x4, tandis que les tablettes peuvent offrir une grille plus grande de 8x7. Lorsque votre widget est ajouté, il est étiré pour occuper le nombre minimal de cellules (horizontalement et verticalement) requis pour respecter ses contraintes minWidth et minHeight. Comme nous le verrons dans la section Concevoir des mises en page de widgets et des graphiques d'arrière-plan ci-dessous, l'utilisation d'arrière-plans Nine-Patch et de mises en page flexibles pour les widgets d'application permettra à votre widget de s'adapter parfaitement à la grille de l'écran d'accueil de l'appareil, tout en restant utilisable et esthétique.
Bien que la largeur et la hauteur d'une cellule, ainsi que la quantité de marges automatiques appliquées aux widgets, puissent varier d'un appareil à l'autre, vous pouvez utiliser le tableau ci-dessous pour estimer approximativement les dimensions minimales de votre widget, en fonction du nombre souhaité de cellules occupées dans la grille:
| Nbre de cellules (colonnes ou lignes) |
Taille disponible (dp) ( minWidth ou minHeight) |
|---|---|
| 1 | 40dp |
| 2 | 110dp |
| 3 | 180dp |
| 4 | 250dp |
| … | … |
| n | 70 × n − 30 |
Il est recommandé d'être prudent avec minWidth et minHeight, en spécifiant la taille minimale qui affiche le widget dans un bon état par défaut. Pour illustrer la façon de fournir des éléments minWidth et minHeight, supposons que vous ayez un widget de lecteur de musique qui affiche l'artiste et le titre de la chanson en cours de lecture (empilé verticalement), un bouton Play (Lecture) et un bouton Next (Suivant) :
Figure 3. Exemple de widget de lecteur de musique
La hauteur minimale doit correspondre à la hauteur de vos deux TextViews (pour l'artiste et le titre), plus des marges de texte. La largeur minimale doit correspondre à la largeur minimale utilisable des boutons Play (Lecture) et Next (Suivant), plus la largeur minimale du texte (par exemple, la largeur de 10 caractères), plus toutes les marges de texte horizontales.
Figure 4. Exemples de tailles et de marges pour les calculs de minWidth/minHeight. Nous avons choisi une largeur minimale de 144 dp pour les étiquettes de texte, par exemple.
Voici des exemples de calculs:
minWidth= 144dp + (2 × 8dp) + (2 × 56dp) = 272dpminHeight= 48dp + (2 × 4dp) = 56dp
Si une marge intérieure de contenu est inhérente à l'arrière-plan de votre widget dans le fichier 9-patch, vous devez l'ajouter à minWidth et minHeight en conséquence.
Widgets redimensionnables
Les widgets peuvent être redimensionnés horizontalement et/ou verticalement à partir d'Android 3.1, ce qui signifie que minWidth et minHeight deviennent la taille par défaut du widget. Vous pouvez spécifier la taille minimale du widget à l'aide de minResizeWidth et minResizeHeight. Ces valeurs doivent spécifier la taille en dessous de laquelle le widget serait illisible ou inutilisable.
Il s'agit généralement d'une fonctionnalité à privilégier pour les widgets de collection tels que ceux basés sur ListView ou GridView.
Ajouter des marges à votre widget d'application
Comme indiqué précédemment, Android 4.0 ajoute automatiquement de petites marges standards à chaque bord des widgets de l'écran d'accueil, pour les applications qui spécifient une targetSdkVersion égale ou supérieure à 14. Cela permet d'équilibrer visuellement l'écran d'accueil. Par conséquent, nous vous recommandons de ne pas ajouter de marges supplémentaires en dehors de la forme d'arrière-plan de votre widget d'application sous Android 4.0.
Il est facile d'écrire une mise en page unique dans laquelle des marges personnalisées sont appliquées pour les versions antérieures de la plate-forme, sans marges supplémentaires pour Android 4.0 ou version ultérieure. Consultez la section Ajouter des marges aux widgets d'application du guide du développeur pour savoir comment y parvenir avec le code XML de mise en page.
Conception de mises en page de widgets et d'images d'arrière-plan
La plupart des widgets ont une forme rectangulaire ou arrondie à l'arrière-plan uni. Il est recommandé de définir cette forme à l'aide de neuf corrections, une pour chaque densité d'écran (voir Compatibilité avec plusieurs écrans pour en savoir plus). Vous pouvez créer des fichiers Nine-Patch avec l'outil draw9patch ou simplement avec un programme d'édition graphique tel qu'Adobe® Photoshop. Ainsi, la forme d'arrière-plan du widget occupera tout l'espace disponible. Le fichier Nine-Patch doit être bord à bord, sans pixels transparents offrant des marges supplémentaires. Prenez peut-être quelques pixels de bordure pour appliquer des ombres projetées subtiles ou d'autres effets subtils.
Remarque : Comme pour les commandes des activités, vous devez vous assurer que les commandes interactives ont des états visuels distincts et enfoncés à l'aide de drawables de liste d'états.
Figure 5 : Pixels de bordure à neuf fichiers indiquant les régions étirables et la marge intérieure du contenu.
Certains widgets d'application, tels que ceux qui utilisent un StackView, ont un arrière-plan transparent. Dans ce cas, chaque élément individuel dans StackView doit utiliser un arrière-plan Nine-Patch bord à bord, avec peu ou pas de pixels transparents de bordure pour les marges.
Pour le contenu du widget, vous devez utiliser des mises en page flexibles, telles que RelativeLayout, LinearLayout ou FrameLayout. Tout comme les mises en page de vos activités doivent s'adapter à différentes tailles d'écran physiques, les mises en page de widgets doivent s'adapter à différentes tailles de cellules de la grille de l'écran d'accueil.
Vous trouverez ci-dessous un exemple de mise en page pouvant être utilisée par un widget Musique affichant des informations textuelles et deux boutons.
Il s'appuie sur la discussion précédente sur l'ajout de marges en fonction de la version du système d'exploitation. Notez que le moyen le plus robuste et le plus résilient d'ajouter des marges au widget consiste à encapsuler le cadre et le contenu du widget dans un élément FrameLayout rempli.
<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>
Si vous examinez maintenant l'exemple de widget Musique de la section précédente, vous pouvez commencer à utiliser des attributs de mise en page flexibles, comme suit:
Figure 6. Extrait les mises en page et les attributs flexibles.
Lorsqu'un utilisateur ajoute le widget à son écran d'accueil, sur un exemple d'appareil Android 4.0 où chaque cellule de grille fait 80 × 100 dp et où 8 dp de marges sont automatiquement appliquées à toutes les tailles, le widget est étiré, comme suit:
Figure 7. Widget Musique placé sur un exemple de grille de 80 dp x 100 dp avec 8 dp de marges automatiques ajoutées par le système.
Utilisation du pack de modèles de widgets d'applications
Lorsque vous commencez à concevoir un nouveau widget ou lorsque vous mettez à jour un widget existant, nous vous conseillons de commencer par examiner les modèles de conception de widget ci-dessous. Le package téléchargeable ci-dessous comprend des images d'arrière-plan Nine-Patch, du code XML et des fichiers Adobe® Photoshop sources pour plusieurs densités d'écran, styles de widget de version d'OS et couleurs de widget. Le package de modèles contient également des éléments graphiques utiles pour rendre l'ensemble de votre widget ou des parties de celui-ci (boutons, par exemple) interactifs.
Figure 8. Extraits du pack de modèles de widgets d'applications (densité moyenne, sombre, Android 4.0/styles précédents, états par défaut/ciblés/enclenchés).
Vous pouvez vous procurer la dernière archive du pack de modèles de widgets d'application via le lien ci-dessous:
Télécharger le pack de modèles de widgets d'applications pour Android 4.0 »