Dynamic Theme in Jetpack Compose

Bu yazımızda Android 12 ve üzeri sürümlerde Material You tarafından oluşturulan renkleri kullanarak uygulamamızı nasıl şekillendirebiliriz, bu konu hakkında konuşacağız.

Dynamic Color Nedir?

Android 12 ve üzeri sürümler için Android sistemimiz dinamik temayı destekliyor. Cihazın duvar kağıdındaki renk paletini çıkartarak uygulamalarımızda bu renkleri kullanabileceğiz. Cihazımızın duvar kağıdını değiştirdiğimizde duvar kağıdının renk paletine göre uygulamamızın renkleride şekillenecek.

Renkler ve Temalar

Material’daki temalar Primary, Secondary, Tertiary ve Hata renklerinden türetilen bir dizi enterpolasyonlu renk ekleyerek renk paletinizi genişletirsiniz. Tema dosyalarını kendiniz eklemeden önce material 3 theme için websitesini ziyaret ederek daha fazla bilgi sahibi olabilirsiniz.

Siteyi ziyaret edip bilgi sahibi olduktan sonra kendi uygulamamızın ana renklerini seçmek için seçenekler bulacaksınız, bu renkler uygulamamızı tanımlayan renkler olacak.

Nasıl Kullanılır?

Implementation

Dynamic color için ilk önce material 3'ü projemizde build.gradle implement etmeliyiz.

implementation 'androidx.compose.material3:material3:latest-version'

Projemizde dependency altına implement ettikten sonra AppTheme’yı açıp material 3 kullanarak dynamic color destekliyor mu diye bir kontrol edip renk paletimizi uygulayacağız. Eğer desteklemiyor ise default renk paketimizi kullanacağız.

private val DarkColorPalette = darkColorScheme(
    primary = Purple200,
    secondary = Teal200
)

private val LightColorPalette = lightColorScheme(
    primary = Purple500,
    secondary = Teal200
)

Dynamic Theme (Dinamik Tema)

Bu ana kadar material 3 kütüphanesi için gerekli kısımları hallettik. Şimdi ise dinamik duvar kağıdı renklerine erişmek için gerekli olan 2 fonksiyonumuza bakalım. Bu fonksiyonlarımızın bir tanesi koyu (dark) tema için, diğeri ise açık (light) tema için gerekli olan renk paletimizi bize sağlayacak.

fun dynamicDarkColorScheme(context: Context): ColorScheme 

fun dynamicLightColorScheme(context: Context): ColorScheme

Composable Tema

Uygulamamızda composable hale getirmek için dikkat etmemiz gerek 2 konu var. Birincisi Android 12 ve üzerine destek verdiği için, api desteği, ikincisi ise cihazın tema durumu, açık tema mı? koyu tema mı? kullanıyor ona bakacağız.

// check API support
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S

UI oluşturan Theme üzerinde gerekli değişikliklerimizi yapmamız gerekiyor. Dinamik tema destekleniyor ise kullanacağız desteklenmiyor ise default renk paletimizi kullanıcaz.

Tema fonksiyonumuzdaki gerekli değişiklikleri yaptıktan sonra ilgili contentimizde istediğimiz color paletini kullanabiliriz.

Duvar kağıdının renk paletinde bulunan Primary, Secondary renklerini ekleyerek uygulamamızı şekillendirmiş oluyoruz.

Işte bu kadar. Umarım faydalı bir yazı olmuştur. Bu yazının github’daki sample’ına link’e tıklayarak ulaşabilirsiniz. Bir sonraki yazıda görüşmek üzere.

Resources

• https://m3.material.io/theme-builder#/dynamic
• https://developer.android.com/jetpack/compose/designsystems/material3
• https://m3.material.io/
• https://m3.material.io/styles/color/dynamic-color/overview
• https://github.com/tfaki/DynamicTheme
• https://siddroid.com/post/compose/dynamic-themes-with-compose-and-material-3/