Présentation des widgets d'application

Essayez la méthode Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment créer des widgets à l'aide d'API de style Compose.

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 les widgets sur les panneaux de leur écran d'accueil et, si cette fonctionnalité est disponible, les redimensionner pour adapter la quantité d'informations affichées à 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 Remote View et des mises en page XML, consultez Créer un widget simple. Pour créer un widget à l'aide de Kotlin et d'API de style 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'informations

Exemple de widget météo affichant Tokyo comme étant principalement nuageux, 14 degrés, et la température prévue de 16h à 19h
Figure 1. Widget d'informations d'une application météo.

Les widgets d'informations affichent généralement des éléments d'information essentiels et suivent leur évolution au fil du temps. Par exemple, les widgets météo, les widgets d'horloge ou les widgets de suivi des scores sportifs. Appuyer sur un widget 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 dans sa vue détaillée dans l'application associée.
  • Interagir avec des éléments, par exemple en les marquant comme terminés, avec la prise en charge des boutons composés dans Android 12 (niveau d'API 31).

Widgets de contrôle

Widget pour une application appelée "Light list", affichant des boutons bascule
            intitulés "Bedroom", "Kitchen" et "Living room", les deux premiers
            boutons bascule étant désactivés
Figure 4. Exemple de widget de contrôle.

L'objectif principal d'un widget de contrôle est d'afficher les fonctions fréquemment utilisées afin que l'utilisateur puisse les déclencher depuis l'écran d'accueil sans avoir à ouvrir l'application. Vous pouvez les considérer 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 les lumières de la maison.

Interagir avec un widget de contrôle peut ouvrir une vue détaillée associée dans l'application. Cela dépend du fait que la fonction du widget de contrôle génère des données, comme dans le cas d'un widget de recherche.

Widgets hybrides

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

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

Lorsque vous planifiez votre widget, concevez-le autour 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

L'Assistant Google peut afficher n'importe quel type de widget en réponse aux commandes vocales de l'utilisateur. Vous pouvez configurer vos widgets pour qu'ils exécutent des actions dans les applications, ce qui permet aux utilisateurs de recevoir des réponses rapides et des expériences d'application interactives sur les surfaces de l'Assistant telles qu' Android et Android Auto. Pour en savoir plus sur l'exécution des widgets pour l'Assistant, consultez Intégrer des actions dans les applications à des widgets Android.

Limites des widgets

Bien que les widgets puissent être considérés comme des "mini-applications", certaines limites sont importantes à comprendre avant de concevoir votre widget.

Gestes

Étant donné que les widgets se trouvent 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. Alors que les applications peuvent permettre aux utilisateurs de naviguer horizontalement entre les écrans, ce geste est déjà utilisé sur l'écran d'accueil pour naviguer entre les écrans d'accueil.

Les seuls gestes disponibles pour les widgets sont le toucher et le balayage vertical.

Éléments

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

Principes de conception

Contenu du widget

Les widgets sont un excellent moyen d'attirer un utilisateur vers votre application en "annonçant" des contenus nouveaux et intéressants disponibles dans votre application.

Tout comme les teasers sur la première page d'un journal, les widgets consolident et concentrent les informations d'une application et fournissent un lien vers des informations plus détaillées dans l'application. Vous pouvez dire que le widget est le "snack" d'informations, tandis que l'application est le "repas". 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 d'informations pur, envisagez de 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 des tâches plus rapidement et d'étendre la portée fonctionnelle de l'application à l'écran d'accueil.

Voici quelques exemples de liens de navigation adaptés aux widgets :

  • Fonctions génératives : ces fonctions permettent à l'utilisateur de créer du contenu pour une application, par exemple en créant un document ou un message.

  • Ouvrir l'application au niveau supérieur : appuyer sur un élément d'information redirige généralement l'utilisateur vers un écran de détails de niveau inférieur. Fournir un 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 sinon pour accéder à l'application depuis l'écran d'accueil. L'utilisation de l'icône de votre application pour cette fonctionnalité peut également fournir à votre widget une identité claire si les données que vous affichez sont ambiguës.

Redimensionnement du widget

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

Appuyer de manière prolongée sur un widget redimensionnable, puis le relâcher, le met en mode de redimensionnement. Les utilisateurs peuvent utiliser les poignées de glissement ou les coins du widget pour définir la taille de leur choix.

Le redimensionnement permet aux utilisateurs d'ajuster la hauteur et la largeur d'un widget dans les limites de la grille de placement de l'écran d'accueil. Vous pouvez décider si votre widget est librement redimensionnable ou limité aux modifications de taille horizontales ou verticales. Vous n'avez pas besoin de prendre en charge le redimensionnement si votre widget est intrinsèquement de taille fixe.

Permettre aux utilisateurs de redimensionner les widgets présente des avantages importants :

  • Ils peuvent affiner la quantité d'informations qu'ils souhaitent voir sur chaque widget.
  • Ils peuvent mieux influencer la mise en page des widgets et des raccourcis sur 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 une liste ou une grille 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.

Les widgets d'informations nécessitent une planification plus pratique, car ils ne sont pas défilables et tout le contenu doit tenir dans 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 lors de l'opération de redimensionnement.

Dans l'exemple suivant, l'utilisateur peut redimensionner un widget météo en trois étapes, ce qui permet d'afficher des informations plus détaillées sur la météo à l'emplacement actuel à mesure que le widget s'agrandit.

Exemple de widget météo dans la plus petite taille de grille 3x2, avec le nom de la ville (Tokyo), la température (14°) et le symbole indiquant un temps partiellement nuageux
Figure 7. Exemple de widget météo de petite taille (3x2).


Exemple de widget météo de taille "moyenne" (5x2), incluant toute l'UI de la taille de grille 3x2, plus le libellé "principalement nuageux" et les prévisions de température de 16h à 19h
Figure 8. Exemple de widget Météo de taille moyenne (grille 5x2).


Exemple de widget météo de taille "grande" (5x4), incluant toute l'UI des tailles de grille 3x2 et 5x2, ainsi que les prévisions météo du mardi au vendredi
Figure 9. Exemple de widget météo de grande taille (5x4).

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

Considérations relatives à la mise en page

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

Configuration des widgets par les utilisateurs

Parfois, l'utilisateur doit configurer le widget avant qu'il ne devienne utile. Pensez à un widget de messagerie où l'utilisateur doit sélectionner le dossier de messagerie avant que la boîte de réception ne puisse s'afficher, ou à un widget photo statique où l'utilisateur doit attribuer une image de la galerie à afficher. Les widgets Android affichent leurs choix de configuration juste après que l'utilisateur a déposé le widget sur un écran d'accueil.

Checklist de conception des widgets

  • Concentrez-vous sur de petites portions d'informations visibles sur votre widget. Développez les informations dans votre application.
  • Choisissez le type de widget adapté à votre objectif.
  • Planifiez l'adaptation du contenu de votre widget à différentes tailles.
  • Rendez la mise en page de votre widget indépendante de l'orientation et de l'appareil en vous assurant qu'elle peut s'étirer et se contracter.
  • Déterminez si votre widget nécessite une configuration supplémentaire.