Vistazo proporciona una API para administrar el tema de color. Para otros atributos de estilo, como TextStyle
, declara variables de nivel superior.
Agregar colores
De un vistazo proporciona una implementación de colores de Material listos para usar. Para usar el tema integrado, une el elemento componible de nivel superior con GlanceTheme
, como se muestra en el siguiente ejemplo.
En los dispositivos que admiten colores dinámicos, este tema se deriva de los colores de plataforma específicos del usuario. En otros dispositivos, recurre al tema de referencia de Material. Usa GlanceTheme.colors
para aplicar estilos con los colores del tema unido. Puedes usar estos valores del tema siempre que necesites un color.
override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { GlanceTheme { MyContent() } } } @Composable private fun MyContent() { Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
Para personalizar el tema, puedes pasar el elemento colors
a GlanceTheme
. Looker proporciona la biblioteca de interoperabilidad androidx.glance:glance-material
para Material 2 y androidx.glance:glance-material3
para la compatibilidad con los colores de Material 3.
Por ejemplo, proporciona los colores de material existentes de tu app a la API de ColorProviders
para crear un esquema de colores de un vistazo, como se muestra en el siguiente fragmento:
// 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 ) }
Proporciona los colores del esquema al GlanceTheme
que une todos los elementos componibles, como se muestra en el siguiente ejemplo:
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 prefieres usar colores dinámicos del fondo de pantalla cuando sea compatible y, en caso contrario, el esquema de colores de tu app, puedes pasar condicionalmente el esquema de colores de tu app en el GlanceTheme
. Esto se muestra en el siguiente fragmento:
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), // ... ) }
Cómo agregar formas
Para proporcionar formas o sombras especiales al widget de tu app, usa la API de elementos de diseño de Android.
Por ejemplo, en el siguiente fragmento, se muestra cómo crear un elemento de diseño (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>
Proporciona la información al elemento componible de destino:
GlanceModifier.background( imageProvider = ImageProvider(R.drawable.button_outline) )