Erste Schritte mit Kacheln

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Wenn Sie Kacheln über Ihre App bereitstellen möchten, fügen Sie der build.gradle-Datei Ihrer App die folgenden Abhängigkeiten hinzu.

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"
}

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")
}

Schlüsselkonzepte

Ansichten werden nicht wie Android-Apps erstellt und nutzen andere Konzepte:

• Layoutvorlagen: Hiermit wird die Gesamtanordnung der visuellen Elemente auf dem Display definiert. Dazu wird die Funktion primaryLayout() verwendet.
• Layoutelemente: Stellt ein einzelnes grafische Element dar, z. B. eine Schaltfläche oder Karte, oder mehrere solche Elemente, die mithilfe einer Spalte, Schaltflächengruppe oder ähnlichem gruppiert sind. Sie sind in einer Layoutvorlage eingebettet.

• Ressourcen: ResourceBuilders.Resources-Objekte bestehen aus einer Zuordnung von Schlüssel/Wert-Paaren der Android-Ressourcen (Bilder), die zum Rendern eines Layouts erforderlich sind, und einer Version.
• Zeitachse:Ein TimelineBuilders.Timeline-Objekt ist eine Liste mit einer oder mehreren Instanzen eines Layoutobjekts. Sie können verschiedene Mechanismen und Ausdrücke angeben, um anzugeben, wann der Renderer von einem Layoutobjekt zu einem anderen wechseln soll, z. B. um ein Layout zu einer bestimmten Zeit nicht mehr anzuzeigen.
• Status: Eine Datenstruktur vom Typ StateBuilders.State, die zwischen Kachel und App übergeben wird, damit die beiden Komponenten miteinander kommunizieren können. Wenn beispielsweise auf eine Schaltfläche auf der Kachel getippt wird, enthält der Status die ID der Schaltfläche. Sie können Datentypen auch mithilfe einer Zuordnungstabelle austauschen.
• Kachel: Ein TileBuilders.Tile-Objekt, das eine Kachel darstellt und aus einer Zeitachse, einer Ressourcenversions-ID, einem Aktualitätsintervall und einem Status besteht.
• Protolayout:Dieser Begriff wird im Namen verschiedener Kacheln betreffender Klassen verwendet und bezieht sich auf die Wear OS Protolayout-Bibliothek, eine Grafikbibliothek, die auf verschiedenen Wear OS-Oberflächen verwendet wird.

Kachel erstellen

Wenn Sie eine Kachel aus Ihrer App bereitstellen möchten, implementieren Sie einen Dienst vom Typ TileService und registrieren Sie ihn in Ihrem Manifest. Daraufhin fordert das System die erforderlichen Kacheln bei Aufrufen von onTileRequest() und die Ressourcen bei Aufrufen von onTileResourcesRequest() an.

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

Fügen Sie als Nächstes einen Dienst im <application>-Tag Ihrer AndroidManifest.xml-Datei hinzu.

<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

Der Berechtigungs- und Intent-Filter registriert diesen Dienst als Anbieter von Ansichten.

Das Symbol, das Label, die Beschreibung und die Vorschau werden dem Nutzer angezeigt, wenn er Kacheln auf seinem Smartphone oder seiner Smartwatch konfiguriert. Die Vorschauressource unterstützt alle Standardressourcenqualifizierer von Android. So können Sie die Vorschau an Faktoren wie Bildschirmgröße und Gerätesprache anpassen. Weitere Empfehlungen finden Sie in der Vorschau-Checkliste.

Stellen Sie Ihre App bereit und fügen Sie die Ansicht dem Ansichtenkarussell hinzu. Es gibt auch eine entwicklerfreundlichere Möglichkeit, eine Ansicht in der Vorschau anzusehen, aber fürs Erste gehen Sie einfach manuell vor.

Ein vollständiges Beispiel finden Sie im Codebeispiel auf GitHub oder im Codelab.

Benutzeroberfläche für Kacheln erstellen

