Premiers pas avec les cartes

Pour commencer à fournir des cartes à partir de votre application, incluez les dépendances suivantes dans le fichier build.gradle de votre application.

Groovy

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.4.1"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.2.1"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.2.1"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.2.1"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.4.1"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.4.1"
}

Kotlin

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.4.1")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.2.1")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.2.1")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.2.1")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.4.1")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.4.1")
}

Concepts clés

Les cartes ne sont pas créées de la même manière que les applications Android et utilisent des concepts différents:

  • Modèles de mise en page:définissent l'organisation globale des éléments visuels à l'écran. Pour ce faire, utilisez la fonction primaryLayout().
  • Éléments de mise en page:représentent un élément graphique individuel, tel qu'un bouton ou une fiche, ou plusieurs éléments de ce type regroupés à l'aide d'une colonne, d'un buttonGroup ou d'un élément similaire. Ils sont intégrés à un modèle de mise en page.
  • Ressources:les objets ResourceBuilders.Resources se composent d'une carte de paires clé-valeur des ressources Android (images) requises pour afficher une mise en page, ainsi que d'une version.
  • Chronologie:un objet TimelineBuilders.Timeline est une liste d'une ou plusieurs instances d'un objet de mise en page. Vous pouvez fournir différents mécanismes et expressions pour indiquer quand le moteur de rendu doit passer d'un objet de mise en page à un autre, par exemple pour arrêter d'afficher une mise en page à un moment spécifique.
  • État:structure de données de type StateBuilders.State transmise entre la carte et l'application pour permettre aux deux composants de communiquer entre eux. Par exemple, si un bouton est enfoncé sur la carte, l'état contient l'ID du bouton. Vous pouvez également échanger des types de données à l'aide d'une carte.
  • Carreau:objet TileBuilders.Tile représentant un carrousel, composé d'une échelle temporelle, d'un ID de version de ressources, d'un intervalle de fraîcheur et d'un état.
  • Protolayout:ce terme apparaît dans le nom de diverses classes liées aux cartes et fait référence à la bibliothèque Protolayout Wear OS, une bibliothèque graphique utilisée sur différentes surfaces Wear OS.

Créer une carte

Pour fournir une carte à partir de votre application, implémentez un service de type TileService et enregistrez-le dans votre fichier manifeste. À partir de ces informations, le système demande les tuiles nécessaires lors des appels à onTileRequest() et les ressources lors des appels à onTileResourcesRequest().

class MyTileService : TileService() {

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest) =
        Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(
                    Timeline.fromLayoutElement(
                        materialScope(this, requestParams.deviceConfiguration) {
                            primaryLayout(
                                mainSlot = {
                                    text("Hello, World!".layoutString, typography = BODY_LARGE)
                                }
                            )
                        }
                    )
                )
                .build()
        )

    override fun onTileResourcesRequest(requestParams: ResourcesRequest) =
        Futures.immediateFuture(
            Resources.Builder().setVersion(RESOURCES_VERSION).build()
        )
}
Tile.kt

Ajoutez ensuite un service à l'intérieur de la balise <application> de votre fichier AndroidManifest.xml.

<service
    android:name=".snippets.m3.tile.MyTileService"
    android:label="@string/tile_label"
    android:description="@string/tile_description"
    android:icon="@mipmap/ic_launcher"
    android:exported="true"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">
    <intent-filter>
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>
AndroidManifest.xml

Le filtre d'intent et d'autorisation enregistre ce service en tant que fournisseur de cartes.

L'icône, le libellé, la description et la ressource d'aperçu sont présentés à l'utilisateur lorsqu'il configure des cartes sur son téléphone ou sa montre. Notez que la ressource d'aperçu est compatible avec tous les qualificateurs de ressources standards d'Android. Il est donc possible de faire varier l'aperçu en fonction de facteurs tels que la taille de l'écran et la langue de l'appareil. Pour obtenir d'autres recommandations, consultez la checklist d'aperçu.

