Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

タイルのスタートガイド

Wear OS バージョン用タイル

アプリでタイルの提供を開始するには、アプリの build.gradle ファイルに次の依存関係を追加します。

Groovy

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

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

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

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

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

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

Kotlin

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

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

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

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

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

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

主なコンセプト

タイルは Android アプリと同じ方法では構築されず、異なるコンセプトを使用します。

レイアウトテンプレート: ディスプレイ上のビジュアル要素の全体的な配置を定義します。これは primaryLayout() 関数によって行われます。
レイアウト要素: ボタンやカードなどの個々のグラフィック要素、または列、buttonGroup などを使用してグループ化された複数の要素を表します。これらはレイアウトテンプレートに埋め込まれています。

リソース: ResourceBuilders.Resources オブジェクトは、レイアウトのレンダリングに必要な Android リソース（画像）の Key-Value ペアのマップとバージョンで構成されます。
タイムライン: TimelineBuilders.Timeline オブジェクトは、レイアウトオブジェクトの 1 つ以上のインスタンスのリストです。レンダラがレイアウトオブジェクトを切り替えるタイミング（特定の時間にレイアウトの表示を停止するなど）を示すために、さまざまなメカニズムと式を指定できます。
状態: タイルとアプリの間で渡される StateBuilders.State 型のデータ構造。2 つのコンポーネントが相互に通信できるようにします。たとえば、タイル上のボタンがタップされた場合、状態にはボタンの ID が保持されます。マップを使用してデータ型を交換することもできます。
タイル: タイルを表す TileBuilders.Tile オブジェクト。タイムライン、リソースバージョン ID、更新間隔、状態で構成されます。
Protolayout: この用語は、タイルに関連するさまざまなクラスの名前で使用され、Wear OS Protolayout ライブラリを指します。これは、さまざまな Wear OS サーフェスで使用されるグラフィックライブラリです。

タイルを作成する

`Material3TileService` を使用する（推奨）

マテリアル 3 タイル（androidx.wear.tiles:tiles:1.6.0 以降）を作成する場合は、下位レベルの TileService クラスではなく、常に Material3TileService を拡張します。Material3TileService は、タイルの開発を簡素化する、Kotlin ファーストのオピニオンアーキテクチャを提供します。

組み込みの Kotlin コルーチン: ListenableFuture を使用して onTileRequest() をオーバーライドする代わりに、単一の MaterialScope.tileResponse(requestParams: TileRequest): Tile 中断関数を実装します。
事前構成済みの MaterialScope: tileResponse() は、MaterialScope をレシーバーとして実行されるため（allowDynamicTheme や defaultColorScheme などのコンストラクタパラメータで構成）、冗長な materialScope() 呼び出しでレイアウトをラップする必要はありません。
1 回の呼び出しでのリソース登録: ProtoLayoutScope を含め、インライン画像リソースを自動的に登録し、1 回のシステムバインダ呼び出しでタイルレイアウトとリソースの両方を返します。Material3TileService はリソースを自動的に処理するため（final onTileResourcesRequest()）、onTileResourcesRequest() をオーバーライドしないでください。

class MyTileService : Material3TileService() {

    override suspend fun MaterialScope.tileResponse(requestParams: TileRequest): Tile =
        tile(
            timeline =
            Timeline.fromLayoutElement(
                primaryLayout(
                    mainSlot = {
                        text("Hello, World!".layoutString, typography = BODY_LARGE)
                    }
                )
            )
        )
}Tile.kt

基盤となる `TileService` アーキテクチャ

Material3TileService は、ベースの TileService クラスを基盤としています。このガイドの残りの例では、このクラスを使用して低レベルのコンセプトを説明します。

アプリからタイルを提供するには、TileService タイプのサービスを実装し、マニフェストに登録します。これに基づいて、システムは onTileRequest() の呼び出し中に必要なタイルをリクエストし、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

次に、AndroidManifest.xml ファイルの <application> タグ内にサービスを追加します。

<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

権限とインテントフィルタにより、このサービスがタイルプロバイダとして登録されます。

