Mengimplementasikan tema Glance

Glance menyediakan API untuk mengelola tema warna. Untuk atribut gaya lainnya, seperti TextStyle, deklarasikan variabel tingkat teratas.

Menambahkan warna

Glance menyediakan implementasi warna Material yang siap pakai. Untuk menggunakan tema bawaan, gabungkan composable tingkat atas dengan GlanceTheme, seperti yang ditunjukkan di contoh berikut.

Pada perangkat yang mendukung warna dinamis, tema ini berasal dari warna {i>platform<i} khusus pengguna. Di perangkat lain, permintaan ini kembali ke Material tema dasar pengukuran. Gunakan GlanceTheme.colors untuk memberi gaya dengan warna yang sudah digabungkan tema. Anda dapat menggunakan nilai-nilai ini dari tema di mana pun warna diperlukan.

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...

    )
}
GlanceSnippets.kt

Untuk menyesuaikan tema, Anda dapat meneruskan colors ke GlanceTheme. Sekilas menyediakan library interoperabilitas androidx.glance:glance-material Material 2, dan androidx.glance:glance-material3 untuk warna Material 3 dukungan teknis IT.

Misalnya, berikan warna material yang sudah ada di aplikasi Anda ke ColorProviders API untuk membuat skema warna Glance, seperti ditunjukkan dalam cuplikan berikut:

// Remember, use the Glance imports
// import androidx.glance.material3.ColorProviders

// Example Imports from your own app
// import com.example.myapp.ui.theme.DarkColors
// import com.example.myapp.ui.theme.LightColors

object MyAppWidgetGlanceColorScheme {

    val colors = ColorProviders(
        light = LightColors,
        dark = DarkColors
    )
}
GlanceSnippets.kt

Berikan warna dari skema hingga GlanceTheme yang menggabungkan semua composable, seperti yang ditunjukkan dalam contoh berikut:

override suspend fun provideGlance(context: Context, id: GlanceId) {
    // ...

    provideContent {
        GlanceTheme(colors = MyAppWidgetGlanceColorScheme.colors) {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...
    )
}
GlanceSnippets.kt

Jika Anda lebih suka menggunakan warna dinamis dari wallpaper jika didukung, dan skema warna aplikasi jika tidak, Anda bisa meneruskan skema warna aplikasi secara kondisional di GlanceTheme. Hal ini ditunjukkan dalam cuplikan berikut:

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme(
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S)
                GlanceTheme.colors
            else
                MyAppWidgetGlanceColorScheme.colors
        ) {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {
    // ...
    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...
    )
}
GlanceSnippets.kt

Menambahkan bentuk

Untuk memberikan bentuk atau bayangan khusus ke widget aplikasi Anda, gunakan Android API Drawable.

Misalnya, cuplikan berikut menunjukkan cara membuat drawable (sebuah bentuk):

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="16dp"/>
    <stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>
button_outline.xml

Berikan elemen tersebut ke composable target:

GlanceModifier.background(
    imageProvider = ImageProvider(R.drawable.button_outline)
)
GlanceSnippets.kt

Sebelumnya
Mem-build UI dengan Glance
Berikutnya
Interoperabilitas Glance