Android 12'de eklenen Dinamik Renk, kullanıcıların cihazları, kişisel duvar kağıdının renk şemasına uygun olarak tonlanır veya duvar kağıdı seçicide seçtiğiniz bir renk ile seçin.
Bu özellikten, bir DynamicColors API ekleyerek
Uygulamanızı daha kişisel hale getirmek için bu temayı uygulamanıza veya etkinliğinize uygular
kullanıcıya gösterir.
Bu sayfada, uygulamanızda Dinamik Renkler'i kullanmaya ilişkin talimatlar yer almaktadır. Bu özellik, widget'lara ve uyarlanabilir simgelere bakın. Ayrıca codelab'i de deneyebilirsiniz.
Android renk şemalarını nasıl oluşturur?
Android, kullanıcının renk düzeninden renk şemaları oluşturmak için duvar kağıdı olarak kullanın.
Sistem, seçilen duvar kağıdı resmindeki ana renkleri algılar ve bir source rengi ayıklar.
Sistem, beş temel rengi daha iyi tahmin etmek için bu kaynak rengini kullanır. Birincil, İkincil, Üçüncül, Nötr ve Nötr olarak bilinir. varyantı gibi bir değer gönderin.
Ş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 paletlerini oluşturma örneği Sistem, bu tek duvar kağıdını kullanarak beş farklı renk elde etmek için kullanılır açık ve koyu renkli temalara temel oluşturur.
Kullanıcının cihazında renk varyantlarının gösterilme şekli
Kullanıcılar, duvar kağıdından çıkarılan renkler ve farklı renkler arasından seçim yapabilir. daha fazla varyant eklenecek şekilde Android 12'de kullanıma sunulacak. Örneğin, Örneğin, Android 13 çalıştıran Pixel telefonu olan kullanıcı bir varyant seçer Duvar kağıdı ve style ayarlarını değiştirin.
Android 12'ye Ton Noktası ve ardından Nötr, Vibrant</brant özelliği eklendi Android 13'teki Tonal ve Etkileyici varyantları. Her varyantın benzersiz bir adı var kullanıcının duvar kağıdının tohum renklerini canlılığa dönüştüren tarif renk tonu döndürülüyor. Aşağıdaki örnekte tek bir renk şeması gösterilmektedir ifade ettiğini görebilirsiniz.
Uygulamanız bu renklere erişmek için aynı jetonları kullanmaya devam ediyor. Ayrıntılı bilgi jetonlar hakkında bu sayfadaki Temanızı jetonlarla oluşturma bölümüne bakın.
Oluştur'u kullanmaya başlama
Kullanıcı arayüzünü Compose ile oluşturuyorsanız E-posta Yazma'da Materyal Tema (E-posta Yazmada Materyal Teması) uygulamasını indirin.
Görünümler'i kullanmaya başlama
Dinamik Renk'i uygulama veya etkinlik düzeyinde uygulayabilirsiniz. Bunun için şu numarayı arayın:
applyToActivitiesIfAvailable():
Uygulamanıza ActivityLifeCycleCallbacks.
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, e-tablolara renk atamak için tasarım jetonlarından kullanıcı arayüzü öğeleri daha verimli ve tutarlıdır. Tasarım jetonu, renk rollerini anlam açısından atayın. kullanıcı arayüzünün farklı öğelerine entegre edilebilir. Bu şekilde, uygulamanızın ton sisteminde daha çok esneklik, ölçeklenebilirlik ve tutarlılık sağlar. Özellikle de açık ve koyu temalar ve dinamik renkler için tasarlama.
Aşağıdaki snippet'lerde açık ve koyu tema örnekleri gösterilmiştir ve dinamik renk jetonlarını uyguladıktan sonra, karşılık gelen bir renk xml dosyası olarak ayarlayın.
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 oluşturma jetonları 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 Materyal Tema Oluşturucu'yu tasarlarken, Figma eklentisi veya tarayıcıda) ekleyebilirsiniz.
Renk şemalarını kullanmanın nasıl daha iyi erişilebilirlik sağlayabileceği hakkında daha fazla bilgi edinmek için görmek için Materyal 3 sayfasına bakın. Renk sistemi erişilebilirliği.
Özel veya marka renklerini koruyun
Uygulamanızda, değiştirmek istemediğiniz özel veya marka renkleri varsa renk tonunu oluştururken, bunları tek tek ekleyebilirsiniz. şema. Ö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, Materyal Tema Oluşturucu'yu kullanarak
uyumlu renkler kullanmanızı sağlar ve böylece, birleştirilmiş bir renk sistemi oluşturur.
Bu seçenekle, özel üslubu değiştirmek için HarmonizedColors aracını kullanın
renk. Bu sayede, birleştirildiğinde görsel bir denge ve erişilebilir bir kontrast elde edebilirsiniz
kullanıcı tarafından oluşturulan renklerle. Çalışma zamanında
applyToContextIfAvailable().
Ö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 Şunun için Dinamik Renk teması: widgets: Android 12 ve sonraki sürümler uyarlanabilir simgeler: Android 13.