Kartları kullanmaya başlayın

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Uygulamanızdan karo sağlamaya başlamak için uygulamanızın build.gradle dosyasına aşağıdaki bağımlılıkları ekleyin.

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

Temel kavramlar

Kartlar, Android uygulamalarıyla aynı şekilde oluşturulmaz ve farklı kavramlardan yararlanır:

• Düzen şablonları: Ekrandaki görsel öğelerin genel düzenini tanımlayın. Bu işlem primaryLayout() işlevi tarafından gerçekleştirilir.
• Düzen öğeleri: Düğme veya kart gibi tek bir grafik öğeyi ya da sütun, buttonGroup veya benzeri bir öğe kullanılarak birlikte gruplandırılmış birkaç öğeyi temsil eder. Bunlar bir düzen şablonuna yerleştirilir.

• Kaynaklar: ResourceBuilders.Resources nesneleri, bir düzeni oluşturmak için gereken Android kaynaklarının (resimler) anahtar/değer çiftlerinden oluşan bir haritadan ve bir sürümden oluşur.
• Zaman çizelgesi: TimelineBuilders.Timeline nesnesi, bir veya daha fazla düzenleme nesnesi örneğinin listesidir. Oluşturucunun ne zaman bir düzen nesnesinden diğerine geçmesi gerektiğini belirtmek için çeşitli mekanizmalar ve ifadeler sağlayabilirsiniz (ör. belirli bir zamanda bir düzeni göstermeyi durdurmak için).
• Durum: İki bileşenin birbiriyle iletişim kurmasını sağlamak için kart ile uygulama arasında aktarılan StateBuilders.State türündeki bir veri yapısı. Örneğin, kartta bir düğmeye dokunulursa durum, düğmenin kimliğini içerir. Veri türlerini harita kullanarak da değiştirebilirsiniz.
• Kart: Bir kartı temsil eden TileBuilders.Tile nesnesi. Bu nesne; zaman çizelgesi, kaynak sürümü kimliği, güncellenme aralığı ve durum içerir.
• Protolayout: Bu terim, çeşitli kartlarla ilgili sınıfların adında görünür ve çeşitli Wear OS yüzeylerinde kullanılan bir grafik kitaplığı olan Wear OS Protolayout kitaplığını ifade eder.

Kart oluşturma

Uygulamanızdan bir kart sağlamak için TileService türündeki bir hizmet uygulayın ve bu hizmeti manifest'inize kaydedin. Sistem, onTileRequest() adresine yapılan çağrılar sırasında gerekli kartonları ve onTileResourcesRequest() adresine yapılan çağrılar sırasında gerekli kaynakları ister.

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

Ardından, AndroidManifest.xml dosyanızın <application> etiketine bir hizmet ekleyin.

<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

İzin ve intent filtresi, bu hizmeti kart sağlayıcı olarak kaydeder.

Simge, etiket, açıklama ve önizleme kaynağı, kullanıcı telefonunda veya kol saatinde kartları yapılandırdığında gösterilir. Önizleme kaynağının Android'in tüm standart kaynak niteliklerini desteklediğini unutmayın. Bu nedenle, önizlemeyi ekran boyutu ve cihaz dili gibi faktörlere göre değiştirebilirsiniz. Diğer öneriler için önizleme yapılacaklar listesine bakın.

Uygulamanızı dağıtın ve Kart'ı Kart Bantına ekleyin (Kart'ı önizlemenin geliştirici dostu bir yolu da vardır ancak şimdilik bunu manuel olarak yapın).

Tam bir örnek için GitHub'daki kod örneğine veya codelab'e bakın.

Kartlar için kullanıcı arayüzü oluşturma

Material 3 etkileyici kullanıcı arayüzü öğeleri, Kotlin'in tür güvenli oluşturucu kalıbıyla desteklenen yapılandırılmış bir yaklaşım kullanılarak oluşturulur.

Düzen