Déployez votre application et ajoutez la carte au carrousel de cartes (il existe également une méthode plus conviviale pour prévisualiser une carte, mais pour l'instant, faites-le manuellement).

Carte &quot;Hello World&quot;.
Figure 1 Carte "Hello World".

Pour obtenir un exemple complet, consultez l'exemple de code sur GitHub ou l'atelier de programmation.

Créer une UI pour les cartes

Les éléments d'interface utilisateur Material 3 Expressive sont créés à l'aide d'une approche structurée basée sur le modèle de compilateur avec sûreté de typage de Kotlin.

Mise en page

Pour créer votre mise en page, procédez comme suit:

  1. Lancez un champ d'application Material Design:appelez la fonction materialScope() en fournissant les context et deviceConfiguration requis. Vous pouvez inclure des paramètres facultatifs, tels que allowDynamicTheme et defaultColorScheme. allowDynamicTheme est true par défaut, et defaultColorScheme représente ColorScheme utilisé lorsque les couleurs dynamiques ne sont pas disponibles (par exemple, lorsque l'utilisateur a désactivé cette fonctionnalité), ou lorsqu'elle n'est pas compatible avec l'appareil, ou lorsque allowDynamicTheme est false).

  2. Créez votre UI dans le champ d'application:tous les composants d'UI d'une mise en page de cartes donnée doivent être définis dans le lambda d'un seul appel de niveau supérieur materialScope(). Ces fonctions de composant, telles que primaryLayout() et textEdgeButton(), sont des fonctions d'extension sur MaterialScope et ne sont disponibles que lorsqu'elles sont appelées dans cette portée du récepteur.

    materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration, // requestParams is passed to onTileRequest
    defaultColorScheme = myFallbackColorScheme
) {
    // inside the MaterialScope, you can call functions like primaryLayout()
    primaryLayout(
        titleSlot = { text(text = "Title".layoutString) },
        mainSlot = { text(text = "Main Content".layoutString) },
        bottomSlot = { textEdgeButton(text = "Action".layoutString) }
    )
}

Machine à sous

Dans M3, la mise en page des cartes utilise une approche inspirée de Compose qui utilise trois emplacements distincts. De haut en bas, voici les étapes:

  1. titleSlot, généralement pour un titre ou un en-tête principal.
  2. mainSlot, pour le contenu principal.
  3. bottomSlot, souvent utilisé pour les actions ou les informations supplémentaires. C'est également là qu'un bouton de bord s'affiche.
Mise en page des cartes affichant titleSlot, mainSlot et bottomSlot
Figure 2 : titleSlot, mainSlot et bottomSlot.

Le contenu de chaque emplacement est le suivant:

  • titleSlot (facultatif) : généralement quelques mots générés par text().
  • mainSlot (obligatoire) : composants organisés en structures telles que des lignes, des colonnes et des groupes de boutons. Ces composants peuvent également être imbriqués de manière récursive les uns dans les autres. Par exemple, une colonne peut contenir des lignes.
  • bottomSlot (facultatif) : généralement rempli avec un bouton qui épouse les bords ou un libellé textuel.

Étant donné qu'il est impossible de faire défiler les cartes, il n'existe aucun composant pour la pagination, le défilement ou la gestion de longues listes de contenus. Assurez-vous que le contenu reste visible lorsque la taille de la police augmente ou que le texte devient plus long en raison de la traduction.

Composants d'UI

La bibliothèque protolayout-material3 fournit un grand nombre de composants conçus conformément aux spécifications et aux recommandations de l'interface utilisateur de Material 3 Expressive.

Boutons

  • textButton(): bouton avec un seul emplacement pour le contenu textuel (court)
  • iconButton(): bouton avec un seul emplacement pour représenter une icône
  • avatarButton(): bouton d'avatar en forme de pilule qui propose jusqu'à trois emplacements pour prendre le contenu représentant un libellé et un libellé secondaire empilés verticalement, ainsi qu'une image (avatar) à côté
  • imageButton(): bouton image cliquable qui n'offre pas de cases supplémentaires, mais uniquement une image (par exemple, backgroundImage en arrière-plan)
  • compactButton(): bouton compact proposant jusqu'à deux emplacements pour accueillir un contenu empilé horizontalement représentant une icône et du texte à côté
  • button(): bouton en forme de pilule qui propose jusqu'à trois emplacements pour le contenu représentant une étiquette et une étiquette secondaire empilées verticalement, ainsi qu'une icône à côté