ユーザーがスマートフォンまたはスマートウォッチでタイルを設定すると、アイコン、ラベル、説明、プレビューリソースが表示されます。プレビューリソースは、Android のすべての標準リソース修飾子をサポートしているため、画面サイズやデバイスの言語などの要素に応じてプレビューを変更できます。その他の推奨事項については、プレビューチェックリストをご覧ください。

アプリをデプロイし、タイルをタイルカルーセルに追加します（デベロッパーにとってより使いやすいタイルのプレビュー方法もありますが、現時点では手動で行います）。

Material 3 で作成された Wear OS タイル。「Hello World」というテキストが表示されている。 — **図 1.** 「Hello World」タイル。

完全な例については、GitHub のコードサンプルまたは Codelab をご覧ください。

タイルの UI を作成する

Material 3 Expressive の UI 要素は、Kotlin の型安全なビルダーパターンを利用した構造化アプローチを使用して作成されます。

レイアウト

効果的でレスポンシブなタイルレイアウトを作成するための設計原則については、タイルの一般的なレイアウトをご覧ください。

レイアウトを作成する手順は次のとおりです。

マテリアルデザインスコープを開始する: materialScope() 関数を呼び出し、必要な context と deviceConfiguration を指定します。allowDynamicTheme や defaultColorScheme などのオプションパラメータを含めることができます。allowDynamicTheme はデフォルトで true です。defaultColorScheme は、ダイナミックカラーが利用できない場合（ユーザーが機能をオフにした場合、デバイスでサポートされていない場合、allowDynamicTheme が false の場合など）に使用される ColorScheme を表します。カスタム TileService で backgroundImage() などの ImageResource API を使用する場合は、代わりに materialScopeWithResources() を呼び出します。

スコープ内で UI を構築する: 特定のタイルレイアウトのすべての UI コンポーネントは、単一の最上位 materialScope() 呼び出しのラムダ内で定義する必要があります。これらのコンポーネント関数（primaryLayout() や textEdgeButton() など）は MaterialScope の拡張関数であり、このレシーバスコープで呼び出された場合にのみ使用できます。

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(
                labelContent = { text("Action".layoutString) },
                onClick = clickable()
            )
        }
    )
}GetStarted.kt

スロット

M3 では、タイルレイアウトは Compose に着想を得たアプローチを使用し、3 つの異なるスロットを利用します。上から順に次のとおりです。

titleSlot。通常はメインのタイトルまたはヘッダーに使用します。
mainSlot。コアコンテンツ用。
bottomSlot。アクションや補足情報によく使用されます。ここには、エッジボタンも表示されます。

titleSlot、mainSlot、bottomSlot を示すタイルレイアウト — **図 2.** titleSlot、mainSlot、bottomSlot。

各スロットの内容は次のとおりです。

titleSlot（省略可）: 通常は text() によって生成される数語。
mainSlot（必須）: 行、列、ボタングループなどの構造に編成されたコンポーネント。これらのコンポーネントは、互いに再帰的に埋め込むこともできます。たとえば、列に行を含めることができます。
bottomSlot（省略可）: 通常は、エッジハグボタンまたはテキストラベルが入力されます。

タイルはスクロールできないため、ページング、スクロール、長いコンテンツリストの処理を行うコンポーネントはありません。フォントサイズが大きくなったり、翻訳によってテキストが長くなったりしても、コンテンツが引き続き表示されるように注意してください。

UI コンポーネント

protolayout-material3 ライブラリには、Material 3 Expressive の仕様とユーザーインターフェースの推奨事項に沿って設計された多数のコンポーネントが用意されています。

ボタン

ボタンは主にアクション指向です。これらは、特定のアクションをトリガーするために使用されます。各ボタンのコンテンツ（アイコンや短いテキストなど）は、アクションを識別します。

textButton():（短い）テキストコンテンツ用のスロットが 1 つあるボタン
iconButton(): アイコンを表すスロットが 1 つあるボタン
avatarButton(): 縦に並んだラベルとサブのラベル、およびその横の画像（アバター）を表すコンテンツを配置できる最大 3 つのスロットを備えた、ピル型のアバターボタン
imageButton(): クリック可能な画像ボタン。追加のスロットはなく、画像のみ（背景としての backgroundImage など）を提供します。
compactButton(): 最大 2 つのスロットを提供するコンパクトボタン。アイコンとテキストを横に並べて表示するコンテンツを取得します。
button(): 縦に並んだラベルとサブのラベル、およびその横のアイコンを表すコンテンツを取得するためのスロットを最大 3 つ提供する、ピル型のボタン