Sayfa düzeninizi oluşturmak için aşağıdakileri yapın:

1. Materyal Tasarım kapsamı başlatma: Gerekli context ve deviceConfiguration değerlerini sağlayarak materialScope() işlevini çağırın. allowDynamicTheme ve defaultColorScheme gibi isteğe bağlı parametreler ekleyebilirsiniz. allowDynamicTheme varsayılan olarak true olur ve defaultColorScheme, dinamik renkler kullanılamadığında (ör. kullanıcı özelliği devre dışı bıraktığında) veya cihaz tarafından desteklenmediğinde (veya allowDynamicTheme false olduğunda) kullanılan ColorScheme değerini temsil eder.

2. Kullanıcı arayüzünüzü kapsam içinde oluşturun: Belirli bir Kart düzenine ait tüm kullanıcı arayüzü bileşenleri, tek bir üst düzey materialScope() çağrısının lambda içinde tanımlanmalıdır. primaryLayout() ve textEdgeButton() gibi bu bileşen işlevleri, MaterialScope üzerinde uzantı işlevleridir ve yalnızca bu alıcı kapsamında çağrıldıklarında kullanılabilir.

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

Slot

M3'te kart düzeni, üç farklı yuvayı kullanan, Compose'dan ilham alan bir yaklaşım kullanır. Yukarıdan aşağıya doğru sırasıyla:

1. titleSlot, genellikle birincil başlık veya başlık için kullanılır.
2. Temel içerik için mainSlot.
3. Genellikle işlemler veya ek bilgiler için kullanılan bottomSlot. Kenar düğmesi de burada görünür.

Her bir yuvanın içeriği aşağıdaki gibidir:

• titleSlot (isteğe bağlı): Genellikle text() tarafından oluşturulan birkaç kelimedir.
• mainSlot (zorunlu): Satırlar, sütunlar ve düğme grupları gibi yapılar halinde düzenlenmiş bileşenler. Bu bileşenler, yinelemeli olarak birbirine yerleştirilebilir. Örneğin, bir sütun satır içerebilir.
• bottomSlot (isteğe bağlı): Genellikle kenara yapışan bir düğme veya metin etiketiyle doldurulur.

Karolar kaydıramadığınız için sayfalama, kaydırma veya uzun içerik listelerini işlemeyle ilgili bileşenler yoktur. Yazı tipi boyutu arttığında veya metin çeviri nedeniyle uzadıkça içeriğin görünür kalmasına dikkat edin.

Kullanıcı arayüzü bileşenleri

protolayout-material3 kitaplığı, Material 3 Expressive spesifikasyonlarına ve kullanıcı arayüzü önerilerine göre tasarlanmış çok sayıda bileşen sağlar.

Düğmeler

• textButton(): (kısa) metin içeriği için tek bir yuvaya sahip düğme
• iconButton(): Simgeyi temsil eden tek bir yuvaya sahip düğme
• avatarButton(): Dikey olarak yığılmış etiketi ve ikincil etiketi temsil eden içeriği ve yanında bir resim (avatar) almak için üç adede kadar yuva sunan hap şeklindeki avatar düğmesi
• imageButton(): Ek yuva sunmayan, yalnızca resim içeren tıklanabilir resim düğmesi (ör. arka plan olarak backgroundImage)
• compactButton(): Bir simgeyi ve yanındaki metni temsil eden yatay olarak yığılmış içeriği almak için en fazla iki yuva sunan kompakt düğme
• button(): Dikey olarak yığılmış etiketi ve ikincil etiketi temsil eden içeriği ve yanında bir simgeyi alacak üç adede kadar yuva sunan hap şeklindeki düğme

Kenar düğmeleri

• iconEdgeButton(): Simge veya benzer şekilde yuvarlak, küçük içerikler için tek bir yuva sunan kenar düğmesi
• textEdgeButton(): Metin veya benzer şekilde uzun ve geniş içerikler için tek bir yuva sunan kenar düğmesi

