Présentation des widgets d'application

Les widgets sont un aspect essentiel de la personnalisation de l'écran d'accueil. Vous pouvez les considérer comme des vues "en un coup d'œil" des données et des fonctionnalités les plus importantes d'une application, accessibles directement sur l'écran d'accueil de l'utilisateur. Les utilisateurs peuvent déplacer des widgets dans les panneaux de leur écran d'accueil et, s'ils sont compatibles, les redimensionner pour adapter la quantité d'informations du widget à leurs préférences.

Cette documentation présente les différents types de widgets que vous pouvez créer et les principes de conception à suivre. Pour créer un widget d'application à l'aide des API View View et des mises en page XML, consultez Créer un widget simple. Pour créer un widget à l'aide des API de style Kotlin et Compose, consultez Jetpack Glance.

Types de widgets

Lorsque vous planifiez votre widget, réfléchissez au type de widget que vous souhaitez créer. Les widgets appartiennent généralement à l'une des catégories suivantes:

Widgets d'information

Exemple de widget météo indiquant que Tokyo est principalement nuageux avec une température de 14 degrés, et la température prévue entre 16h et 19h
Figure 1. Widget d'informations provenant d'une application météo

Les widgets d'informations affichent généralement des éléments d'informations essentiels et suivent l'évolution de ces informations au fil du temps. Les widgets météo, widgets d'horloge ou de suivi des résultats sportifs sont des exemples de widgets d'information. Appuyer sur les widgets d'informations lance généralement l'application associée et ouvre une vue détaillée des informations du widget.

Widgets de collection

Les widgets de collection sont spécialisés dans l'affichage de plusieurs éléments du même type, tels qu'une collection d'images d'une application de galerie, une collection d'articles d'une application d'actualités, ou une collection d'e-mails ou de messages d'une application de communication. Les widgets de collection peuvent défiler verticalement.