エッジボタン

エッジボタンは、スマートウォッチの丸い画面の下部に固定された、全幅の特殊なボタンです。現在のタイル画面から実行する最も重要なアクションを表します。

iconEdgeButton(): アイコンまたは同様の丸い小さなコンテンツを取得するためのスロットが 1 つ用意されているエッジボタン
textEdgeButton(): テキストまたは同様に長くて幅の広いコンテンツを取得するための単一のスロットを提供するエッジボタン

カード

カードは主に情報指向です。関連する構造化データのコレクションを表示します。インタラクティブなカードを作成することもできますが、通常は情報の概要が表示され、ユーザーがタップすると詳細が表示されたり、関連するアクションが実行されたりします。

titleCard(): 1 ～ 3 個のスロット（通常はテキストベース）を提供するタイトルカード
appCard(): 最大 5 つのスロットを提供するアプリカード。通常はテキストベース
textDataCard(): 最大 3 つの垂直方向に積み重ねられたスロットを提供するデータカード。通常はテキストまたは数字ベースです。
iconDataCard(): 最大 3 つの縦に並んだスロット（通常はテキストまたは数字ベース）とアイコンを提供するデータカード
graphicDataCard(): グラフィックデータカード。グラフィックデータ（進行状況インジケーターなど）用のスロットと、通常はテキストの説明に使用される、垂直方向に積み重ねられた最大 2 つのスロットを提供します。

進行状況インジケーター

circularProgressIndicator(): 放射状の要素を使用して目標に対する進捗状況を示します。
segmentedCircularProgressIndicator(): 複数のステージがある放射状の要素を使用して、目標に対する進捗状況を示します。

グループレイアウト要素

buttonGroup(): 子を横方向に並べて配置するコンポーネントレイアウト
primaryLayout(): 推奨される M3 レイアウトスタイルを表す全画面レイアウト。レスポンシブで、要素の配置を処理し、推奨されるマージンとパディングが適用されます。

テーマを適用する

Material 3 Expressive では、カラーシステムは 29 の標準カラーロールで定義され、プライマリ、セカンダリ、ターシャリ、エラー、サーフェス、アウトラインの 6 つのグループに分類されます。

Material 3 Expressive のカラーシステム。プライマリ、セカンダリ、ターシャリ、エラー、サーフェス、アウトラインなどのグループに分類されたカラーロールが表示されています。 — **図 3.** Material 3 Expressive カラーシステム。

ColorScheme は、これら 29 個のロールをそれぞれ対応する色にマッピングします。これは MaterialScope の一部であり、コンポーネントはその中で作成する必要があるため、自動的にカラースキームから色が取得されます。この方法により、すべての UI 要素がマテリアルデザインの標準に自動的に準拠します。

ユーザーが、定義したカラーパターン（ブランドカラーを反映したカラーパターンなど）と、システムが提供するカラーパターン（ユーザーの現在のウォッチフェイスから派生したカラーパターン、またはユーザーが選択したカラーパターン）のいずれかを選択できるようにするには、次のように MaterialScope を初期化します。

val myColorScheme =
    ColorScheme(
        primary = Color.rgb(0, 0, 255).argb, // Blue
        onPrimary = Color.rgb(255, 255, 255).argb, // White
        // 27 more
    )

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

このオプションを選択する場合は、モノクロのタイルアイコンを指定して、どのテーマでも最適な視認性が得られるように適切に色付けできるようにします。

指定したカラーパターンでタイルを強制的に表示するには、allowDynamicTheme を false に設定して、ダイナミックテーマ設定のサポートを無効にします。

materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration,
    allowDynamicTheme = false,
    defaultColorScheme = myColorScheme
) {
    // myColorScheme is *always* used.
}GetStarted.kt

色

各コンポーネントは、ColorScheme で定義された 29 個のカラーロールのサブセットを使用します。たとえば、ボタンは最大 4 色を使用します。デフォルトでは、アクティブな ColorScheme の「プライマリ」グループから取得されます。