Boutons Edge

  • iconEdgeButton(): bouton de bordure qui propose un seul emplacement pour accueillir une icône ou un petit contenu rond
  • textEdgeButton(): bouton de bordure qui propose un seul emplacement pour un texte ou un contenu de largeur et de longueur similaires

Cartes

  • titleCard(): carte de titre proposant un à trois emplacements, généralement basés sur du texte
  • appCard(): fiche d'application proposant jusqu'à cinq emplacements, généralement basés sur du texte
  • textDataCard(): fiche de données proposant jusqu'à trois emplacements superposés verticalement, généralement basés sur du texte ou des chiffres
  • iconDataCard(): fiche de données proposant jusqu'à trois emplacements superposés verticalement, généralement basés sur du texte ou des chiffres, avec une icône
  • graphicDataCard(): carte de données graphiques qui propose un emplacement pour les données graphiques, comme un indicateur de progression, et jusqu'à deux emplacements superposés verticalement, généralement pour les descriptions textuelles

Indicateurs de progression

Regrouper des éléments de mise en page

  • buttonGroup(): mise en page de composant qui place ses enfants dans une séquence horizontale
  • primaryLayout(): mise en page en plein écran qui représente un style de mise en page M3 suggéré, qui est responsif et gère l'emplacement des éléments, ainsi que les marges et les marges intérieures recommandées appliquées

Personnalisation des thèmes

Dans Material 3 Expressive, le système de couleurs est défini par 29 rôles de couleur standards, organisés en six groupes: primaire, secondaire, tertiaire, erreur, surface et contour.

Système de couleurs expressif Material 3
Figure 3. Système de couleurs expressif Material 3.

Un ColorScheme mappe chacun de ces 29 rôles à une couleur correspondante. Étant donné qu'il fait partie du MaterialScope et que des composants doivent être créés dans celui-ci, ils prennent automatiquement les couleurs du jeu de couleurs. Cette approche permet à tous les éléments d'interface utilisateur de respecter automatiquement les normes Material Design.

Pour permettre aux utilisateurs de choisir entre un jeu de couleurs que vous définissez (par exemple, celui qui reflète les couleurs de votre marque) et celui fourni par le système (dérivé du cadran actuel de l'utilisateur ou choisi par l'utilisateur), initialisez MaterialScope comme suit:

val myColorScheme =
    ColorScheme(
        primary = ...
        onPrimary = ...
        // 27 more
    )

materialScope(
  defaultColorScheme = myColorScheme
) {
  // If the user selects "no theme" in settings, myColorScheme is used.
  // Otherwise, the system-provided theme is used.
}

Pour forcer vos cartes à s'afficher dans le jeu de couleurs que vous fournissez, désactivez la prise en charge de la thématisation dynamique en définissant allowDynamicTheme sur false:

materialScope(
  allowDynamicTheme = false,
  defaultColorScheme = myColorScheme
) {
  // myColorScheme is *always* used.
}

Couleur

Chaque composant utilise un sous-ensemble des 29 rôles de couleur définis par un ColorScheme. Par exemple, les boutons utilisent jusqu'à quatre couleurs, qui sont par défaut extraites du groupe "primaire" de l'ColorScheme active:

Jeton de composant ButtonColors Rôle ColorScheme
containerColor principale
iconColor onPrimary
labelColor onPrimary
secondaryLabelColor onPrimary (opacité 0,8)

Vous devrez peut-être vous écarter des jetons de couleur par défaut pour des éléments d'interface utilisateur spécifiques. Par exemple, vous pouvez souhaiter qu'un textEdgeButton utilise des couleurs du groupe "secondaire" ou "tertiaire", au lieu du groupe "principal", pour se démarquer et améliorer le contraste.

