Android 12'de eklenen Dinamik Renk, kullanıcıların cihazlarını kişisel duvar kağıdlarının renk şemasıyla veya duvar kağıdı seçicideki bir renkle uyumlu olacak şekilde kişiselleştirmelerini sağlar.
Temayı, uygulamanıza veya etkinliğinize uygulayarak uygulamanızı kullanıcı için daha kişiselleştirilmiş hale getiren DynamicColors API'yi ekleyerek bu özellikten yararlanabilirsiniz.
Bu sayfada, uygulamanızda dinamik renkleri uygulamayla ilgili talimatlar yer almaktadır. Bu özellik, bu sayfanın ilerleyen bölümlerinde açıklandığı gibi widget'lar ve uyarlanabilir simgeler için de ayrı olarak kullanılabilir. Ayrıca codelab'i de deneyebilirsiniz.
Android'in renk şemaları 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 rengi ayıklama ve beş temel renge çıkarma ö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 çalıştıran 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ı, Android 13'te ise Nötr, Canlı Tonlu ve Dijital varyantları eklendi. Her varyant, kullanıcının duvar kağıdının çekirdek renklerini canlılık kullanarak ve tonu döndürerek dönüştüren benzersiz bir tarif içerir. 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 ediyor. Jetonlarla ilgili ayrıntılar için bu sayfadaki Jetonlarla temanızı oluşturma bölümüne bakın.
Görünümleri kullanmaya başlama
Dinamik rengi uygulama veya etkinlik düzeyinde uygulayabilirsiniz. Bunun için applyToActivitiesIfAvailable() numaralı telefonu arayarak uygulamanıza ActivityLifeCycleCallbacks kaydettirin.
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); } }
Sonra, 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 akıcı 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 esnekliğe, ölçeklenebilirliğe ve tutarlılığa sahip 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 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. Örnek:
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 ortaya çıkar.
Özel renkleri uyumlu hale getirme ile ilgili Materyal 3 rehberine bakın.
Uyarlanabilir simgelerinize ve widget'larınıza dinamik renk uygulama
Uygulamanızda Dinamik Renk teması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ı da destekleyebilirsiniz.