O Glance fornece 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 fornece 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 no
exemplo abaixo.
Em dispositivos com suporte a cores dinâmicas, esse tema é derivado das
cores da plataforma específicas do usuário. Em outros dispositivos, isso retoma o tema
de referência do Material Design. Use GlanceTheme.colors
para definir o estilo com as cores do tema
agrupado. 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), // ... ) }
Para personalizar o tema, transmita o colors
para o GlanceTheme
. O Glance
fornece a biblioteca de interoperabilidade androidx.glance:glance-material
para o
Material 2 e androidx.glance:glance-material3
para o suporte a cores
do Material 3.
Por exemplo, forneça as cores do Material Design do seu app à API ColorProviders
para criar um esquema de cores Glance, conforme mostrado no snippet abaixo:
// 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 ) }
Forneça as cores do esquema para o GlanceTheme
que envolve todos os
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), // ... ) }
Se você preferir usar cores dinâmicas do plano de fundo quando houver suporte e, caso contrário, o
esquema de cores do app, é possível transmitir condicionalmente o esquema de cores
do app para a 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), // ... ) }
Adicionar formas
Para fornecer formas ou sombras especiais ao widget do app, use a API Android Drawables.
Por exemplo, o snippet abaixo 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>
Forneça ao elemento combinável de destino:
GlanceModifier.background( imageProvider = ImageProvider(R.drawable.button_outline) )