`ButtonColors` コンポーネントトークン	`ColorScheme` ロール
containerColor	メイン
iconColor	onPrimary
labelColor	onPrimary
secondaryLabelColor	onPrimary（不透明度 0.8）

Wear OS のデザインに色を適用する方法について詳しくは、カラーデザインガイドをご覧ください。

特定の UI 要素では、デフォルトのカラートークンから逸脱する必要がある場合があります。たとえば、1 つの textEdgeButton で「primary」ではなく「secondary」または「tertiary」グループの色を使用して、目立たせ、コントラストを良くしたい場合があります。

コンポーネントの色は、次のいくつかの方法でカスタマイズできます。

事前定義された色にはヘルパー関数を使用する。filledTonalButtonColors() などのヘルパー関数を使用して、Material 3 Expressive の標準ボタンスタイルを適用します。これらの関数は、塗りつぶし、トーン、アウトラインなどの一般的なスタイルを、MaterialScope 内のアクティブな ColorScheme の適切なロールにマッピングする、事前構成済みの ButtonColors インスタンスを作成します。これにより、一般的なボタンタイプごとに色を手動で定義することなく、一貫したスタイルを適用できます。
```
textEdgeButton(
    colors = filledButtonColors(), // default
    /* OR colors = filledTonalButtonColors() */
    /* OR colors = filledVariantButtonColors() */
    // ... other parameters
)GetStarted.kt
```
カードの場合は、同等の filledCardColors() 関数ファミリーを使用します。

1 つまたは 2 つのトークンのみを変更する必要がある場合は、copy() メソッドを使用して、ヘルパー関数から返された ButtonColors オブジェクトを変更することもできます。
```
textEdgeButton(
    colors =
    filledButtonColors()
        .copy(
            containerColor = colorScheme.tertiary,
            labelColor = colorScheme.onTertiary
        ),
    // ... other parameters
)GetStarted.kt
```

代替のカラーロールを明示的に指定する。独自の ButtonColors オブジェクトを作成し、コンポーネントに渡します。カードの場合は、同等の CardColors オブジェクトを使用します。

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

固定色を指定する（注意して使用してください）。一般的には、色の意味的な役割（colorScheme.primary など）で色を指定することをおすすめしますが、色の値を直接指定することもできます。この方法は、特にテーマが動的に変更される場合に、全体的なテーマとの不整合につながる可能性があるため、慎重に使用する必要があります。
```
textEdgeButton(
    colors = filledButtonColors().copy(
        containerColor = android.graphics.Color.RED.argb, // Using named colors
        labelColor = 0xFFFFFF00.toInt().argb // Using a hex code for yellow
    ),
    // ... other parameters
)GetStarted.kt
```

タイポグラフィ

デザインでタイポグラフィを効果的に使用する方法について詳しくは、タイポグラフィデザインガイドをご覧ください。

Wear OS プラットフォーム全体で視覚的な一貫性を保ち、パフォーマンスを最適化するため、タイルのすべてのテキストはシステム提供のフォントを使用してレンダリングされます。つまり、タイルはカスタム書体をサポートしていません。Wear OS 6 以降では、これは OEM 固有のフォントです。ほとんどの場合、可変フォントであり、より表現力豊かなエクスペリエンスときめ細かい制御が可能です。

テキストスタイルを作成するには、通常、text() メソッドとタイポグラフィ定数を組み合わせて使用します。このコンポーネントを使用すると、Material 3 Expressive で事前定義されたタイポグラフィロールを利用できます。これにより、タイルは、読みやすさと階層に関する確立されたタイポグラフィのベストプラクティスに準拠できます。このライブラリには、BODY_MEDIUM などの 18 個のセマンティックタイポグラフィ定数が用意されています。これらの定数は、サイズ以外のフォント軸にも影響します。

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

より詳細な制御が必要な場合は、追加の設定を指定できます。Wear OS 6 以降では、可変フォントが使用される可能性が高く、イタリック、太さ、幅、丸みの軸に沿って変更できます。これらの軸は、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)
    ),
)GetStarted.kt

最後に、サイズまたは文字間隔を制御する必要がある場合は（非推奨）、text() の代わりに basicText() を使用し、fontStyle() を使用して fontStyle プロパティの値を構築します。