Vous pouvez personnaliser les couleurs des composants de plusieurs manières:

  1. Utiliser une fonction d'assistance pour les couleurs prédéfinies Utilisez des fonctions d'assistance telles que filledTonalButtonColors() pour appliquer les styles de boutons standards à Material 3 Expressive. Ces fonctions créent des instances ButtonColors préconfigurées qui mappent des styles courants tels que rempli, tonal ou contourné aux rôles appropriés de l'ColorScheme actif dans le MaterialScope. Vous pouvez ainsi appliquer des styles cohérents sans avoir à définir manuellement chaque couleur pour les types de boutons courants.

    textEdgeButton(
    colors = filledButtonColors() // default
    /* OR colors = filledTonalButtonColors() */
    /* OR colors = filledVariantButtonColors() */
    // ... other parameters
)

    Pour les cartes, utilisez la famille de fonctions filledCardColors() équivalente.

    Vous pouvez également modifier l'objet ButtonColors renvoyé par les fonctions d'assistance à l'aide de leur méthode copy() si vous ne devez modifier qu'un ou deux jetons:

    textEdgeButton(
    colors =
        filledButtonColors()
            .copy(
                containerColor = colorScheme.tertiary,
                labelColor = colorScheme.onTertiary
            )
    // ... other parameters
)

  2. Fournissez explicitement les rôles de couleur de remplacement. Créez votre propre objet ButtonColors et transmettez-le au composant. Pour les cartes, utilisez l'objet CardColors équivalent.

    textEdgeButton(
    colors =
        ButtonColors(
            // the materialScope makes colorScheme available
            containerColor = colorScheme.secondary,
            iconColor = colorScheme.secondaryDim,
            labelColor = colorScheme.onSecondary,
            secondaryLabelColor = colorScheme.onSecondary
        )
    // ... other parameters
)

  3. Spécifiez des couleurs fixes (à utiliser avec précaution). Bien qu'il soit généralement recommandé de spécifier les couleurs en fonction de leur rôle sémantique (par exemple, colorScheme.primary), vous pouvez également fournir des valeurs de couleur directes. Cette approche doit être utilisée avec parcimonie, car elle peut entraîner des incohérences avec le thème global, en particulier si le thème change de manière dynamique.

    textEdgeButton(
    colors = filledButtonColors().copy(
        containerColor = android.graphics.Color.RED.argb, // Using named colors
        labelColor = 0xFFFFFF00.argb // Using a hex code for yellow
    )
    // ... other parameters
)

Typographie

Pour créer une cohérence visuelle sur la plate-forme Wear OS et optimiser les performances, tout le texte des cartes est affiché à l'aide d'une police fournie par le système. Autrement dit, les cartes ne sont pas compatibles avec les typographies personnalisées. Sous Wear OS 6 et versions ultérieures, il s'agit d'une police spécifique à l'OEM. Dans la plupart des cas, il s'agit d'une police variable, qui offre une expérience plus expressive et un contrôle plus précis.

Pour créer un style de texte, vous utilisez généralement la méthode text() combinée à des constantes typographiques. Ce composant vous permet d'utiliser des rôles typographiques prédéfinis dans Material 3 Expressive, ce qui aide votre carte à respecter les bonnes pratiques typographiques établies en matière de lisibilité et de hiérarchie. La bibliothèque propose un ensemble de 18 constantes de typographie sémantique, telles que BODY_MEDIUM. Ces constantes affectent également les axes de la police en dehors de la taille.

text(
    text = "Hello, World!".layoutString,
    typography = BODY_MEDIUM,
)

Pour plus de contrôle, vous pouvez fournir des paramètres supplémentaires. Sous Wear OS 6 et versions ultérieures, une police variable est susceptible d'être utilisée, que vous pouvez modifier sur les axes italique, épaisseur, largeur et arrondi. Vous pouvez contrôler ces axes à l'aide du paramètre settings:

text(
    text = "Hello, World".layoutString,
    italic = true,

    // Use elements defined in androidx.wear.protolayout.LayoutElementBuilders.FontSetting
    settings =
        listOf(weight(500), width(100F), roundness(100)),
)

Enfin, si vous devez contrôler la taille ou l'espacement des lettres (non recommandé), utilisez basicText() au lieu de text(), puis créez une valeur pour la propriété fontStyle à l'aide de fontStyle().

Forme et marges

Vous pouvez modifier le rayon des coins de presque tous les composants à l'aide de leur propriété shape. Les valeurs proviennent de la propriété MaterialScope shapes:

textButton(
   height = expand(),
   width = expand(),
   shape = shapes.medium, // OR another value like shapes.full
   colors = filledVariantButtonColors(),
   labelContent = { text("Hello, World!".layoutString) },
)

Après avoir modifié la forme d'un composant, si vous pensez qu'il laisse trop ou trop peu d'espace autour du bord de l'écran, ajustez les marges à l'aide du paramètre margin de primaryLayout():

primaryLayout(
    mainSlot = {
        textButton(
            shape = shapes.small,
            /* ... */
        )
    },
    // margin constants defined in androidx.wear.protolayout.material3.PrimaryLayoutMargins
    margins = MAX_PRIMARY_LAYOUT_MARGIN,
)

Arcs de cercle

Les conteneurs enfants Arc suivants sont acceptés :

  • ArcLine: affiche une ligne courbe autour de l'arc.
  • ArcText: affiche du texte incurvé dans l'arc.
  • ArcAdapter: affiche un élément de mise en page de base dans l'arc, tracé à une tangente par rapport à l'arc.

Pour en savoir plus, consultez la documentation de référence de chacun des types d'éléments.

Modificateurs

Des modificateurs peuvent éventuellement être appliqués à chaque élément de mise en page disponible. Utilisez ces modificateurs aux fins suivantes :

  • Modifier l'apparence visuelle de la mise en page. Par exemple, ajouter un arrière-plan, une bordure ou une marge intérieure à votre élément de mise en page.
  • Ajouter des métadonnées sur la mise en page. Par exemple, ajouter un modificateur de sémantique à votre élément de mise en page pour l'utiliser avec des lecteurs d'écran.
  • Ajouter des fonctionnalités. Par exemple, ajouter un modificateur cliquable à votre élément de mise en page pour rendre la carte interactive. Pour en savoir plus, consultez Interagir avec les cartes.

Nous pouvons, par exemple, personnaliser l'apparence et les métadonnées par défaut d'une Image, comme indiqué dans l'exemple de code suivant:

Kotlin

private fun myImage(): LayoutElement =
    Image.Builder()
        .setWidth(dp(24f))
        .setHeight(dp(24f))
        .setResourceId("image_id")
        .setModifiers(Modifiers.Builder()
            .setBackground(Background.Builder().setColor(argb(0xFFFF0000)).build())
            .setPadding(Padding.Builder().setStart(dp(12f)).build())
            .setSemantics(Semantics.builder()
                .setContentDescription("Image description")
                .build()
            ).build()
        ).build()

Java

private LayoutElement myImage() {
   return new Image.Builder()
           .setWidth(dp(24f))
           .setHeight(dp(24f))
           .setResourceId("image_id")
           .setModifiers(new Modifiers.Builder()
                   .setBackground(new Background.Builder().setColor(argb(0xFFFF0000)).build())
                   .setPadding(new Padding.Builder().setStart(dp(12f)).build())
                   .setSemantics(new Semantics.Builder()
                           .setContentDescription("Image description")
                           .build()
                   ).build()
           ).build();
}

Spannables

Un Spannable est un type de conteneur spécial qui dispose les éléments de la même manière que le texte. Cela s'avère utile lorsque vous souhaitez appliquer un style différent à une seule sous-chaîne d'un bloc de texte plus grand, ce qui n'est pas possible avec l'élément Text.

Un conteneur Spannable est rempli d'éléments enfants Span. Les autres éléments enfants, ou instances Spannable imbriquées, ne sont pas autorisés.

