Android 12'ye eklenen Dinamik Renk, kullanıcıların cihazlarını kişisel duvar kağıtlarının renk şemasıyla veya duvar kağıdı seçicideki belirli bir renkle uyumlu olacak şekilde kişiselleştirmelerine olanak tanır.
Uygulamanızı kullanıcıya göre daha kişiselleştirilmiş hale getirmek için bu temayı uygulamanıza veya etkinliğinize uygulayan DynamicColors API'sini ekleyerek bu özellikten yararlanabilirsiniz.
Bu sayfada, uygulamanızda Dinamik Renkler'i uygulama talimatları yer almaktadır. Bu özellik, bu sayfanın ilerleyen kısımlarında açıklandığı gibi widget'lar ve uyarlanabilir simgeler için de ayrı olarak kullanılabilir. Codelab'i de deneyebilirsiniz.
Android'in renk şeması 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çilen duvar kağıdı resmindeki ana renkleri algılar ve bir kaynak renk çıkarır.
Sistem, bu kaynak rengi kullanarak Birincil, İkincil, Üçüncül, Nötr ve Nötr varyant olarak bilinen beş temel rengi daha türetir.
Şekil 2. Duvar kağıdı resminden kaynak renk ayıklama ve beş ana renge ayıklama örneği Sistem, her anahtar 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ını kullanarak 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 çıkarılan renklerden ve farklı temalardan renk varyantları seçebilir. Android 13'te daha fazla varyant eklenmiştir. Örneğin, Android 13 yüklü bir Pixel telefon kullanan bir kullanıcı, Şekil 4'te gösterildiği gibi Duvar kağıdı ve stil ayarlarından bir varyant seçer.
Android 12'ye Tonal Spot varyantı, Android 13'e ise Neutral, Vibrant Tonal ve Expressive varyantları eklendi. Her varyantın, kullanıcının duvar kağıdının temel renklerini canlılık ve tonu döndürme yoluyla dönüştüren benzersiz bir formülü 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. Jetonlar hakkında ayrıntılı bilgi için bu sayfadaki Jetonlarla temanızı oluşturma bölümüne bakın.
Görünümler'i kullanmaya başlama
Dinamik rengi uygulama veya etkinlik düzeyinde uygulayabilirsiniz. Bunun için applyToActivitiesIfAvailable() yöntemini çağırarak uygulamanıza bir ActivityLifeCycleCallbacks 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 jetonları, kullanıcı arayüzünün farklı öğelerine sabit bir değer yerine semantik olarak renk rolleri atamanıza olanak tanır. Bu sayede uygulamanızın ton sistemi daha fazla esneklik, ölçeklenebilirlik ve tutarlılık kazanır. Bu, özellikle açık ve koyu temalar ile dinamik renkler için tasarım yaparken çok faydalıdır.
Aşağıdaki snippet'lerde, dinamik renk jetonları uygulandıktan sonra açık ve koyu temaların örnekleri ve bunlara karşılık gelen renk XML'leri 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>
Colors 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ını inceleyin.
Temel renk paletini ve uygulamanızın renkleri ile temasını oluşturmak için Figma eklentisi veya tarayıcıda kullanılabilen Materyal Teması Oluşturma aracına göz atın.
Renk şemalarını kullanarak uygulamanızda erişilebilirliği nasıl artırabileceğiniz hakkında daha fazla bilgi edinmek için Renk sistemi erişilebilirliği ile ilgili Material 3 sayfasını inceleyin.
Özel renkleri veya marka renklerini koruma
Uygulamanızda, kullanıcının tercihlerine göre değişmesini istemediğiniz özel renkler 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 için Materyal Teması Oluşturma Aracı'nı kullanarak birleşik bir renk sistemi oluşturabilirsiniz.
Bu seçenekte, özel renklerin tonunu değiştirmek için HarmonizedColors simgesini kullanın. Bu sayede, kullanıcı tarafından oluşturulan renklerle birleştirildiğinde görsel denge ve erişilebilir kontrast elde edilir. Çalışma zamanında applyToContextIfAvailable() ile gerçekleşir.
Material 3'ün özel renkleri uyumlu hale getirme ile ilgili kılavuzuna göz atı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ı destekleyebilirsiniz.