Implémenter un thème Glance

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

Ajouter des couleurs

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

Sur les appareils compatibles avec les couleurs dynamiques, ce thème est dérivé des couleurs spécifiques à l'utilisateur de la plate-forme. Sur d'autres appareils, le thème de référence de Material est appliqué. Utilisez GlanceTheme.colors pour appliquer un style avec les couleurs du thème encapsulé. 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. Glance fournit la bibliothèque d'interopérabilité androidx.glance:glance-material pour Material 2 et androidx.glance:glance-material3 pour la prise en charge des couleurs Material 3.

Par exemple, fournissez les couleurs Material existantes de votre application à l'API ColorProviders pour créer un jeu de couleurs Glance, comme indiqué 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 au 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 disponibles, et le jeu de couleurs de votre application dans le cas contraire, vous pouvez transmettre de manière conditionnelle le jeu de couleurs de votre application dans GlanceTheme. Ceci est illustré dans l'extrait de code 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'API Android 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