Mulai menggunakan kartu

Untuk mulai menyediakan kartu dari aplikasi, sertakan dependensi berikut dalam file build.gradle aplikasi.

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

Konsep utama

Kartu tidak dibuat dengan cara yang sama seperti aplikasi Android, dan menggunakan konsep yang berbeda:

  • Template tata letak: Menentukan keseluruhan pengaturan elemen visual di layar. Hal ini dilakukan oleh fungsi primaryLayout().
  • Elemen tata letak: Merepresentasikan setiap elemen grafis, seperti tombol atau kartu, atau beberapa elemen tersebut yang dikelompokkan bersama menggunakan kolom, buttonGroup, atau yang serupa. Elemen ini disematkan dalam template tata letak.
  • Resource: Objek ResourceBuilders.Resources terdiri dari peta pasangan nilai kunci dari resource Android (gambar) yang diperlukan untuk merender tata letak, dan versi.
  • Linimasa: Objek TimelineBuilders.Timeline adalah daftar dari satu atau beberapa instance objek tata letak. Anda dapat menyediakan berbagai mekanisme dan ekspresi untuk menunjukkan kapan perender harus beralih dari satu objek tata letak ke objek lainnya, seperti untuk berhenti menampilkan tata letak pada waktu tertentu.
  • Status: Struktur data jenis StateBuilders.State yang diteruskan antara kartu dan aplikasi, untuk memungkinkan kedua komponen berkomunikasi satu sama lain. Misalnya, jika tombol diketuk pada kartu, status akan menyimpan ID tombol. Anda juga dapat menukar jenis data menggunakan peta.
  • Kartu: Objek TileBuilders.Tile yang mewakili kartu, yang terdiri dari linimasa, ID versi resource, interval keaktualan, dan status.
  • Protolayout: Istilah ini muncul dalam nama berbagai class terkait kartu dan mengacu pada library Protolayout Wear OS, library grafik yang digunakan di berbagai platform Wear OS.

Membuat kartu

Untuk menyediakan kartu dari aplikasi, terapkan layanan jenis TileService dan daftarkan dalam manifes Anda. Dari sini, sistem meminta kartu yang diperlukan selama panggilan ke onTileRequest() dan resource selama panggilan ke 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

Selanjutnya, tambahkan layanan di dalam tag <application> file AndroidManifest.xml Anda.

<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

Filter intent dan izin akan mendaftarkan layanan ini sebagai penyedia kartu.

Ikon, label, deskripsi, dan resource pratinjau ditampilkan kepada pengguna saat mereka mengonfigurasi kartu di ponsel atau smartwatch. Perhatikan bahwa resource pratinjau mendukung semua penentu resource standar Android, sehingga pratinjau dapat bervariasi sesuai dengan faktor seperti ukuran layar dan bahasa perangkat. Lihat checklist pratinjau untuk rekomendasi tambahan.

Deploy aplikasi Anda, dan tambahkan Kartu ke Carousel Kartu (ada cara yang lebih mudah bagi developer untuk melihat pratinjau Kartu, tetapi untuk saat ini, lakukan secara manual).

Kartu &#39;Hello World&#39;.
Gambar 1. Kartu "Hello World".

Untuk contoh lengkap, lihat contoh kode di GitHub atau codelab.

Membuat UI untuk kartu

Elemen UI Ekspresif Material 3 dibuat menggunakan pendekatan terstruktur yang didukung oleh pola builder aman jenis Kotlin.

Tata Letak

Untuk membuat tata letak, lakukan hal berikut:

  1. Memulai cakupan Desain Material: Panggil fungsi materialScope(), yang menyediakan context dan deviceConfiguration yang diperlukan. Anda dapat menyertakan parameter opsional, seperti allowDynamicTheme dan defaultColorScheme. allowDynamicTheme adalah true secara default, dan defaultColorScheme mewakili ColorScheme yang digunakan saat warna dinamis tidak tersedia—seperti saat pengguna telah menonaktifkan fitur—atau saat tidak didukung oleh perangkat, atau allowDynamicTheme adalah false).

  2. Buat UI dalam cakupan: Semua komponen UI untuk tata letak Kartu tertentu harus ditentukan dalam lambda dari satu panggilan materialScope() level teratas. Fungsi komponen ini, seperti primaryLayout() dan textEdgeButton(), adalah fungsi ekstensi di MaterialScope dan hanya tersedia saat dipanggil di cakupan penerima ini.

    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

