Cómo implementar un tema de un vistazo

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

    )
}
GlanceSnippets.kt

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
    )
}
GlanceSnippets.kt

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

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

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

Proporciona la información al elemento componible de destino:

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