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.
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 sayfanın ilerleyen bölümlerinde açıklandığı gibi widget'lar ve uyarlanabilir simgeler için de ayrı olarak kullanılabilir. 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 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ı, Android 13'te ise 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ı aracılığı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 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. Bunu yapmak için applyToActivitiesIfAvailable() numaralı telefondan ActivityLifeCycleCallbacks kaydını uygulamanıza ekleyin.
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 renkler için tasarım yaparken bu özellikten yararlanabilirsiniz.
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 ve 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.
Material 3'ün özel renkleri uyumlu hale getirme ile ilgili 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.