Di M3, tata letak kartu menggunakan pendekatan yang terinspirasi Compose yang menggunakan tiga slot yang berbeda. Dari atas ke bawah, filter tersebut adalah:

  1. titleSlot, biasanya untuk judul atau header utama.
  2. mainSlot, untuk konten inti.
  3. bottomSlot, sering digunakan untuk tindakan atau informasi tambahan. Di sinilah tombol tepi muncul.
Tata letak kartu yang menampilkan titleSlot, mainSlot, dan bottomSlot
Gambar 2. titleSlot, mainSlot, dan bottomSlot.

Konten setiap slot adalah sebagai berikut:

  • titleSlot (opsional): Biasanya beberapa kata yang dihasilkan oleh text().
  • mainSlot (wajib): Komponen yang diatur ke dalam struktur seperti baris, kolom, dan grup tombol. Komponen ini juga dapat disematkan secara rekursif di dalam satu sama lain; misalnya, kolom dapat berisi baris.
  • bottomSlot (opsional): Biasanya diisi dengan tombol yang menempel di tepi atau label teks.

Karena kartu tidak dapat di-scroll, tidak ada komponen untuk paging, men-scroll, atau menangani daftar konten yang panjang. Pastikan konten tetap terlihat saat ukuran font bertambah atau teks menjadi lebih panjang karena terjemahan.

Komponen UI

Library protolayout-material3 menyediakan sejumlah besar komponen yang dirancang sesuai dengan spesifikasi Material 3 Ekspresif dan rekomendasi antarmuka pengguna.

Tombol

  • textButton(): tombol dengan satu slot untuk konten teks (pendek)
  • iconButton(): tombol dengan satu slot untuk mewakili ikon
  • avatarButton(): tombol avatar berbentuk pil yang menawarkan hingga tiga slot untuk mengambil konten yang mewakili label yang ditumpuk secara vertikal dan label sekunder, serta gambar (avatar) di sampingnya
  • imageButton(): tombol gambar yang dapat diklik yang tidak menawarkan slot tambahan, hanya gambar (misalnya backgroundImage sebagai latar belakang)
  • compactButton(): tombol ringkas yang menawarkan hingga dua slot untuk mengambil konten yang ditumpuk secara horizontal yang mewakili ikon dan teks di sampingnya
  • button(): tombol berbentuk pil yang menawarkan hingga tiga slot untuk mengambil konten yang mewakili label dan label sekunder yang ditumpuk secara vertikal, serta ikon di sampingnya

Tombol Edge

  • iconEdgeButton(): tombol tepi yang menawarkan satu slot untuk mengambil ikon atau konten kecil yang bulat dan serupa
  • textEdgeButton(): tombol tepi yang menawarkan satu slot untuk mengambil teks atau konten yang panjang dan lebar

Kartu

  • titleCard(): kartu judul yang menawarkan satu hingga tiga slot, biasanya berbasis teks
  • appCard(): kartu aplikasi yang menawarkan hingga lima slot, biasanya berbasis teks
  • textDataCard(): kartu data yang menawarkan hingga tiga slot yang ditumpuk secara vertikal, biasanya berbasis teks atau angka
  • iconDataCard(): kartu data yang menawarkan hingga tiga slot yang ditumpuk secara vertikal, biasanya berbasis teks atau angka, dengan ikon
  • graphicDataCard(): kartu data grafis yang menawarkan slot untuk data grafis, seperti indikator progres, dan hingga dua slot yang ditumpuk secara vertikal, biasanya untuk deskripsi teks

Indikator Progres

Mengelompokkan Elemen Tata Letak

  • buttonGroup(): tata letak komponen yang menempatkan turunannya dalam urutan horizontal
  • primaryLayout(): tata letak layar penuh yang mewakili gaya tata letak M3 yang disarankan yang responsif dan menangani penempatan elemen, beserta margin dan padding yang direkomendasikan yang diterapkan

Tema

Di Material 3 Expressive, sistem warna ditentukan oleh 29 peran warna standar, yang diatur ke dalam enam grup: primer, sekunder, tersier, error, permukaan, dan garis batas.

Sistem Warna Ekspresif Material 3
Gambar 3. Sistem Warna Ekspresif Material 3.

ColorScheme memetakan setiap 29 peran ini ke warna yang sesuai, dan karena merupakan bagian dari MaterialScope dan komponen harus dibuat di dalamnya, komponen tersebut akan otomatis mengambil warna dari skema. Pendekatan ini memungkinkan semua elemen UI secara otomatis mematuhi standar Desain Material.