Kartlar

• titleCard(): Genellikle metne dayalı bir veya üç yuva sunan başlık kartı
• appCard(): En fazla beş yuva sunan, genellikle metne dayalı uygulama kartı
• textDataCard(): Dikey olarak yığılmış en fazla üç yuva sunan, genellikle metin veya sayı tabanlı veri kartı
• iconDataCard(): Dikey olarak yığılmış en fazla üç yuva sunan, genellikle simgeyle birlikte metin veya sayı tabanlı veri kartı
• graphicDataCard(): Grafik verileri için bir yuva (ör. ilerleme göstergesi) ve genellikle metin açıklamaları için dikey olarak yığılmış en fazla iki yuva sunan grafik veri kartı

İlerleme Durumu Göstergeleri

• circularProgressIndicator(): Radyal bir öğe kullanarak bir hedefe yönelik ilerlemeyi gösterir
• segmentedCircularProgressIndicator(): Farklı aşamalara sahip radyal bir öğe kullanarak bir hedefe doğru ilerlemeyi gösterir

Düzen Öğelerini Gruplandırma

• buttonGroup(): Alt öğelerini yatay bir sıraya yerleştiren bileşen düzeni
• primaryLayout(): Önerilen M3 düzen stilini temsil eden tam ekran düzen. Bu stil, duyarlı olup öğelerin yerleştirilmesini sağlar ve önerilen kenar boşlukları ile dolgu uygulanır.

Tema oluşturma

Material 3 Expressive'de renk sistemi, altı gruba (birincil, ikincil, üçüncül, hata, yüzey ve dış çizgi) ayrılmış 29 standart renk rolü ile tanımlanır.

ColorScheme, bu 29 rolün her birini karşılık gelen bir renkle eşler. MaterialScope'ın bir parçası olduğu ve bileşenlerin içinde oluşturulması gerektiği için renkler şemadan otomatik olarak alınır. Bu yaklaşım, tüm kullanıcı arayüzü öğelerinin otomatik olarak Materyal Tasarım standartlarına uymasını sağlar.

Kullanıcıların, tanımladığınız bir renk şeması (ör. marka renklerinizi yansıtan bir renk şeması) ile sistem tarafından sağlanan bir renk şeması (kullanıcı tarafından seçilen veya kullanıcının mevcut kadranından türetilen bir renk şeması) arasında seçim yapmasına izin vermek için MaterialScope öğesini aşağıdaki gibi başlatın:

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

Kartlarınızın belirttiğiniz renk şemasında görünmesini sağlamak için allowDynamicTheme değerini false olarak ayarlayarak dinamik tema desteğini devre dışı bırakın:

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

Renk

Her bileşen, ColorScheme tarafından tanımlanan 29 renk rolünün bir alt kümesini kullanır. Örneğin, düğmeler dört adede kadar renk kullanır. Bu renkler varsayılan olarak etkin ColorScheme öğesinin "birincil" grubundan alınır:

Belirli kullanıcı arayüzü öğeleri için varsayılan renk jetonlarından farklı renk jetonları kullanmanız gerekebilir. Örneğin, bir textEdgeButton için "birincil" yerine "ikincil" veya "üçüncül" gruptaki renkleri kullanarak öne çıkmasını ve daha iyi kontrast sağlamasını isteyebilirsiniz.

Bileşen renklerini çeşitli şekillerde özelleştirebilirsiniz:

