Implementare un tema Riepilogo

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

Aggiungi colori

Glance fornisce un'implementazione dei colori Material pronta all'uso. Per utilizzare il tema integrato, racchiudi il componibile di primo livello con GlanceTheme, come mostrato nell'esempio seguente.

Sui dispositivi che supportano i colori dinamici, questo tema deriva dai colori della piattaforma specifici dell'utente. Su altri dispositivi, viene utilizzato il tema di base di Material. Utilizza GlanceTheme.colors per applicare lo stile con i colori del tema Wrapped. 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),
        // ...

    )
}

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

Ad esempio, fornisci i colori Material 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
    )
}

Fornisci i colori dello schema al GlanceTheme che aggrega tutti i tuoi elementi 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),
        // ...
    )
}

Se preferisci utilizzare i colori dinamici dello sfondo, se supportati, e la combinazione di colori della tua app in caso contrario, puoi passare in modo condizionale la combinazione di colori della tua app in GlanceTheme. come mostrato nello snippet seguente:

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

Aggiungi 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 drawable (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>

Forniscilo al composable di destinazione:

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

Indietro
Creazione di una UI in sintesi
Avanti
Riepilogo interoperabilità