Cómo implementar un tema de un vistazo

Glance proporciona una API para administrar el tema de color. Para otros atributos de estilo, como TextStyle, declara variables de nivel superior.

Agregar colores

Glance proporciona una implementación de colores de Material listos para usar. Para usar el tema integrado, une tu elemento de componibilidad 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 la plataforma específicos del usuario. En otros dispositivos, se 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),
        // ...

    )
}
GlanceSnippets.kt

Para personalizar el tema, puedes pasar el colors al GlanceTheme. Glance proporciona la biblioteca de interoperabilidad androidx.glance:glance-material para Material 2 y androidx.glance:glance-material3 para la compatibilidad con 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 Glance, 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
    )
}
GlanceSnippets.kt

Proporciona los colores del esquema al GlanceTheme que une todos tus 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),
        // ...
    )
}
GlanceSnippets.kt

Si prefieres usar colores dinámicos del fondo de pantalla cuando sea compatible y, de lo contrario, el esquema de colores de tu app, puedes pasar de forma condicional 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),
        // ...
    )
}
GlanceSnippets.kt

Agrega 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>
button_outline.xml

Proporciónalo al elemento componible de destino:

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