Material 3 Expressive-UI-Elemente werden mit einem strukturierten Ansatz erstellt, der auf dem typsicheren Builder-Muster von Kotlin basiert.

Layout

So erstellen Sie ein Layout:

1. Material Design-Kontext initiieren:Rufen Sie die Funktion materialScope() auf und geben Sie die erforderlichen context- und deviceConfiguration-Werte an. Sie können optionale Parameter wie allowDynamicTheme und defaultColorScheme angeben. allowDynamicTheme ist standardmäßig true und defaultColorScheme steht für ColorScheme, das verwendet wird, wenn dynamische Farben nicht verfügbar sind, z. B. wenn der Nutzer die Funktion deaktiviert hat, oder wenn sie vom Gerät nicht unterstützt wird oder allowDynamicTheme false ist.

2. UI im Gültigkeitsbereich erstellen:Alle UI-Komponenten für ein bestimmtes Ansichtslayout müssen im Lambda eines einzelnen Aufrufs der obersten Ebene materialScope() definiert werden. Diese Komponentenfunktionen wie primaryLayout() und textEdgeButton() sind Erweiterungsfunktionen von MaterialScope und sind nur verfügbar, wenn sie in diesem Empfängerbereich aufgerufen werden.

   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) }
       )
   }
   

Spielautomaten

In M3 wird für das Ansichtslayout ein von Compose inspirierter Ansatz verwendet, der drei verschiedene Slots nutzt. Von oben nach unten sind das:

1. Die titleSlot, in der Regel für einen Haupttitel oder eine Hauptüberschrift.
2. mainSlot für den Hauptinhalt.
3. bottomSlot, wird oft für Aktionen oder zusätzliche Informationen verwendet. Dort wird auch eine Edge-Schaltfläche angezeigt.

Die Inhalte der einzelnen Slots sind:

• titleSlot (optional): In der Regel einige Wörter, die von text() generiert wurden.
• mainSlot (erforderlich): Komponenten, die in Strukturen wie Zeilen, Spalten und Schaltflächengruppen organisiert sind. Diese Komponenten können auch rekursiv ineinander verschachtelt werden. Eine Spalte kann beispielsweise Zeilen enthalten.
• bottomSlot (optional): Wird in der Regel entweder mit einer randabschließenden Schaltfläche oder einem Textlabel ausgefüllt.

Da Kacheln nicht gescrollt werden können, gibt es keine Komponenten für das Blättern, Scrollen oder Verwalten langer Inhaltslisten. Achten Sie darauf, dass die Inhalte sichtbar bleiben, wenn die Schriftgröße erhöht wird oder der Text aufgrund der Übersetzung länger wird.

UI-Komponenten

Die protolayout-material3-Bibliothek bietet eine große Anzahl von Komponenten, die gemäß den Spezifikationen und Empfehlungen für die Benutzeroberfläche von Material 3 Expressive entwickelt wurden.

Tasten

• textButton(): Schaltfläche mit einem einzelnen Steckplatz für (kurzen) Textinhalt
• iconButton(): Schaltfläche mit einem einzelnen Steckplatz für ein Symbol
• avatarButton(): Tablettenförmige Avatarschaltfläche mit bis zu drei Slots für Inhalte, die ein vertikal gestapeltes Label und ein sekundäres Label sowie ein Bild (Avatar) daneben darstellen
• imageButton(): Klickbare Bildschaltfläche ohne zusätzliche Slots, nur Bild (z. B. backgroundImage als Hintergrund)
• compactButton(): Kompaktschaltfläche mit bis zu zwei Slots für horizontal gestapelte Inhalte, die ein Symbol und daneben Text enthalten
• button(): ovale Schaltfläche mit bis zu drei Slots für Inhalte, die ein vertikal gestapeltes Label und ein sekundäres Label sowie ein Symbol daneben darstellen

Edge-Schaltflächen

• iconEdgeButton(): Ränderschaltfläche mit einem einzelnen Steckplatz für ein Symbol oder ähnliche runde, kleine Inhalte
• textEdgeButton(): Edge-Schaltfläche mit einem einzelnen Steckplatz für Text oder ähnlich lange und breite Inhalte

