Android 12'de eklenen Dinamik Renk, kullanıcıların cihazlarını kişisel duvar kağıdının renk şemasıyla veya duvar kağıdı seçicide belirli bir renkle uyumlu olacak şekilde kişiselleştirmelerine olanak tanır.
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 sayfa, uygulamanızda Dinamik Renkler'i uygulamayla ilgili talimatları içerir. Bu özellik, bu sayfanın ilerleyen bölümlerinde açıklandığı üzere, widget'lar ve uyarlanabilir simgeler için de ayrı olarak kullanılabilmektedir. Ayrıca codelab'i de deneyebilirsiniz.
Android renk şemalarını nasıl oluşturur?
Android, bir kullanıcının duvar kağıdından renk şemaları oluşturmak için aşağıdaki adımları gerçekleştirir.
Sistem, seçilen duvar kağıdı resmindeki ana renkleri algılar ve bir kaynak renk çıkarır.
Sistem, bu kaynak rengini Birincil, İkincil, Üçüncül, Nötr ve Nötr varyant olarak bilinen beş anahtar rengini daha fazla tahmin etmek için kullanır.
Şekil 2. Duvar kağıdı resminden kaynak rengi ayıklama ve beş temel renge çıkarma örneği Sistem, her bir tuş rengini 13 tonluk bir ton paletine dönüştürür.
Şekil 3. Belirli bir ton paletini oluşturma örneği Sistem, bu tek duvar kağıdını kullanarak beş farklı renk şeması oluşturur. Bu şemalar, açık ve koyu tema için temel oluşturur.
Kullanıcının cihazında renk varyantlarının gösterilme şekli
Kullanıcılar, Android 12'den itibaren duvar kağıdından çıkarılan renkler ve farklı temalar arasından renk varyantlarını seçebilirler. Android 13'te eklenen daha fazla varyant mevcuttur. Ö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'ye, Android 13'te Tonal Noktası ve ardından Nötr, Canlı Tonal ve İfadeli 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ı ile ifade edilen tek bir renk şeması gösterilmektedir.
Uygulamanız bu renklere erişmek için aynı jetonları kullanmaya devam ediyor. Jetonlar hakkında ayrıntılı bilgi için bu sayfadaki Jetonlarla temanızı oluşturma bölümüne bakın.
Oluştur'u kullanmaya başlama
Kullanıcı arayüzünü Compose ile oluşturuyorsanız uygulamanıza Dinamik Renk'in uygulanmasıyla ilgili ayrıntılar için Compose'da Materyal Teması bölümüne göz atın.
Görünümler'i kullanmaya başlama
Dinamik Renk'i 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şturun
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 renk rollerini anlamsal olarak 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'ler, dinamik renk jetonları uygulandıktan sonra açık ve koyu tema örneklerini ve karşılık gelen renk XML dosyasını gösterir.
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 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 nasıl daha iyi erişilebilirliği sağlayabileceğiyle ilgili daha fazla bilgi edinmek için Renk sistemi erişilebilirliği hakkındaki Materyal 3 sayfasına bakın.
Özel veya marka renklerini koruyun
Uygulamanızda kullanıcının tercihleriyle değiştirmek istemediğiniz özel veya marka renkleri varsa bunları renk şemanızı oluştururken 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, Malzeme Tema Oluşturucu'yu kullanarak renk şemanızı genişleten ek renkleri içe aktarabilir, böylece birleştirilmiş bir renk sistemi oluşturabilirsiniz.
Bu seçenekte, özel renklerin tonunu değiştirmek için HarmonizedColors aracını kullanın. Bu, kullanıcı tarafından oluşturulan renklerle birleştirildiğinde görsel bir denge ve erişilebilir bir kontrast sağlar. applyToContextIfAvailable() ile çalışma zamanında gerçekleşir.
Ö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.