Menggunakan Jetpack Compose di Wear OS

Compose untuk Wear OS mirip dengan Compose untuk seluler. Namun, ada beberapa perbedaan utama. Panduan ini membimbing Anda untuk mengetahui beberapa kesamaan dan perbedaan.

Compose untuk Wear OS adalah bagian dari Android Jetpack, dan seperti library Wear Jetpack lainnya yang Anda gunakan, fitur ini membantu Anda menulis kode yang lebih baik dengan lebih cepat. Ini adalah pendekatan yang kami rekomendasikan untuk membuat antarmuka pengguna untuk aplikasi Wear OS.

Jika Anda tidak terbiasa menggunakan toolkit Jetpack Compose, lihat jalur Compose. Banyak prinsip pengembangan untuk Compose seluler juga berlaku untuk Compose untuk Wear OS. Lihat Mengapa Compose untuk informasi selengkapnya tentang keuntungan umum framework UI deklaratif. Agar dapat mempelajari Compose untuk Wear OS lebih lanjut, lihat Jalur Compose untuk Wear OS dan repositori contoh Wear OS di GitHub.

Catatan: Compose untuk Wear OS tersedia dalam rilis stabil dan merupakan pendekatan yang direkomendasikan untuk membuat antarmuka pengguna untuk Wear OS.

Desain Material di Jetpack Compose di Wear OS

Jetpack Compose di Wear OS menawarkan implementasi Material 2.5, yang membantu Anda mendesain pengalaman aplikasi yang lebih menarik. Komponen Desain Material di Wear OS dibuat di atas Tema Material Wear. Tema ini adalah cara sistematis untuk menyesuaikan Desain Material dan lebih mencerminkan merek produk Anda.

Kompatibilitas

Compose untuk Wear OS berfungsi di smartwatch yang mendukung Wear OS 3.0 (Level API 30) dan smartwatch yang menggunakan Wear OS 2.0 (Level API 25 dan versi lebih baru). Penggunaan versi 1.4 Compose untuk Wear OS memerlukan penggunaan library androidx.compose versi 1.7 dan Kotlin 1.9.0. Anda dapat menggunakan pemetaan BOM dan peta kompatibilitas Compose ke Kotlin untuk memeriksa kompatibilitas Compose.

Platform

Compose untuk Wear OS memudahkan pembuatan aplikasi di Wear OS. Untuk informasi selengkapnya, lihat Aplikasi. Gunakan komponen bawaan kami untuk menciptakan pengalaman pengguna yang sesuai dengan panduan Wear OS. Untuk informasi selengkapnya tentang komponen, lihat panduan desain kami.

Menyiapkan

Menggunakan Jetpack Compose dengan Wear OS mirip dengan menggunakan Jetpack Compose untuk project Android lainnya. Perbedaan utamanya adalah Jetpack Compose untuk Wear menambahkan library khusus Wear yang mempermudah pembuatan antarmuka pengguna yang disesuaikan untuk smartwatch. Terkadang, komponen tersebut memiliki nama yang sama dengan komponen bukan Wear, seperti androidx.wear.compose.material.Button dan androidx.compose.material.Button.

Membuat aplikasi baru di Android Studio

Untuk membuat project baru yang menyertakan Jetpack Compose, lakukan langkah berikut:

1. Jika baru memulai di jendela Welcome to Android Studio, klik Start a new Android Studio project. Jika sudah membuka project Android Studio, pilih File > New > Import Sample dari panel menu.
2. Telusuri Compose for Wear lalu pilih Compose for Wear OS Starter.
3. Di jendela Configure your project, lakukan langkah berikut:
   1. Setel Application name.
   2. Pilih Project location untuk contoh.
4. Klik Finish.
5. Pastikan file build.gradle project sudah dikonfigurasi dengan benar, seperti yang dijelaskan dalam file properti Gradle.

Sekarang, Anda pun siap memulai pengembangan aplikasi menggunakan Compose untuk Wear OS.

Dependensi toolkit Jetpack Compose

Untuk menggunakan Jetpack Compose dengan Wear OS, Anda harus menyertakan dependensi toolkit Jetpack Compose dalam file build.gradle aplikasi. Sebagian besar perubahan dependensi yang terkait dengan Wear OS berada di lapisan arsitektur atas, yang dikelilingi oleh kotak merah dalam gambar berikut.

<img 'foundation',="" 'material',="" 'runtime'.="" 'ui',="" 2="" 4="" a="" alt="" and="" are="" bottom,="" box""="" by="" contain="" from="" rectangles="" rectangles.="" red="" src="/static/wear/images/components/ComposeDependencies.png" surrounded="" the="" to="" top="" />

Artinya, banyak dependensi yang sudah Anda gunakan dengan Jetpack Compose tidak berubah saat menargetkan Wear OS. Misalnya, dependensi UI, runtime, compiler, dan animasi tetap sama.

Namun, Wear OS memiliki versi library material, foundation, dan navigation-nya sendiri, jadi pastikan Anda menggunakan library yang tepat.

Gunakan versi WearComposeMaterial API jika memungkinkan. Meskipun secara teknis dapat dilakukan, tetapi penggunaan Compose Material versi seluler tidak dioptimalkan untuk persyaratan unik Wear OS. Selain itu, menggabungkan Compose Material dengan Compose Material untuk Wear OS dapat menyebabkan perilaku yang tidak terduga. Misalnya, karena setiap library memiliki class MaterialTheme sendiri, ada kemungkinan warna, tipografi, atau bentuk menjadi tidak konsisten jika kedua versi tersebut digunakan.

Tabel berikut menguraikan perbedaan dependensi antara Wear OS dan Seluler:

Dependensi Wear OS (androidx.wear.*)	Perbandingan	Dependensi Perangkat Seluler (androidx.*)
androidx.wear.compose:compose-material	bukan	androidx.compose.material:material
androidx.wear.compose:compose-navigation	bukan	androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation	selain juga	androidx.compose.foundation:foundation

Catatan: Dependensi material non-seluler lainnya dapat digunakan, seperti ripple material dan ikon material yang diperluas.

Cuplikan berikut menunjukkan contoh file build.gradle yang menyertakan dependensi ini:

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.9.3")
    implementation("androidx.compose.ui:ui-tooling-preview:1.7.5")
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.4.0")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.4.0")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.4.0")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.4.0")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.0.3")
}

Masukan

Coba Compose untuk Wear OS dan gunakan issue tracker untuk memberikan saran dan masukan.

Bergabunglah dengan channel #compose-wear di Kotlin Slack untuk terhubung dengan komunitas developer, dan beri tahu kami pengalaman Anda.