Android 12'de eklenen Dinamik Renk, kullanıcıların cihazlarını kişisel duvar kağıdlarının renk şemasına veya duvar kağıdı seçicideki bir renge göre kişiselleştirmelerini sağlar.
Bu özelliği kullanmak için DynamicColors API'yi ekleyebilirsiniz. Bu API, uygulamanızı kullanıcıya göre daha kişiselleştirilmiş hale getirmek için bu temayı uygulamanıza veya etkinliğinize uygular.
Bu sayfada, uygulamanızda dinamik renkleri uygulamayla ilgili talimatlar yer almaktadır. Bu özellik, bu sayfada daha sonra açıklandığı gibi widget'lar ve uyarlanabilir simgeler için de ayrı olarak kullanılabilir. Codelab'i de deneyebilirsiniz.
Android'in renk şemalarını oluşturma yöntemi
Android, kullanıcının duvar kağıdından renk şemaları oluşturmak için aşağıdaki adımları uygular.
Sistem, seçili duvar kağıdı resmindeki ana renkleri algılar ve bir kaynak renk çıkarır.
Sistem, Birincil, İkincil, Üçüncül, Nötr ve Nötr varyant olarak bilinen beş temel rengi daha da tahmin etmek için bu kaynak rengi kullanır.
Şekil 2. Duvar kağıdı resminden kaynak renklerin ayıklanması ve beş temel renge ayıklanması örneği Sistem, her ana rengi 13 tondan oluşan bir ton paletine dönüştürür.
Şekil 3. Belirli bir ton paleti oluşturma örneği Sistem, bu tek duvar kağıdından beş farklı renk şeması oluşturur. Bu şemalar, açık ve koyu temaların temelini oluşturur.
Renk varyantlarının kullanıcının cihazında nasıl göründüğü
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 daha fazla varyant eklendi. Örneğin, Android 13 yüklü bir Pixel telefonu olan bir kullanıcı, şekil 4'te gösterildiği gibi Duvar kağıdı ve stil ayarlarından bir varyant seçer.
Android 12'de Tonlu Nokta varyantı, ardından Android 13'te Nötr, Canlı Tonlu ve Dijital varyantları eklendi. Her varyantın, kullanıcının duvar kağıdının ana renklerini canlılığı ve tonu döndürerek dönüştüren benzersiz bir tarifi vardır. 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 aynı jetonları kullanmaya devam eder. Jetonlarla ilgili ayrıntılar için bu sayfadaki Temanızı jetonlarla oluşturma bölümüne bakın.
Görünümleri kullanmaya başlama
Dinamik rengi uygulama veya etkinlik düzeyinde uygulayabilirsiniz. Bunu yapmak için applyToActivitiesIfAvailable() numaralı telefondan ActivityLifeCycleCallbacks uygulamanıza kaydedin.
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şturma
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 fazla esneklik, ölçeklenebilirlik ve tutarlılık elde etmesini sağlar. Özellikle açık ve koyu temalar ve dinamik renk için tasarım yaparken bu özellik çok güçlüdür.
Aşağıdaki snippet'lerde, dinamik renk jetonları uygulandıktan sonra açık ve koyu tema örnekleri ve ilgili renk XML'i 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
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 Material 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 kullanılabilen Material Theme Builder'a göz atın.
Renk şemalarının kullanımının uygulamanızda erişilebilirliği nasıl artırabileceği hakkında daha fazla bilgi edinmek için Renk sistemi erişilebilirliği ile ilgili Materyal 3 sayfasına bakın.
Özel veya marka renklerini koruma
Uygulamanızda, kullanıcı tercihlerine göre değiştirmek istemediğiniz özel veya marka renkleri varsa renk şemanızı oluştururken bunları tek tek 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 aktarmak ve böylece birleşik bir renk sistemi oluşturmak için Material Theme Builder'ı kullanabilirsiniz.
Bu seçenekte, özel renklerin tonunu değiştirmek için HarmonizedColors simgesini kullanın. Bu, kullanıcı tarafından oluşturulan renklerle birlikte kullanıldığında görsel denge ve erişilebilir kontrast sağlar. applyToContextIfAvailable() ile çalışma zamanında gerçekleşir.
Material 3'ün özel renkleri uyumlu hale getirme konulu yönergelerine göz atı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 temalarını da destekleyebilirsiniz.