Implémenter un thème Glance

Glance fournit une API pour gérer le thème de couleurs. Pour les autres attributs de style, comme TextStyle, déclarez les variables de niveau supérieur.

Ajouter des couleurs

Glance fournit une implémentation des couleurs Material prête à l'emploi. Pour utiliser la thème intégré, encapsulez votre composable de premier niveau avec GlanceTheme, comme indiqué dans l'exemple suivant.

Sur les appareils qui prennent en charge les couleurs dynamiques, ce thème est dérivé du les couleurs de la plateforme spécifiques à l’utilisateur. Sur les autres appareils, il s'agit de de référence. Utiliser GlanceTheme.colors pour appliquer un style avec les couleurs du retour à la ligne d'un thème. Vous pouvez utiliser ces valeurs du thème partout où une couleur est nécessaire.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}
GlanceSnippets.kt

Pour personnaliser le thème, vous pouvez transmettre colors à GlanceTheme. Aperçu fournit la bibliothèque d'interopérabilité androidx.glance:glance-material pour Material 2 et androidx.glance:glance-material3 pour les couleurs Material 3 de l'assistance.

Par exemple, fournissez les couleurs Material existantes de votre application au ColorProviders. API pour créer un jeu de couleurs Glance, comme illustré dans l'extrait suivant:

// 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

Fournissez les couleurs du schéma à l'élément GlanceTheme qui encapsule tous vos composables, comme illustré dans l'exemple suivant:

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

Si vous préférez utiliser les couleurs dynamiques du fond d'écran lorsqu'elles sont compatibles et que votre jeu de couleurs de l'application. Sinon, vous pouvez transmettre le jeu de couleurs de votre application de manière conditionnelle. dans GlanceTheme. Ce processus est illustré dans l'extrait suivant:

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

Ajouter des formes

Pour ajouter des formes ou des ombres spéciales à votre widget d'application, utilisez l'application Android API Drawables

Par exemple, l'extrait de code suivant montre comment créer un drawable (une forme):

<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

Fournissez-le au composable cible:

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