Kullanıcıların uygulamanızdaki renk deneyimini kişiselleştirmelerini sağlayın

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.

Şekil 1. Farklı duvar kağıtlarından elde edilen tonal renk şeması örnekleri

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.

  1. Sistem, seçilen duvar kağıdı resmindeki ana renkleri algılar ve bir source rengi ayıklar.

  2. 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.

    Kaynak rengi ayıklama örneği
    Şekil 2. Duvar kağıdı resminden kaynak rengi ayıklama ve beş temel renge çıkarma örneği

  3. Sistem, her bir tuş rengini 13 tonluk bir ton paletine dönüştürür.

    Belirli bir ton paletlerini oluşturma örneği
    Şekil 3. Belirli bir ton paletlerini oluşturma örneği

  4. 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.

Şekil 4. Duvar kağıdı ayarlarında renk varyantlarını seçme (Pixel cihazda gösterilir)

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.

Şekil 5. Farklı renk varyantlarının tek bir cihazda nasıl göründüğüne dair örnek

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().

Şekil 6. Özel renkleri uyumlu hale getirme örneği

Ö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.