Material 3 Ekspresif adalah evolusi berikutnya dari Desain Material. Desain Material ini mencakup versi terbaru tema, komponen, dan fitur personalisasi seperti warna dinamis.

Panduan ini berfokus pada migrasi dari library Jetpack Wear Compose Material 2.5 (androidx.wear.compose) ke library Jetpack Wear Compose Material 3 (androidx.wear.compose.material3) untuk aplikasi.

Pendekatan

Untuk memigrasikan kode aplikasi dari M2.5 ke M3, ikuti pendekatan yang sama seperti yang dijelaskan dalam panduan ponsel migrasi Compose Material, khususnya:

• Anda tidak boleh menggunakan M2.5 dan M3 dalam satu aplikasi jangka panjang
• Mengadopsi pendekatan bertahap

Dependensi

M3 memiliki paket dan versi terpisah untuk M2.5:

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.5.0-beta01")

Lihat versi M3 terbaru di halaman rilis Wear Compose Material 3.

Library Wear Compose Foundation versi 1.5.0-beta01 memperkenalkan beberapa komponen baru yang dirancang untuk berfungsi dengan komponen Material 3. Demikian pula, SwipeDismissableNavHost dari library Navigasi Wear Compose memiliki animasi yang diperbarui saat berjalan di Wear OS 6 (API level 36) atau yang lebih baru. Saat mengupdate ke versi Wear Compose Material 3, sebaiknya update juga library Wear Compose Foundation dan Navigation:

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

Tema

Pada M2.5 dan M3, composable tema diberi nama MaterialTheme, tetapi paket dan parameter impornya berbeda. Di M3, parameter Colors telah diganti namanya menjadi ColorScheme dan MotionScheme telah diperkenalkan untuk menerapkan transisi.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

Warna

Sistem warna di M3 sangat berbeda dengan M2.5. Jumlah parameter warna telah meningkat, memiliki nama berbeda, dan dipetakan secara berbeda ke komponen M3. Di Compose, ini berlaku untuk class Colors M2.5, class ColorScheme M3, dan fungsi terkait:

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

Tabel berikut menjelaskan perbedaan utama antara M2.5 dan M3:

Tema Warna Dinamis

Fitur baru di M3 adalah tema warna dinamis. Jika pengguna mengubah warna tampilan jam, warna di UI akan berubah agar cocok.

Gunakan fungsi dynamicColorScheme untuk menerapkan skema warna dinamis dan memberikan defaultColorScheme sebagai pengganti jika skema warna dinamis tidak tersedia.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

Tipografi

Sistem tipografi di M3 berbeda dengan M2 dan menyertakan fitur berikut:

• Sembilan gaya teks baru
• Font fleksibel, yang memungkinkan penyesuaian skala huruf untuk ketebalan, lebar, dan kebulatan yang berbeda

• AnimatedText, yang menggunakan font fleksibel

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

Font Flex

Font Flex memungkinkan desainer menentukan lebar dan ketebalan jenis untuk ukuran tertentu.

Gaya Teks

TextStyles berikut tersedia di M3. Ini digunakan secara default oleh berbagai komponen M3.

Bentuk

Sistem bentuk di M3 berbeda dengan M2. Jumlah parameter bentuk telah meningkat, diberi nama berbeda, dan dipetakan berbeda ke komponen M3. Ukuran bentuk berikut tersedia:

• Ekstra kecil
• Kecil
• Sedang
• Besar
• Ekstra besar

Di Compose, ini berlaku untuk class Shapes M2 dan class Shapes M3:

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

Gunakan pemetaan parameter Bentuk dari Bermigrasi dari Material 2 ke Material 3 di Compose sebagai titik awal.

Pembentukan bentuk

M3 memperkenalkan Shape Morphing: bentuk kini berubah sebagai respons terhadap interaksi.

Perilaku Shape Morphing tersedia sebagai variasi pada sejumlah tombol bulat, lihat di bawah:

Komponen dan Tata Letak

Sebagian besar komponen dan tata letak dari M2.5 tersedia di M3. Namun, beberapa komponen dan tata letak M3 tidak ada di M2.5. Selain itu, beberapa komponen M3 memiliki lebih banyak variasi dibandingkan dengan yang setara di M2.5.

Meskipun beberapa komponen memerlukan pertimbangan khusus, pemetaan fungsi berikut direkomendasikan sebagai titik awal:

Berikut adalah daftar lengkap semua komponen Material 3:

Terakhir, daftar beberapa komponen yang relevan dari library Wear Compose Foundation versi 1.5.0-beta01:

Tombol

Tombol di M3 berbeda dengan M2.5. Chip M2.5 telah diganti dengan Tombol. Implementasi Button memberikan nilai default untuk Text maxLines dan textAlign. Nilai default tersebut dapat diganti di elemen Text.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

