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

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

Как добавить цвета

В Glance реализованы цвета Material Design. Чтобы использовать встроенную тему, оберните композицию верхнего уровня в 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.

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

// 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, который содержит все ваши композиции, как показано в следующем примере:

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