Agar pengguna dapat memilih antara skema warna yang Anda tentukan—seperti yang mencerminkan warna merek Anda—dan yang disediakan oleh sistem—baik yang berasal dari tampilan jam saat ini pengguna, atau yang dipilih oleh pengguna)—inisialisasi MaterialScope sebagai berikut:

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

Untuk memaksa kartu Anda muncul dalam skema warna yang Anda berikan, nonaktifkan dukungan untuk tema dinamis dengan menetapkan allowDynamicTheme ke false:

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

Warna

Setiap komponen menggunakan subset dari 29 peran warna yang ditentukan oleh ColorScheme. Misalnya, tombol menggunakan hingga empat warna, yang secara default diambil dari grup "utama" dari ColorScheme aktif:

Token komponen ButtonColors Peran ColorScheme
containerColor utama
iconColor onPrimary
labelColor onPrimary
secondaryLabelColor onPrimary (opasitas 0,8)

Anda mungkin perlu menyimpang dari token warna default untuk elemen UI tertentu. Misalnya, Anda mungkin ingin satu textEdgeButton menggunakan warna dari grup "sekunder" atau "tersier", bukan "primer", agar terlihat berbeda dan memberikan kontras yang lebih baik.

Anda dapat menyesuaikan warna komponen dengan beberapa cara:

  1. Gunakan fungsi bantuan untuk warna yang telah ditetapkan. Gunakan fungsi bantuan seperti filledTonalButtonColors() untuk menerapkan gaya tombol standar untuk Material 3 Ekspresif. Fungsi ini membuat instance ButtonColors yang telah dikonfigurasi sebelumnya yang memetakan gaya umum seperti diisi, tonal, atau digarisbawahi ke peran yang sesuai dari ColorScheme aktif dalam MaterialScope. Dengan begitu, Anda dapat menerapkan gaya yang konsisten tanpa menentukan setiap warna untuk jenis tombol umum secara manual.

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

    Untuk kartu, gunakan kelompok fungsi filledCardColors() yang setara.

    Anda juga dapat mengubah objek ButtonColors yang ditampilkan oleh fungsi helper menggunakan metode copy() jika Anda hanya perlu mengubah satu atau dua token:

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

  2. Berikan peran warna pengganti secara eksplisit. Buat objek ButtonColors Anda sendiri, lalu teruskan ke komponen. Untuk kartu, gunakan objek CardColors yang setara.

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

  3. Menentukan warna tetap (gunakan dengan hati-hati). Meskipun umumnya direkomendasikan untuk menentukan warna berdasarkan peran semantiknya (misalnya, colorScheme.primary), Anda juga dapat memberikan nilai warna langsung. Pendekatan ini harus digunakan seperlunya, karena dapat menyebabkan inkonsistensi dengan tema secara keseluruhan, terutama jika tema berubah secara dinamis.

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

Tipografi

Untuk menciptakan konsistensi visual di seluruh platform Wear OS dan mengoptimalkan performa, semua teks pada kartu dirender menggunakan font yang disediakan sistem. Artinya, kartu tidak mendukung typeface kustom. Di Wear OS 6 dan yang lebih baru, ini adalah font khusus OEM. Dalam sebagian besar kasus, font ini akan berupa font variabel, yang menawarkan pengalaman yang lebih ekspresif dan kontrol yang lebih terperinci.

Untuk membuat gaya teks, Anda biasanya menggunakan metode text() yang digabungkan dengan konstanta tipografi. Komponen ini memungkinkan Anda menggunakan peran tipografi yang telah ditentukan sebelumnya di Material 3 Expressive, yang membantu kartu Anda mematuhi praktik terbaik tipografi yang telah ditetapkan untuk keterbacaan dan hierarki. Library ini menawarkan serangkaian 18 konstanta tipografi semantik, seperti BODY_MEDIUM. Konstanta ini juga memengaruhi sumbu font selain ukuran.

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

Untuk kontrol lebih lanjut, Anda dapat memberikan setelan tambahan. Di Wear OS 6 dan yang lebih baru, font variabel kemungkinan akan digunakan, yang dapat Anda ubah di sepanjang sumbu miring, ketebalan, lebar, dan kebulatan. Anda dapat mengontrol sumbu ini menggunakan parameter 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)),
)

