Mengimplementasikan tema Glance

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

Tambahkan warna

Glance menyediakan implementasi warna Material secara langsung. 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, tema ini akan kembali ke tema dasar bawaan Material. Gunakan GlanceTheme.colors untuk memberi gaya dengan warna dari tema gabungan. 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),
        // ...

    )
}

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 aplikasi yang ada ke API ColorProviders untuk membuat skema warna Glance, seperti yang 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
    )
}

Berikan warna dari skema ke GlanceTheme yang menggabungkan semua composable Anda, 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),
        // ...
    )
}

Jika Anda lebih suka menggunakan warna dinamis dari wallpaper jika didukung, dan skema warna aplikasi Anda, Anda dapat meneruskan skema warna aplikasi secara bersyarat 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),
        // ...
    )
}

Menambahkan bentuk

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

Misalnya, cuplikan berikut menunjukkan 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>

Berikan ke composable target:

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

Sebelumnya
Mem-build UI dengan Glance
Berikutnya
Interoperabilitas Glance