形状とマージン

ほぼすべてのコンポーネントの角丸は、shape プロパティを使用して変更できます。値は MaterialScope プロパティ shapes から取得されます。

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

コンポーネントの形状を変更した後、ディスプレイの端に余白が多すぎる、または少なすぎると思われる場合は、primaryLayout() の margin パラメータを使用してマージンを調整します。

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

アーク

サポートされている Arc コンテナの子は次のとおりです。

ArcLine: 円弧の周りに曲線をレンダリングします。
ArcText: 円弧の中に曲線テキストをレンダリングします。
ArcAdapter: 円弧の中に基本的なレイアウト要素をレンダリングし、円弧の接線上に描画します。

詳細については、それぞれの要素のリファレンスドキュメントをご覧ください。

修飾子

利用可能なすべてのレイアウト要素に、必要に応じて修飾子を適用できます。修飾子は以下の目的で使用します。

レイアウトの外観を変更する: たとえば、レイアウト要素に背景、枠線、パディングを追加します。
レイアウトに関するメタデータを追加する: たとえば、スクリーンリーダーで使用するセマンティクス修飾子をレイアウト要素に追加します。
機能を追加する: たとえば、レイアウト要素にクリック可能な修飾子を追加して、タイルをインタラクティブにします。詳しくは、タイルを操作するをご覧ください。

たとえば、次のコードサンプルに示すように、Image のデフォルトの外観とメタデータをカスタマイズできます。

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

Spannable

Spannable は、テキストと同様に要素をレイアウトする特別なタイプのコンテナです。大きなテキストブロック内の 1 つの部分文字列だけに別のスタイルを適用する場合に便利です。これは Text 要素では不可能です。

Spannable コンテナは Span の子で満たされます。その他の子やネストされた Spannable インスタンスは使用できません。

Span の子には、次の 2 種類があります。

SpanText: テキストを特定のスタイルでレンダリングします。
SpanImage: テキストとともに画像をインラインでレンダリングします。

たとえば、次のコードサンプルに示すように、「Hello world」タイルの「world」を斜体にし、単語の間に画像を挿入できます。

private fun mySpannable(): LayoutElement =
    LayoutElementBuilders.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()Tile.kt

リソースを扱う

タイルはアプリのリソースにアクセスできません。これは、Android 画像 ID を Image レイアウト要素に渡して解決することができないことを意味します。代わりに、onTileResourcesRequest() メソッドをオーバーライドし、リソースを手動で指定します。

onTileResourcesRequest() メソッド内で画像を指定する方法には次の 2 つがあります。

setAndroidResourceByResId() を使用して、ドローアブルリソースを指定する。
setInlineResource() を使用して、動的画像を ByteArray として指定する。

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

タイルプレビュー画像のチェックリスト

システムは、Android アプリマニフェストで参照されているタイルプレビュー画像を、新しいタイルを追加するためのタイルカルーセルエディタに表示します。このエディタは、Wear OS デバイスと、スマートフォンのスマートウォッチコンパニオンアプリの両方に表示されます。

ユーザーがこのプレビュー画像を最大限に活用できるように、タイルに関する次の詳細を確認してください。

最新のデザインを反映。プレビューには、タイルの最新のデザインが正確に反映されている必要があります。
推奨ディメンションを使用する。最適な表示品質と優れたユーザーエクスペリエンスを提供するには、プレビュー画像のサイズを 400px × 400px にする必要があります。
静的なカラーテーマを使用する。動的なカラーテーマではなく、タイルの静的なカラーテーマを使用します。
アプリアイコンが含まれている。アプリのアイコンがプレビュー画像の上部に表示されていることを確認します。
読み込み済み / ログイン済みの状態を表示する。プレビューには、完全に機能する「読み込み済み」または「ログイン済み」の状態を表示し、空のコンテンツやプレースホルダコンテンツは表示しないようにしてください。
カスタマイズにリソース解決ルールを活用する（省略可）。Android のリソース解決ルールを使用して、デバイスのディスプレイサイズ、言語、ロケール設定に一致するプレビューを提供することを検討してください。これは、タイルの外観がデバイスによって異なる場合に特に便利です。