1. Önceden tanımlanmış renkler için yardımcı işlev kullanın. Material 3 Expressive için standart düğme stillerini uygulamak üzere filledTonalButtonColors() gibi yardımcı işlevleri kullanın. Bu işlevler, doldurulmuş, tonlu veya kenarlıklandırılmış gibi yaygın stilleri MaterialScope içindeki etkin ColorScheme'dan uygun rollerle eşleyen önceden yapılandırılmış ButtonColors örnekleri oluşturur. Bu sayede, yaygın düğme türleri için her rengi manuel olarak tanımlamadan tutarlı stiller uygulayabilirsiniz.

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

   Kartlar için eşdeğer filledCardColors() işlev ailesini kullanın.

   Yalnızca bir veya iki jetonu değiştirmeniz gerekiyorsa yardımcı işlevler tarafından döndürülen ButtonColors nesnesini copy() yöntemini kullanarak da değiştirebilirsiniz:

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

2. Değiştirilen renk rollerini açıkça belirtin. Kendi ButtonColors nesnenizi oluşturun ve bileşene iletin. Kartlar için eşdeğer CardColors nesnesini kullanın.

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

3. Sabit renkler belirtin (dikkatli kullanın). Renkleri genellikle anlamsal rollerine göre belirtmeniz önerilir (ör. colorScheme.primary) doğrudan renk değerleri de sağlayabilirsiniz. Bu yaklaşım, özellikle tema dinamik olarak değişiyorsa genel temayla tutarsızlıklara yol açabileceğinden, dikkatli bir şekilde kullanılmalıdır.

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

Yazı biçimi

Wear OS platformunda görsel tutarlılık oluşturmak ve performansı optimize etmek için kartlardaki tüm metinler sistem tarafından sağlanan bir yazı tipi kullanılarak oluşturulur. Yani kutular özel yazı tiplerini desteklemez. Wear OS 6 ve sonraki sürümlerde bu, OEM'e özgü bir yazı tipidir. Çoğu durumda, daha etkileyici bir deneyim ve daha ayrıntılı kontrol sunan değişken bir yazı tipi kullanılır.

Metin stili oluşturmak için genellikle yazım sabitleriyle birlikte text() yöntemini kullanırsınız. Bu bileşen, Material 3 Expressive'de önceden tanımlanmış yazı tipi rollerinden yararlanmanıza olanak tanır. Bu sayede kartınız, okunabilirlik ve hiyerarşi için belirlenmiş yazı tipi en iyi uygulamalarına uyabilir. Kütüphane, BODY_MEDIUM gibi 18 semantik tipografi sabitleri sunar. Bu sabitler, boyut dışındaki yazı tipi eksenlerini de etkiler.

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

Daha fazla denetim için ek ayarlar sağlayabilirsiniz. Wear OS 6 ve sonraki sürümlerde, italik, ağırlık, genişlik ve yuvarlaklık eksenleri boyunca değiştirebileceğiniz değişken bir yazı tipi kullanılıyor olabilir. settings parametresini kullanarak aşağıdaki eksenleri kontrol edebilirsiniz:

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

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

Son olarak, boyutu veya harf aralığını (önerilmez) kontrol etmeniz gerekiyorsa text() yerine basicText() kullanın ve fontStyle() kullanarak fontStyle mülkü için bir değer oluşturun.

Şekil ve kenar boşlukları

Hemen hemen her bileşenin köşe yarıçapını shape mülkü ile değiştirebilirsiniz. Değerler MaterialScope mülkünden shapes alınır:

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

Bir bileşenin şeklini değiştirdikten sonra, ekranın kenarı etrafında çok fazla veya çok az boşluk kaldığını düşünüyorsanız primaryLayout() bileşeninin margin parametresini kullanarak kenar boşluklarını ayarlayın:

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

Yaylar

Aşağıdaki Arc kapsayıcı çocukları desteklenir:

• ArcLine: Yay etrafında eğri bir çizgi oluşturur.
• ArcText: Eğri metni Arc'te oluşturur.
• ArcAdapter: Yayda, yaya teğet bir açıyla çizilen temel bir düzen öğesi oluşturur.

Daha fazla bilgi için her bir öğe türünün referans dokümanlarına bakın.

Değiştiriciler

