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 secara otomatis. Untuk menggunakan tema bawaan, gabungkan composable tingkat atas dengan GlanceTheme, seperti yang ditunjukkan dalam contoh berikut.

Pada perangkat yang mendukung warna dinamis, tema ini berasal dari warna platform khusus pengguna. Di perangkat lain, ini kembali ke tema dasar pengukuran Material. Gunakan GlanceTheme.colors untuk memberi gaya dengan warna dari tema yang digabungkan. 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. Glance menyediakan library interoperabilitas androidx.glance:glance-material untuk Material 2, dan androidx.glance:glance-material3 untuk dukungan warna Material 3.

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 ke GlanceTheme yang menggabungkan semua composable Anda, seperti ditunjukkan pada 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 lebih suka menggunakan warna dinamis dari wallpaper jika didukung, dan skema warna aplikasi Anda jika tidak, Anda dapat meneruskan skema warna aplikasi secara kondisional di GlanceTheme. Hal ini ditampilkan 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 Drawables API.

Misalnya, cuplikan berikut menampilkan cara membuat drawable (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 ke composable target:

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

Sebelumnya
Mem-build UI dengan Glance
Berikutnya
Interoperabilitas Glance