Bir Bakışta temasını uygulama

Glance, renk temasını yönetmek için bir API sağlar. TextStyle gibi diğer stil özellikleri için üst düzey değişkenler tanımlayın.

Renk ekleyin

Glance, Material renklerinin hazır bir uygulamasını sunar. Yerleşik temayı kullanmak için üst düzey composable'ınızı aşağıdaki örnekte gösterildiği gibi GlanceTheme ile sarmalayın.

Dinamik renkleri destekleyen cihazlarda bu tema, kullanıcıya özel platform renklerinden türetilir. Diğer cihazlarda ise Material temel teması kullanılır. Sarmalanmış temadaki renklerle stil oluşturmak için GlanceTheme.colors kullanın. Temadaki bu değerleri, renk gereken her yerde kullanabilirsiniz.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}

Temayı özelleştirmek için colors değerini GlanceTheme öğesine iletebilirsiniz. Glance, Material 2 için androidx.glance:glance-material birlikte çalışabilirlik kitaplığını ve Material 3 renk desteği için androidx.glance:glance-material3 kitaplığını sağlar.

Örneğin, aşağıdaki snippet'te gösterildiği gibi, bir Glance renk şeması oluşturmak için uygulamanızın mevcut Material renklerini ColorProviders API'sine sağlayın:

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

Aşağıdaki örnekte gösterildiği gibi, şemadaki renkleri tüm composable'larınızı sarmalayan GlanceTheme öğesine sağlayın:

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

Desteklendiğinde duvar kağıdındaki dinamik renkleri, desteklenmediğinde ise uygulamanızın renk şemasını kullanmak isterseniz uygulamanızın renk şemasını GlanceTheme içinde koşullu olarak iletebilirsiniz. Bu durum, aşağıdaki snippet'te gösterilmektedir:

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

Şekil ekleme

Uygulama widget'ınıza özel şekiller veya gölgeler eklemek için Android Drawables API'yi kullanın.

Örneğin, aşağıdaki snippet'te çizilebilir bir öğenin (şekil) nasıl oluşturulacağı gösterilmektedir:

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

Hedef composable'a sağlayın:

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

Önceki
Bir Bakışta ile kullanıcı arayüzü oluşturma
Sonraki
Bir Bakışta birlikte çalışabilirlik