Mevcut her düzen öğesine isteğe bağlı olarak değiştiriciler uygulanabilir. Bu değiştiricileri aşağıdaki amaçlarla kullanın:

• Düzenin görsel görünümünü değiştirebilirsiniz. Örneğin, düzen öğenize arka plan, kenar veya dolgu ekleyin.
• Sayfa düzeniyle ilgili meta veriler ekleyin. Örneğin, ekran okuyucularla kullanmak için sayfa düzeni öğenize bir anlam değiştirici ekleyin.
• İşlev ekleyin. Örneğin, karonuzu etkileşimli hale getirmek için düzen öğenize tıklanabilir bir değiştirici ekleyin. Daha fazla bilgi için Kartlarla etkileşim kurma başlıklı makaleyi inceleyin.

Örneğin, aşağıdaki kod örneğinde gösterildiği gibi bir Image öğesinin varsayılan görünümünü ve meta verilerini özelleştirebiliriz:

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

Genişleyen

Spannable, öğeleri metne benzer şekilde düzenleyen özel bir kapsayıcı türüdür. Bu, daha büyük bir metin bloğundaki yalnızca bir alt dizeye farklı bir stil uygulamak istediğinizde kullanışlıdır. Text öğesiyle bu mümkün değildir.

Spannable kapsayıcısı Span çocukla doldurulur. Diğer alt öğelere veya iç içe yerleştirilmiş Spannable örneklerine izin verilmez.

İki tür Span alt öğesi vardır:

• SpanText: Metni belirli bir stille oluşturur.
• SpanImage: Resmi metinle birlikte satır içi olarak oluşturur.

Örneğin, "Merhaba dünya" karosundaki "dünya" kelimesini italik hale getirebilir ve kelimelerin arasına bir resim ekleyebilirsiniz. Aşağıdaki kod örneğinde gösterildiği gibi:

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

Kaynaklarla çalışma

Kartların uygulamanızın kaynaklarına erişimi yoktur. Yani bir Image düzen öğesine Android resim kimliği gönderip çözülmesini bekleyemezsiniz. Bunun yerine onTileResourcesRequest() yöntemini geçersiz kılın ve tüm kaynakları manuel olarak sağlayın.

onTileResourcesRequest() yönteminde resim sağlamanın iki yolu vardır:

• setAndroidResourceByResId() kullanarak çizilebilir bir kaynak sağlayın.
• setInlineResource() kullanarak ByteArray olarak dinamik bir resim sağlayın.

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

Kart önizleme resmi yapılacaklar listesi

Sistem, Android uygulama manifest dosyasında referans verilen karo önizleme resmini karo bandı düzenleyicide gösterir. Bu düzenleyici hem Wear OS cihazlarda hem de telefonlardaki kol saati tamamlayıcı uygulamasında görünür.

Kullanıcıların bu önizleme resminden en iyi şekilde yararlanmasına yardımcı olmak için kartınızla ilgili aşağıdaki ayrıntıları doğrulayın:

• En son tasarımı yansıtır. Önizleme, kartınızın en güncel tasarımını doğru şekilde yansıtmalıdır.
• Statik bir renk teması kullanır. Dinamik değil, kartın statik renk temasını kullanın.
• Uygulama simgesi dahildir. Uygulamanızın simgesinin önizleme resminin üst kısmında göründüğünü onaylayın.
• Yüklü/giriş yapılmış durumu gösterir. Önizlemede, boş veya yer tutucu içerikler olmadan tamamen işlevsel bir "yüklenmiş" ya da "giriş yapılmış" durum gösterilmelidir.
• Özelleştirme için kaynak çözümü kurallarından yararlanın (isteğe bağlı). Cihazın ekran boyutu, dili veya yerel ayarları ile eşleşen önizlemeler sağlamak için Android'in kaynak çözünürlüğü kurallarını kullanabilirsiniz. Bu, özellikle kartınızın görünümü cihazlar arasında değişiyorsa yararlıdır.