Les widgets de collection se concentrent généralement sur les cas d'utilisation suivants:

  • Parcourir la collection
  • Ouvrir un élément de la collection à sa vue détaillée dans l'application associée.
  • Interagir avec les éléments, par exemple les marquer comme terminés, avec prise en charge des boutons composés dans Android 12 (niveau d'API 31)

Contrôler les widgets

Widget pour une application appelée "Liste lumineuse", affichant des boutons bascule intitulés "Chambre", "Cuisine" et "Salon", avec les deux premiers interrupteurs désactivés
Figure 4. Exemple de widget de contrôle.

L'objectif principal d'un widget de contrôle est d'afficher des fonctions fréquemment utilisées afin que l'utilisateur puisse les déclencher depuis l'écran d'accueil sans avoir à ouvrir l'application. Considérez-les comme des télécommandes pour une application. Un exemple de widget de contrôle est un widget de contrôle de la maison qui permet aux utilisateurs d'allumer ou d'éteindre la lumière de la maison.

L'interaction avec un widget de contrôle peut ouvrir une vue détaillée associée dans l'application. Cela varie selon que la fonction du widget de contrôle génère ou non des données, par exemple dans le cas d'un widget Recherche.

Widgets hybrides

Application de musique générale affichant des boutons "Je n'aime pas", "Retour", "Lecture/Pause", "Suivant" et "J'aime". L'artiste et le titre sont respectivement listés sous "Artiste" et "Exemple de musique".
Figure 5 : Exemple de widget d'application musicale.

Bien que certains widgets représentent l'un des types présentés dans les sections précédentes (informations, collecte ou contrôle), de nombreux widgets sont des hybrides combinant des éléments de types différents. Par exemple, un widget de lecteur de musique est principalement un widget de commande, mais il indique également à l'utilisateur le titre en cours de lecture, comme un widget d'informations.

Lorsque vous planifiez votre widget, concevez votre widget en fonction de l'un des types de base et ajoutez des éléments d'autres types si nécessaire.

Intégrer des widgets à l'Assistant Google

N'importe quel type de widget peut être affiché par l'Assistant Google en réponse aux commandes vocales de l'utilisateur. Vous pouvez configurer vos widgets pour qu'ils effectuent des actions dans l'application. Les utilisateurs peuvent ainsi recevoir des réponses rapides et des expériences interactives dans les applications sur les surfaces de l'Assistant, comme Android et Android Auto. Pour en savoir plus sur le traitement des widgets pour l'Assistant, consultez Intégrer les actions dans les applications avec les widgets Android.

Limites des widgets

Bien que les widgets puissent être interprétés comme des "mini-applications", il est important de comprendre certaines limites avant de concevoir votre widget.

Gestes

Étant donné que les widgets sont actifs sur l'écran d'accueil, ils doivent coexister avec la navigation qui y est établie. Cela limite la prise en charge des gestes disponibles dans un widget par rapport à une application en plein écran. Bien que les applications puissent permettre aux utilisateurs de naviguer horizontalement entre les écrans, ce geste est déjà effectué sur l'écran d'accueil afin de naviguer entre les écrans d'accueil.

Les seuls gestes disponibles pour les widgets sont l'appui et le balayage vertical.

Éléments

Compte tenu des limites de gestes disponibles pour les widgets, certains composants de base de l'interface utilisateur qui reposent sur des gestes restreints ne sont pas disponibles pour les widgets. Pour obtenir la liste complète des composants compatibles et en savoir plus sur les restrictions de mise en page, consultez Créer la mise en page de widget et Fournir des mises en page de widget flexibles.

Consignes de conception

Contenu du widget

Les widgets sont un excellent moyen d'attirer un utilisateur vers votre application en faisant la "publicité" de nouveaux contenus intéressants disponibles dans votre application.

Tout comme les accroches sur la page d'accueil d'un journal, les widgets consolident et concentrent les informations d'une application, et permettent d'accéder à des informations plus détaillées. Assurez-vous que votre application affiche plus de détails sur un élément d'information que ce que le widget affiche.

En plus du contenu informatif, vous pouvez faire en sorte que votre widget fournisse des liens de navigation vers les zones fréquemment utilisées de votre application. Cela permet aux utilisateurs d'effectuer les tâches plus rapidement et étend la portée fonctionnelle de l'application à l'écran d'accueil.

Voici de bons candidats pour les liens de navigation sur les widgets:

  • Les fonctions génératives:ce sont les fonctions qui permettent à l'utilisateur de créer du contenu pour une application, comme créer un document ou un message.

  • Ouvrir l'application au premier niveau:appuyer sur un élément d'information redirige généralement l'utilisateur vers un écran détaillé de niveau inférieur. Donner accès au niveau supérieur de votre application offre plus de flexibilité de navigation et peut remplacer un raccourci d'application dédié que les utilisateurs utilisent autrement pour accéder à l'application à partir de l'écran d'accueil. L'utilisation de l'icône de votre application pour cette fonctionnalité peut également fournir une identité claire à votre widget si les données que vous affichez sont ambiguës.

Redimensionnement du widget

Widget Horloge Google standard
Figure 6 : Widget Horloge Google standard.

Appuyez de manière prolongée sur un widget redimensionnable, puis relâchez-le pour passer en mode de redimensionnement. Les utilisateurs peuvent utiliser les poignées de déplacement ou les coins du widget pour définir leur taille préférée.

Le redimensionnement permet aux utilisateurs d'ajuster la hauteur et la largeur d'un widget dans les limites de la grille d'emplacement de l'écran d'accueil. Vous pouvez décider si votre widget peut être redimensionné librement, ou s'il est limité à des changements de taille horizontaux ou verticaux. Si votre widget est intrinsèquement à taille fixe, vous n'avez pas besoin de prendre en charge le redimensionnement.

Le fait de laisser les utilisateurs redimensionner les widgets présente des avantages importants:

  • Ils peuvent ajuster la quantité d'informations qu'ils souhaitent voir sur chaque widget.
  • Ils peuvent mieux influencer la mise en page des widgets et des raccourcis dans leurs panneaux d'accueil.

Planifiez une stratégie de redimensionnement pour votre widget en fonction du type de widget que vous créez. Les widgets de collection basés sur des listes ou des grilles sont généralement simples, car le redimensionnement du widget étend ou réduit la zone de défilement vertical. Quelle que soit la taille du widget, l'utilisateur peut toujours faire défiler tous les éléments d'information pour les afficher.

Les widgets d'informations nécessitent une planification plus pratique, car il n'est pas possible de les faire défiler et tout le contenu doit s'adapter à une taille donnée. Vous devez ajuster dynamiquement le contenu et la mise en page de votre widget à la taille définie par l'utilisateur via l'opération de redimensionnement.

Dans l'exemple qui suit, l'utilisateur peut redimensionner un widget météo en trois étapes, exposant ainsi des informations plus détaillées sur la météo à l'emplacement actuel à mesure que le widget se développe.

Exemple de widget météo présentant la plus petite taille de grille 3x2, avec le nom du lieu (Tokyo), la température (14°) et un symbole indiquant un temps partiellement nuageux
Figure 7 : Exemple de widget météo dans une "petite" grille de 3 x 2 pixels


Exemple de widget météo dans une taille "moyenne" 5 x 2, incluant toutes les interfaces utilisateur de la taille de grille 3x2, l'étiquette "presque nuageux" et les températures prévues de 16h à 19h
Figure 8 : Exemple de widget météo dans une grille de taille "moyenne" 5x2.


Exemple de widget météo au format "grand" 5 x 4, incluant toutes les interfaces utilisateur des tailles de grille 3x2 et 5x2, ainsi qu'une prévision météo du mardi au vendredi
Figure 9. Exemple de widget météo dans la grille de 5 x 4 "grande taille".

Pour chaque taille de widget, déterminez la quantité d'informations sur votre application qui s'affichent. Pour les petites tailles, concentrez-vous sur les informations essentielles, puis ajoutez des informations contextuelles à mesure que le widget se développe horizontalement et verticalement.

Considérations relatives à la mise en page

Il peut être tentant de disposer vos widgets en fonction des dimensions de la grille de placement d'un appareil avec lequel vous développez. Il peut s'agir d'une approximation initiale utile, mais gardez à l'esprit les points suivants:

  • En planifiant votre stratégie de redimensionnement de widget sur des "buckets de taille" plutôt que sur des dimensions de grille variables, vous obtenez les résultats les plus fiables.
  • Le nombre, la taille et l'espacement des cellules peuvent varier considérablement d'un appareil à l'autre. Par conséquent, il est très important que votre widget soit flexible et puisse accueillir plus ou moins d'espace que prévu.
  • Lorsque l'utilisateur redimensionne un widget, le système répond avec une plage de tailles dp dans laquelle votre widget peut se redessiner.
  • À partir d'Android 12, vous pouvez fournir des attributs de taille plus précis et des mises en page plus flexibles. Par exemple :

Configuration du widget par les utilisateurs

Parfois, l'utilisateur doit configurer le widget pour qu'il puisse devenir utile. Prenons l'exemple d'un widget de messagerie dans lequel l'utilisateur doit sélectionner le dossier de messagerie avant que la boîte de réception puisse s'afficher, ou d'un widget de photo statique dans lequel l'utilisateur doit attribuer une image de la galerie à afficher. Les widgets Android affichent leurs choix de configuration dès que l'utilisateur les a déposés sur un écran d'accueil.

Checklist de conception de widgets

  • Concentrez-vous sur de petites portions d'informations lisibles d'un coup d'œil dans votre widget. Développez les informations dans votre application.
  • Choisissez le type de widget adapté à vos besoins.
  • Planifiez l'adaptation du contenu de votre widget à différentes tailles.
  • Assurez-vous que la mise en page de votre widget est indépendante de l'orientation et de l'appareil en vous assurant qu'elle peut s'étirer et se réduire.
  • Déterminez si votre widget nécessite une configuration supplémentaire.