Android 12'de eklenen Dinamik Renk, kullanıcıların cihazlarını kişisel duvar kağıtlarının renk şemasına uyacak şekilde veya duvar kağıdı seçicide seçilen bir rengi kullanarak kişiselleştirmelerini sağlar.
Bu özellikten, uygulamanızı kullanıcı için daha kişiselleştirmek amacıyla bu temayı uygulamanıza veya etkinliğinize uygulayan DynamicColors API'yi ekleyerek kullanabilirsiniz.
Bu sayfada, uygulamanıza Dinamik Renkler kullanımıyla ilgili talimatlar yer alır. Bu özellik, bu sayfanın ilerleyen kısımlarında açıklandığı üzere widget'lar ve uyarlanabilir simgeler için ayrı olarak da kullanılabilir. codelab'i de deneyebilirsiniz.
Android nasıl renk şemaları oluşturur?
Android, kullanıcının duvar kağıdından renk şemaları oluşturmak için aşağıdaki adımları uygular.
Sistem, seçilen duvar kağıdı resmindeki ana renkleri algılar ve bir kaynak rengi çıkarır.
Sistem, bu kaynak rengi Birincil, İkincil, Üçüncül, Nötr ve Nötr varyant olarak bilinen beş temel rengi daha fazla tahmin etmek için kullanır.
Şekil 2. Duvar kağıdı resminden kaynak rengi ayıklama ve beş temel renge ayıklama örneği Sistem, her bir anahtar rengini 13 tonluk bir ton paletinde yorumlar.
Şekil 3. Belirli bir ton paleti oluşturma örneği Sistem, tüm açık ve koyu temaların temelini oluşturan beş farklı renk şeması elde etmek için bu tek duvar kağıdını kullanır.
Renk varyantları, kullanıcının cihazında nasıl gösterilir?
Kullanıcılar Android 12'den itibaren duvar kağıdından ayıklanan renkler ve farklı temalar arasından renk varyantları seçebilir. Android 13'te ise daha fazla varyant eklenebilir. Örneğin, Android 13 çalıştıran bir Pixel telefona sahip bir kullanıcı Şekil 4'te gösterildiği gibi Duvar kağıdı ve stil ayarlarından bir varyant seçer.
Android 12'de ise Tonal Ton varyant, ardından Nötr, Canlı Tonal ve İfadeli varyantlar eklendi. Her varyant, kullanıcının duvar kağıdının temel renklerini canlılık ve tonu döndürerek dönüştüren benzersiz bir formüle sahiptir. Aşağıdaki örnekte, bu dört renk varyantıyla ifade edilen tek bir renk şeması gösterilmektedir.
Uygulamanız bu renklere erişmek için hâlâ aynı jetonları kullanıyor. Jetonlar hakkında ayrıntılı bilgi için bu sayfadaki Jetonlarla temanızı oluşturma bölümüne bakın.
Oluşturma özelliğini kullanmaya başlama
Kullanıcı arayüzünüzü Compose ile oluşturuyorsanız uygulamanıza Dinamik Renk uygulama ayrıntıları için Compose'da Materyal Tema'ya göz atın.
Görünümler'i kullanmaya başlama
Dinamik Renk'i uygulama veya etkinlik düzeyinde uygulayabilirsiniz. Bunu yapmak için applyToActivitiesIfAvailable() numaralı telefonu arayıp uygulamanıza ActivityLifeCycleCallbacks kaydı yaptırın.
Kotlin
class MyApplication: Application() {
override fun onCreate() {
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Java
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
DynamicColors.applyToActivitiesIfAvailable(this);
}
}
Ardından temayı uygulamanıza ekleyin.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Jetonlarla temanızı oluşturun
Dinamik Renk, farklı kullanıcı arayüzü öğelerine renk atamayı daha kolay ve tutarlı hale getirmek için tasarım jetonlarından yararlanır. Tasarım jetonu, kullanıcı arayüzünün farklı öğelerine belirli bir değer yerine anlamsal olarak renk rolleri atamanıza olanak tanır. Bu, uygulamanızın ton sisteminin daha esnek, ölçeklenebilir ve tutarlı olmasını sağlar. Ayrıca, açık ve koyu temalar ile dinamik renkler için tasarım yaparken özellikle güçlüdür.
Aşağıdaki snippet'lerde dinamik renk jetonları uygulandıktan sonra açık ve koyu tema örnekleri ve karşılık gelen renk xml'si gösterilmektedir.
Açık tema
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
Koyu tema
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
Renkler xml dosyası
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
Daha fazla bilgi için:
Dinamik Renk, özel renkler ve jeton oluşturma hakkında daha fazla bilgi edinmek için Malzeme 3 Dinamik Renk sayfasına göz atın.
Temel renk paletini, uygulamanızın renklerini ve temasını oluşturmak için Figma eklentisi veya tarayıcıda bulunan Material Theme Builder'a göz atın.)
Renk şemalarını kullanmanın, uygulamanızda daha iyi erişilebilirliği nasıl sağlayabileceği hakkında daha fazla bilgi edinmek için Renk sistemi erişilebilirliği ile ilgili Materyal 3 sayfasına bakın.
Özel renkleri veya marka renklerini koru
Uygulamanızda, kullanıcı tercihleriyle değiştirmek istemediğiniz özel renkler veya marka renkleri varsa bunları renk şemanızı oluştururken ayrı ayrı ekleyebilirsiniz. Örneğin:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Alternatif olarak, renk şemanızı genişleten ek renkleri içe aktararak birleştirilmiş bir renk sistemi oluşturmak için Malzeme Teması Oluşturucu'yu kullanabilirsiniz.
Bu seçenekle, özel renklerin tonunu değiştirmek için HarmonizedColors simgesini kullanın. Bu, kullanıcı tarafından oluşturulan renklerle birleştirildiğinde görsel bir denge ve erişilebilir bir kontrast sağlar. Bu işlem, applyToContextIfAvailable() ile çalışma zamanında gerçekleşir.
Materyal 3'ün özel renkleri uyumlu hale getirme ile ilgili kılavuzuna bakın.
Uyarlanabilir simgelerinize ve widget'larınıza Dinamik Renk uygulama
Uygulamanızda Dinamik Renk temalarını etkinleştirmenin yanı sıra, Android 12'den itibaren widget'lar ve Android 13'ten itibaren uyarlanabilir simgeler için Dinamik Renk temasını destekleyebilirsiniz.