Implementar um tema do Glance

O Glance oferece uma API para gerenciar o tema de cores. Para outros atributos de estilo, como TextStyle, declare variáveis de nível superior.

Adicionar cores

O Glance oferece uma implementação de cores do Material Design pronta para uso. Para usar o tema integrado, envolva o elemento combinável de nível superior com GlanceTheme, conforme mostrado em no exemplo a seguir.

Em dispositivos compatíveis com cores dinâmicas, esse tema é derivado do cores de plataforma específicas do usuário. Em outros dispositivos, isso se refere ao material tema de referência. Use GlanceTheme.colors para definir o estilo com as cores do wrapper. tema. Você pode usar esses valores do tema em qualquer lugar em que uma cor seja necessária.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}
GlanceSnippets.kt

Para personalizar o tema, transmita o colors para o GlanceTheme. Resumo fornece a biblioteca de interoperabilidade androidx.glance:glance-material para Material 2 e androidx.glance:glance-material3 para cores do Material 3 suporte.

Por exemplo, fornecer as cores do Material Design atuais ao ColorProviders. API para criar um esquema de cores do Resumo, conforme mostrado no snippet a seguir:

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

Forneça as cores do esquema à GlanceTheme que envolve todas as elementos combináveis, conforme mostrado no exemplo abaixo:

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 você preferir usar cores dinâmicas do plano de fundo quando possível, e seu o esquema de cores do app. Caso contrário, você pode transmitir condicionalmente o esquema de cores dele. no GlanceTheme. Isso é mostrado neste 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

Adicionar formas

Para fornecer formas ou sombras especiais ao widget de app, use a API Android API Drawables.

Por exemplo, o snippet a seguir mostra como criar um drawable (uma 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

Forneça-o ao elemento combinável de destino:

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