Implementare un tema Riepilogo

Glance fornisce un'API per gestire il tema a colori. Per altri attributi di stile, come TextStyle, dichiara le variabili di primo livello.

Aggiungi colori

Glance fornisce un'implementazione immediata dei colori del materiale. Per utilizzare il tema integrato, aggrega la tua componibile di primo livello con GlanceTheme, come mostrato nell'esempio seguente.

Sui dispositivi che supportano colori dinamici, questo tema deriva dai colori della piattaforma specifici dell'utente. Su altri dispositivi, viene usato il tema di riferimento Material. Usa GlanceTheme.colors per applicare i colori del tema a capo. Puoi utilizzare questi valori del tema ovunque sia necessario un colore.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}
GlanceSnippets.kt

Per personalizzare il tema, puoi passare colors a GlanceTheme. Glance fornisce la libreria di interoperabilità androidx.glance:glance-material per il Material 2 e il supporto dei colori androidx.glance:glance-material3 per Material 3.

Ad esempio, fornisci i colori dei materiali esistenti della tua app all'API ColorProviders per creare una combinazione di colori Glance, come mostrato nello snippet seguente:

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

Fornisci i colori dello schema al GlanceTheme che aggrega tutti i componibili, come mostrato nell'esempio seguente:

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

Se preferisci utilizzare i colori dinamici dello sfondo (se supportato) e la combinazione di colori della tua app, negli altri casi, puoi trasmettere la combinazione di colori dell'app in GlanceTheme in modo condizionale. Questa informazione è visibile nel seguente snippet:

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

Aggiungere forme

Per fornire forme o ombre speciali al widget dell'app, utilizza l'API Android Drawables.

Ad esempio, lo snippet seguente mostra come creare un elemento disegnabile (una forma):

<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

Forniscilo al componente componibile di destinazione:

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