Terakhir, jika Anda perlu mengontrol ukuran atau spasi huruf (tidak direkomendasikan), gunakan basicText(), bukan text(), dan buat nilai untuk properti fontStyle menggunakan fontStyle().

Bentuk dan margin

Anda dapat mengubah radius sudut hampir setiap komponen menggunakan properti shape-nya. Nilai berasal dari properti MaterialScope shapes:

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

Setelah mengubah bentuk komponen, jika Anda merasa bahwa komponen tersebut meninggalkan terlalu banyak atau terlalu sedikit ruang di sekitar tepi layar, sesuaikan margin menggunakan parameter margin dari primaryLayout():

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

Arc

Turunan penampung Arc berikut didukung:

  • ArcLine: merender garis melengkung di sekitar Arc.
  • ArcText: merender teks melengkung di Arc.
  • ArcAdapter: merender elemen tata letak dasar di arc, yang digambar bersinggungan dengan arc.

Untuk informasi selengkapnya, lihat dokumentasi referensi untuk setiap jenis elemen.

Pengubah

Setiap elemen tata letak yang tersedia secara opsional dapat memiliki pengubah yang diterapkan padanya. Gunakan pengubah ini untuk tujuan berikut:

  • Mengubah tampilan visual tata letak. Misalnya, tambahkan latar belakang, batas, atau padding ke elemen tata letak.
  • Menambahkan metadata tentang tata letak. Misalnya, menambahkan pengubah semantik ke elemen tata letak untuk digunakan dengan pembaca layar.
  • Menambahkan fungsi. Misalnya, menambahkan pengubah yang dapat diklik ke elemen tata letak agar kartu Anda interaktif. Untuk mengetahui informasi selengkapnya, lihat Berinteraksi dengan kartu.

Misalnya, kita dapat menyesuaikan tampilan default dan metadata Image, seperti yang ditunjukkan dalam contoh kode berikut:

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

Spannable

Spannable adalah jenis penampung khusus yang mengatur tata letak elemen yang mirip dengan teks. Jenis penampung ini berguna jika Anda ingin menerapkan gaya yang berbeda ke hanya satu substring dalam blok teks yang lebih besar, dan tidak mungkin dilakukan dengan elemen Text.

Penampung Spannable diisi dengan turunan Span. Turunan lain, atau instance Spannable bertingkat, tidak diizinkan.

Ada dua jenis turunan Span:

  • SpanText: merender teks dengan gaya tertentu.
  • SpanImage: merender gambar yang inline dengan teks.

Misalnya, Anda dapat mencetak miring kata "dunia" dalam kartu "Halo dunia" dan menyisipkan gambar di antara kata, seperti yang ditunjukkan dalam contoh kode berikut:

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

Menggunakan resource

Kartu tidak memiliki akses ke resource mana pun di aplikasi Anda. Ini berarti Anda tidak boleh meneruskan ID gambar Android ke elemen tata letak Image dan mengharapkannya untuk diselesaikan. Sebagai gantinya, ganti metode onTileResourcesRequest() dan sediakan resource apa pun secara manual.

Terdapat dua cara untuk menyediakan gambar dalam metode onTileResourcesRequest():

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 gambar pratinjau kartu

Sistem menampilkan gambar pratinjau kartu, yang direferensikan dalam manifes aplikasi Android, di editor carousel kartu. Editor ini muncul di perangkat Wear OS dan di aplikasi pendamping smartwatch di ponsel.

Untuk membantu pengguna memaksimalkan gambar pratinjau ini, verifikasi detail berikut tentang kartu Anda:

  • Mencerminkan desain terbaru. Pratinjau harus secara akurat mewakili desain kartu Anda yang terbaru.
  • Menggunakan tema warna statis. Gunakan tema warna statis kartu, bukan tema dinamis.
  • Menyertakan ikon aplikasi. Pastikan ikon aplikasi Anda muncul di bagian atas gambar pratinjau.
  • Menampilkan status dimuat/login. Pratinjau harus menampilkan status "dimuat" atau "login" yang berfungsi penuh, sehingga tidak ada konten kosong atau placeholder.
  • Manfaatkan aturan resolusi resource untuk penyesuaian (opsional). Pertimbangkan untuk menggunakan aturan resolusi resource Android untuk memberikan pratinjau yang cocok dengan setelan ukuran tampilan, bahasa, atau lokalitas perangkat. Hal ini sangat berguna jika tampilan kartu Anda bervariasi di berbagai perangkat.