M3 juga menyertakan variasi tombol baru. Lihat di ringkasan Referensi API Compose Material 3.

M3 memperkenalkan tombol baru: EdgeButton. EdgeButton tersedia dalam 4 ukuran berbeda: ekstra kecil, kecil, sedang, dan besar. Implementasi EdgeButton memberikan nilai default untuk maxLines, bergantung pada ukuran yang dapat disesuaikan.

Jika Anda menggunakan TransformingLazyColumn dan ScalingLazyColumn, teruskan EdgeButton ke ScreenScaffold sehingga berubah bentuk, mengubah bentuknya dengan scroll. Lihat kode di bawah untuk memeriksa cara menggunakan EdgeButton dengan ScreenScaffold dan TransformingLazyColumn.

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

Scaffold

Scaffold di M3 berbeda dengan M2.5. Di M3, AppScaffold dan composable ScreenScaffold baru telah menggantikan Scaffold. AppScaffold dan ScreenScaffold menata struktur layar dan mengoordinasikan transisi komponen ScrollIndicator dan TimeText.

AppScaffold memungkinkan elemen layar statis seperti TimeText tetap terlihat selama transisi dalam aplikasi seperti geser untuk menutup. ​​Ini menyediakan slot untuk konten aplikasi utama, yang biasanya akan disediakan oleh komponen navigasi seperti SwipeDismissableNavHost

Anda mendeklarasikan satu AppScaffold untuk Aktivitas dan menggunakan ScreenScaffold untuk setiap Layar.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

Jika menggunakan HorizontalPager dengan HorizontalPagerIndicator, Anda dapat bermigrasi ke HorizontalPagerScaffold. HorizontalPagerScaffold ditempatkan dalam AppScaffold. AppScaffold dan HorizontalPagerScaffold menata struktur Pager dan mengoordinasikan transisi komponen HorizontalPageIndicator danvTimeText.

HorizontalPagerScaffold menampilkan HorizontalPageIndicator di ujung tengah layar secara default dan mengoordinasikan tampilan/penyembunyikan TimeText dan HorizontalPageIndicator sesuai dengan apakah Pager sedang di-paging, hal ini ditentukan oleh PagerState.

Ada juga komponen AnimatedPage baru, yang menganimasikan halaman dalam Pager dengan efek penskalaan dan scrim berdasarkan posisinya.

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

Terakhir, M3 memperkenalkan VerticalPagerScaffold yang mengikuti pola yang sama dengan HorizontalPagerScaffold:

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
   val pagerState = rememberPagerState(pageCount = { 10 })

   VerticalPagerScaffold(pagerState = pagerState) {
      VerticalPager(
         state = pagerState
      ) { page ->
             AnimatedPage(pageIndex = page, pagerState = pagerState){
                ScreenScaffold {
        …
   }
}

Placeholder

Ada beberapa perubahan API antara M2.5 dan M3. Placeholder.PlaceholderDefaults sekarang menyediakan dua pengubah:

• Modifier.placeholder, yang digambar, bukan konten yang belum dimuat
• Efek shimmer placeholder Modifier.placeholderShimmer yang memberikan efek shimmer placeholder yang berjalan dalam loop animasi saat menunggu data dimuat.

Lihat di bawah untuk perubahan tambahan pada komponen Placeholder.

SwipeDismissableNavHost

SwipeDismissableNavHost adalah bagian dari wear.compose.navigation. Saat komponen ini digunakan dengan M3, MaterialTheme M3 akan mengupdate LocalSwipeToDismissBackgroundScrimColor dan LocalSwipeToDismissContentScrimColor.

TransformingLazyColumn

TransformingLazyColumn adalah bagian dari wear.compose.lazy.foundation dan menambahkan dukungan untuk menskalakan dan mengubah animasi pada item daftar selama men-scroll, sehingga meningkatkan pengalaman pengguna.

Serupa dengan ScalingLazyColumn, rememberTransformingLazyColumnState() menyediakan rememberTransformingLazyColumnState() untuk membuat TransformingLazyColumnState yang diingat di seluruh komposisi.

Untuk menambahkan animasi penskalaan dan perubahan bentuk, tambahkan kode berikut ke setiap item daftar:

• Modifier.transformedHeight, yang memungkinkan Anda menghitung tinggi item yang ditransformasikan menggunakan TransformationSpec, Anda dapat menggunakan rememberTransformationSpec() kecuali jika Anda memerlukan penyesuaian lebih lanjut.
• SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

Link penting

Untuk mempelajari migrasi dari M2.5 ke M3 di Compose lebih lanjut, lihat referensi tambahan berikut.

Contoh

Contoh Wear OS di cabang Material3 di GitHub

Compose untuk codelab Wear OS

Referensi API dan kode sumber

• Referensi API Compose Material 3
• Contoh Compose Material 3 dalam kode sumber

Desain

• Panduan desain