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 las variables de nivel superior.

Agrega colores

Glance proporciona una implementación de los colores de Material desde el primer momento. Para usar tema integrado, une tu elemento componible de nivel superior con GlanceTheme, como se muestra en en el siguiente ejemplo.

En los dispositivos que admiten colores dinámicos, este tema deriva de la colores de la plataforma específicos del usuario. En otros dispositivos, se recurre a Material. el tema del modelo de referencia. Usa GlanceTheme.colors para aplicar estilos con los colores del ajuste el tema. 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 a GlanceTheme. Vistazo proporciona la biblioteca de interoperabilidad de androidx.glance:glance-material para Material 2 y androidx.glance:glance-material3 para los colores de Material 3 y asistencia.

Por ejemplo, proporciona los colores de material existentes de tu app al elemento ColorProviders. API 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 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 las esquema de colores de la app; de lo contrario, 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

Cómo agregar formas

Para proporcionar formas o sombras especiales al widget de tu app, usa el la API de Drawables.

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