Kreditkarten

• titleCard(): Titelkarte mit einem bis drei Slots, in der in der Regel Text verwendet wird
• appCard(): App-Karte mit bis zu fünf Steckplätzen, in der in der Regel Text verwendet wird
• textDataCard(): Datenkarte mit bis zu drei vertikal gestapelten Steckplätzen, in der in der Regel Text oder Ziffern verwendet werden
• iconDataCard(): Datenkarte mit bis zu drei vertikal gestapelten Steckplätzen, in der in der Regel Text oder Zahlen mit einem Symbol angezeigt werden
• graphicDataCard(): Grafikdatenkarte mit einem Steckplatz für Grafikdaten wie eine Fortschrittsanzeige und bis zu zwei vertikal gestapelten Steckplätzen, in der Regel für Textbeschreibungen

Fortschrittsanzeigen

• circularProgressIndicator(): Gibt den Fortschritt auf dem Weg zu einem Ziel mithilfe eines radialen Elements an.
• segmentedCircularProgressIndicator(): Gibt den Fortschritt auf dem Weg zu einem Ziel mithilfe eines radialen Elements mit verschiedenen Phasen an.

Layoutelemente gruppieren

• buttonGroup(): Komponentenlayout, das seine untergeordneten Elemente in einer horizontalen Sequenz anordnet
• primaryLayout(): Vollbildlayout, das einen vorgeschlagenen responsiven M3-Layoutstil darstellt und die Platzierung der Elemente sowie die empfohlenen Ränder und Abstände berücksichtigt

Designs

In Material 3 Expressive wird das Farbsystem durch 29 Standardfarbrollen definiert, die in sechs Gruppen unterteilt sind: Primär, Sekundär, Tertiär, Fehler, Oberfläche und Umriss.

In einem ColorScheme wird jeder dieser 29 Rollen eine entsprechende Farbe zugewiesen. Da es Teil des MaterialScope ist und Komponenten darin erstellt werden müssen, werden automatisch Farben aus dem Farbschema übernommen. So entsprechen alle UI-Elemente automatisch den Material Design-Standards.

Wenn Sie Nutzern die Möglichkeit geben möchten, zwischen einem von Ihnen definierten Farbschema – z. B. einem, das Ihre Markenfarben widerspiegelt – und einem vom System bereitgestellten Farbschema zu wählen, das entweder aus dem aktuellen Zifferblatt des Nutzers oder einem vom Nutzer ausgewählten Zifferblatt abgeleitet wird, initialisieren Sie MaterialScope so:

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.
}

Wenn Sie Ihre Kacheln im von Ihnen angegebenen Farbschema anzeigen lassen möchten, deaktivieren Sie die Unterstützung für dynamische Themen, indem Sie allowDynamicTheme auf false setzen:

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

Farbe

Jede einzelne Komponente verwendet eine Teilmenge der 29 Farbrollen, die durch eine ColorScheme definiert sind. Für Schaltflächen werden beispielsweise bis zu vier Farben verwendet, die standardmäßig aus der Gruppe „primär“ der aktiven ColorScheme stammen:

Möglicherweise müssen Sie für bestimmte UI-Elemente von den Standardfarb-Tokens abweichen. Beispielsweise können Sie für eine textEdgeButton Farben aus der Gruppe „sekundär“ oder „teritär“ anstelle von „primär“ verwenden, um sie hervorzuheben und einen besseren Kontrast zu erzielen.

Sie haben mehrere Möglichkeiten, die Komponentenfarben anzupassen:

1. Eine Hilfsfunktion für vordefinierte Farben verwenden Verwenden Sie Hilfsfunktionen wie filledTonalButtonColors(), um die Standardschalterstilen für Material 3 Expressive anzuwenden. Mit diesen Funktionen werden vorkonfigurierte ButtonColors-Instanzen erstellt, die gängige Stile wie „Füllung“, „Ton“ oder „Umriss“ den entsprechenden Rollen aus der aktiven ColorScheme innerhalb der MaterialScope zuordnen. So können Sie einheitliche Stile anwenden, ohne jede Farbe für gängige Schaltflächentypen manuell definieren zu müssen.

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

   Verwenden Sie für Karten die entsprechende Funktionsfamilie filledCardColors().

   Wenn Sie nur ein oder zwei Tokens ändern möchten, können Sie das von den Hilfsfunktionen zurückgegebene ButtonColors-Objekt auch mithilfe der Methode copy() ändern:

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

2. Geben Sie explizit Ersatzfarbrollen an. Erstellen Sie ein eigenes ButtonColors-Objekt und übergeben Sie es an die Komponente. Verwenden Sie für Karten das entsprechende CardColors-Objekt.

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

3. Feste Farben angeben (mit Vorsicht verwenden) Es wird zwar allgemein empfohlen, Farben anhand ihrer semantischen Rolle anzugeben (z.B. colorScheme.primary) können Sie auch direkte Farbwerte angeben. Dieser Ansatz sollte sparsam verwendet werden, da er zu Inkonsistenzen mit dem Gesamtthema führen kann, insbesondere wenn sich das Thema dynamisch ändert.

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

Typografie

Um für visuelle Einheitlichkeit auf der Wear OS-Plattform zu sorgen und die Leistung zu optimieren, wird der gesamte Text auf Kacheln mit einer vom System bereitgestellten Schriftart gerendert. Das heißt, dass für Kacheln keine benutzerdefinierten Schriftarten unterstützt werden. Unter Wear OS 6 und höher ist dies eine OEM-spezifische Schriftart. In den meisten Fällen handelt es sich um eine variable Schriftart, die eine ausdrucksstärkere Darstellung und eine detailliertere Steuerung bietet.

Um einen Textstil zu erstellen, verwenden Sie in der Regel die Methode text() in Kombination mit typografischen Konstanten. Mit dieser Komponente können Sie vordefinierte Typografierollen in Material 3 Expressive verwenden, damit Ihre Kachel den etablierten typografischen Best Practices für Lesbarkeit und Hierarchie entspricht. Die Bibliothek bietet 18 semantisches Typografiekonstanten, z. B. BODY_MEDIUM. Diese Konstanten wirken sich auch auf andere Schriftachsen als die Größe aus.

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

Für mehr Kontrolle können Sie zusätzliche Einstellungen festlegen. Unter Wear OS 6 und höher wird wahrscheinlich eine variable Schrift verwendet, die Sie entlang der Achsen kursiv, Schriftstärke, Breite und Rundung ändern können. Sie können diese Achsen mit dem Parameter settings steuern:

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

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

Wenn Sie die Größe oder das Abstand zwischen den Buchstaben steuern möchten (nicht empfohlen), verwenden Sie basicText() anstelle von text() und erstellen Sie mit fontStyle() einen Wert für das Attribut fontStyle.

Form und Ränder

Sie können den Eckradius fast jeder Komponente mithilfe der entsprechenden shape-Property ändern. Die Werte stammen aus dem MaterialScope-Attribut shapes:

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

Wenn Sie die Form einer Komponente geändert haben und der Abstand zum Displayrand Ihrer Meinung nach zu groß oder zu klein ist, können Sie die Ränder mit dem Parameter margin von primaryLayout() anpassen:

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

Bögen

Die folgenden Arc-Container-Unterelemente werden unterstützt:

• ArcLine: Damit wird eine gebogene Linie um den Bogen gerendert.
• ArcText: Hiermit wird geschwungener Text im Bogen gerendert.
• ArcAdapter: Hiermit wird ein einfaches Layoutelement im Bogen gerendert, das tangential zum Bogen gezeichnet wird.

Weitere Informationen finden Sie in der Referenzdokumentation zu den einzelnen Elementtypen.

Modifikatoren

Auf jedes verfügbare Layoutelement können optional Modifikatoren angewendet werden. Verwenden Sie diese Modifikatoren für die folgenden Zwecke:

• Das visuelle Erscheinungsbild des Layouts ändern. Fügen Sie dem Layoutelement beispielsweise einen Hintergrund, einen Rahmen oder einen Abstand hinzu.
• Fügen Sie Metadaten zum Layout hinzu. Fügen Sie Ihrem Layoutelement beispielsweise einen semantischen Modifikator für die Verwendung mit Screenreadern hinzu.
• Funktionen hinzufügen. Fügen Sie Ihrem Layoutelement beispielsweise einen anklickbaren Modifier hinzu, um die Kachel interaktiv zu machen. Weitere Informationen finden Sie unter Mit Kacheln interagieren.

So können wir beispielsweise das Standard-Aussehen und die Metadaten eines Image anpassen, wie im folgenden Codebeispiel gezeigt:

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()

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();
}

Expandable-Anzeigen

Ein Spannable ist ein spezieller Containertyp, in dem Elemente ähnlich wie Text angeordnet werden. Das ist nützlich, wenn Sie nur einem Teilstring in einem größeren Textblock einen anderen Stil zuweisen möchten. Das ist mit dem Element Text nicht möglich.

Ein Spannable-Container ist mit Span Kindern gefüllt. Andere untergeordnete Elemente oder verschachtelte Spannable-Instanzen sind nicht zulässig.

Es gibt zwei Arten von Span-Unterelementen:

• SpanText: Damit wird Text in einem bestimmten Stil gerendert.
• SpanImage: ein Bild wird inline mit dem Text gerendert.

Sie können beispielsweise „Welt“ in einer Kachel „Hallo Welt“ kursiv formatieren und ein Bild zwischen die Wörter einfügen, wie im folgenden Codebeispiel gezeigt:

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()

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();
}

Mit Ressourcen arbeiten

Ansichten haben keinen Zugriff auf die Ressourcen Ihrer App. Das bedeutet, dass Sie einer Image-Layout-Komponente keine Android-Bild-ID übergeben können und erwarten können, dass sie aufgelöst wird. Überschreiben Sie stattdessen die Methode onTileResourcesRequest() und stellen Sie alle Ressourcen manuell bereit.

Es gibt zwei Möglichkeiten, Bilder in der onTileResourcesRequest()-Methode anzugeben:

• Geben Sie mit setAndroidResourceByResId() eine Zeichnen-Ressource an.
• Geben Sie ein dynamisches Bild als ByteArray mit setInlineResource() an.

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()
)

@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()
);
}

Checkliste für Vorschaubilder von Kacheln

Das System zeigt das Vorschaubild der Kachel, auf das im Android-App-Manifest verwiesen wird, im Editor für das Kachelkarussell an. Dieser Editor wird sowohl auf Wear OS-Geräten als auch in der Companion App der Smartwatch auf Smartphones angezeigt.

Damit Nutzer dieses Vorschaubild optimal nutzen können, prüfen Sie die folgenden Details zu Ihrer Kachel:

• Entspricht dem aktuellen Design. Die Vorschau sollte das aktuelle Design Ihrer Kachel genau wiedergeben.
• Es wird ein statisches Farbdesign verwendet. Verwenden Sie das statische Farbschema der Kachel, kein dynamisches.
• Enthält das App-Symbol. Prüfen Sie, ob das Symbol Ihrer App oben im Vorschaubild angezeigt wird.
• Zeigt den Status „Geladen“/„Angemeldet“ an. Die Vorschau sollte einen voll funktionsfähigen Status „Geladen“ oder „Angemeldet“ anzeigen. Leere oder Platzhalterinhalte sind nicht zulässig.
• Ressourcenauflösungsregeln für die Anpassung nutzen (optional) Sie können die Ressoucenauflösungsregeln von Android verwenden, um Vorschauen bereitzustellen, die der Bildschirmgröße, Sprache oder Gebietsschemaeinstellungen des Geräts entsprechen. Das ist besonders nützlich, wenn das Aussehen Ihrer Kachel auf verschiedenen Geräten variiert.