Il existe deux types d'éléments enfants Span :

  • SpanText: affiche le texte avec un style spécifique.
  • SpanImage: affiche une image en l'alignant sur le texte.

Par exemple, vous pouvez mettre en italique le mot "world" dans une carte "Hello world" et insérer une image entre les mots, comme indiqué dans l'exemple de code suivant :

Kotlin

private fun mySpannable(): LayoutElement =
    Spannable.Builder()
        .addSpan(SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(SpanText.Builder()
            .setText("world")
            .setFontStyle(FontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build()

Java

private LayoutElement mySpannable() {
   return new Spannable.Builder()
        .addSpan(new SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(new SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(new SpanText.Builder()
            .setText("world")
            .setFontStyle(newFontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build();
}

Utiliser des ressources

Les cartes n'ont accès à aucune des ressources de votre application. Cela signifie que vous ne pouvez pas transmettre un ID d'image Android à un élément de mise en page Image et vous attendre à ce qu'il soit résolu. Au lieu de cela, remplacez la méthode onTileResourcesRequest() et fournissez des ressources manuellement.

Pour fournir des images au sein de la méthode onTileResourcesRequest(), vous pouvez procéder de deux façons :

Kotlin

override fun onTileResourcesRequest(
    requestParams: ResourcesRequest
) = Futures.immediateFuture(
Resources.Builder()
    .setVersion("1")
    .addIdToImageMapping("image_from_resource", ImageResource.Builder()
        .setAndroidResourceByResId(AndroidImageResourceByResId.Builder()
            .setResourceId(R.drawable.image_id)
            .build()
        ).build()
    )
    .addIdToImageMapping("image_inline", ImageResource.Builder()
        .setInlineResource(InlineImageResource.Builder()
            .setData(imageAsByteArray)
            .setWidthPx(48)
            .setHeightPx(48)
            .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
            .build()
        ).build()
    ).build()
)

Java

@Override
protected ListenableFuture<Resources> onTileResourcesRequest(
       @NonNull ResourcesRequest requestParams
) {
return Futures.immediateFuture(
    new Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping("image_from_resource", new ImageResource.Builder()
            .setAndroidResourceByResId(new AndroidImageResourceByResId.Builder()
                .setResourceId(R.drawable.image_id)
                .build()
            ).build()
        )
        .addIdToImageMapping("image_inline", new ImageResource.Builder()
            .setInlineResource(new InlineImageResource.Builder()
                .setData(imageAsByteArray)
                .setWidthPx(48)
                .setHeightPx(48)
                .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                .build()
            ).build()
        ).build()
);
}

Checklist des images d'aperçu des cartes

Le système affiche l'image d'aperçu de la carte, référencée dans le fichier manifeste de l'application Android, dans l'éditeur de carrousel de cartes. Cet éditeur s'affiche à la fois sur les appareils Wear OS et dans l'application associée de la montre sur les téléphones.

Pour aider les utilisateurs à exploiter pleinement cette image d'aperçu, vérifiez les informations suivantes sur votre carte:

  • Elle reflète la dernière conception. L'aperçu doit représenter fidèlement la conception la plus récente de votre carte.
  • Utilise un thème de couleurs statique. Utilisez le thème de couleur statique de la carte, et non un thème dynamique.
  • Inclut l'icône de l'application. Vérifiez que l'icône de votre application s'affiche en haut de l'image d'aperçu.
  • Indique l'état de chargement/de connexion. L'aperçu doit afficher un état "chargé" ou "connecté" entièrement fonctionnel, en évitant tout contenu vide ou d'espace réservé.
  • Utilisez les règles de résolution des ressources pour la personnalisation (facultatif). Envisagez d'utiliser les règles de résolution des ressources d'Android pour fournir des aperçus correspondant à la taille d'écran, à la langue ou aux paramètres régionaux de l'appareil. Cette fonctionnalité est particulièrement utile si l'apparence de votre carte varie d'un appareil à l'autre.