Как реализовать тему Glance

Glance предоставляет API для управления цветовой темой. Для других атрибутов стиля, например TextStyle, объявите переменные верхнего уровня.

Добавить цвета

Glance предоставляет готовую реализацию цветов Material. Чтобы использовать встроенную тему, оберните composable-функцию верхнего уровня в GlanceTheme, как показано в примере ниже.

На устройствах, поддерживающих динамические цвета, эта тема создается на основе цветов платформы, выбранных пользователем. На других устройствах используется базовая тема Material. Используйте GlanceTheme.colors, чтобы применить цвета из темы. Вы можете использовать эти значения из темы везде, где требуется цвет.

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...

    )
}

Чтобы настроить тему, передайте colors в GlanceTheme. Glance предоставляет библиотеку совместимости androidx.glance:glance-material для Material 2 и androidx.glance:glance-material3 для поддержки цветов Material 3.

Например, передайте существующие цвета Material Design в API ColorProviders, чтобы создать цветовую схему Glance, как показано в следующем фрагменте кода:

// 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
    )
}

Передайте цвета из схемы в GlanceTheme, который содержит все ваши composable-функции, как показано в следующем примере:

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

Если вы хотите использовать динамические цвета обоев, когда они поддерживаются, и цветовую схему приложения в остальных случаях, вы можете передавать цветовую схему приложения в GlanceTheme по условию. Это показано в следующем фрагменте кода:

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

Добавить фигуры

Чтобы добавить в виджет приложения специальные фигуры или тени, используйте Android Drawables API.

Например, в следующем фрагменте кода показано, как создать объект Drawable (фигуру):

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="16dp"/>
    <stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>

Передайте его в целевую composable-функцию:

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

Назад
Как создавать интерфейсы с помощью Glance
Далее
Совместимость с Glance