Implémenter un thème Glance

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

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 niveau supérieur avec GlanceTheme, comme illustré dans l'exemple suivant.

Sur les appareils compatibles avec les couleurs dynamiques, ce thème est dérivé des couleurs de la plate-forme spécifiques à l'utilisateur. Sur les autres appareils, le thème de référence Material est utilisé. Utilisez GlanceTheme.colors pour appliquer un style en utilisant 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),
        // ...

    )
}

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 compatibilité avec les 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 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
    )
}

Fournissez les couleurs du jeu de couleurs 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),
        // ...
    )
}

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. comme le montre 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),
        // ...
    )
}

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>

Fournissez-le au composable cible :

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

Précédent
Créer une UI avec Glance
Suivant
Interopérabilité de l'aperçu