يمكنك السماح للمستخدمين بتخصيص تجربة الألوان في تطبيقك.

تتيح ميزة "اللون الديناميكي"، التي تمت إضافتها في Android 12، للمستخدمين تخصيص أن تتماشى أجهزتهم مع نظام ألوان خلفيتهم الشخصية أو من خلال لون محدد في منتقي الخلفية.

يمكنك الاستفادة من هذه الميزة من خلال إضافة DynamicColors API، التي تطبيق هذه المواضيع على تطبيقك أو نشاطك لجعل تطبيقك أكثر تخصيصًا للمستخدم.

الشكل 1. أمثلة على درجات الألوان المشتقة من خلفيات مختلفة

تتضمّن هذه الصفحة تعليمات لتنفيذ الألوان الديناميكية في تطبيقك. تتوفر هذه الميزة أيضًا بشكل منفصل التطبيقات المصغّرة والرموز التكيُّفية، كما هو موضَّح لاحقًا في هذه الصفحة. يمكنك أيضًا تجربة الدرس التطبيقي حول الترميز.

ملاحظة: تعتمد المعلومات الواردة في هذه الصفحة على فهم الأنماط والألوان والسمات والمظاهر على Android. يمكنك الاطّلاع على الأنماط والمظاهر لمعرفة التفاصيل.

كيف ينشئ Android أنظمة الألوان

ينفِّذ Android الخطوات التالية لإنشاء مخططات ألوان من ألوان الخلفية.

1. يكتشف النظام الألوان الرئيسية في صورة الخلفية المحددة لاستخراج لون مصدر.

2. يستخدم النظام لون المصدر هذا لتقدير خمسة ألوان أساسية بشكل أكبر تُعرَف باسم الأساسي، والثانوي، والثالث، والمحايد، والمحايد المتغير.

   

   الشكل 2. مثال على استخراج ألوان المصدر من صورة الخلفية واستخراجها إلى خمسة ألوان رئيسية

3. يفسّر النظام كل لون رئيسي في لوحة ألوان من 13 درجة لونية.

   

   الشكل 3. مثال على إنشاء لوحات ألوان معيّنة

4. يستخدم النظام هذه الخلفية الفردية لاستخلاص خمسة ألوان مختلفة. المخطط، الذي يوفر أساسًا لأي مظاهر فاتحة وداكنة.

كيفية ظهور خيارات الألوان على جهاز المستخدم

يمكن للمستخدمين تحديد ألوان مختلفة من الألوان المستخلصة من الخلفية وألوان مختلفة المظاهر بدءًا من Android 12، مع إضافة المزيد من الأنواع في Android 13. بالنسبة على سبيل المثال، قد يحدّد مستخدم لديه هاتف Pixel يعمل بنظام التشغيل Android 13 خيارًا من خلفيات و والنمط، كما هو موضّح في الشكل 4.

الشكل 4. تحديد خيارات الألوان في إعدادات الخلفية (المعروضة على جهاز Pixel)

تمت إضافة البقعة اللونية في نظام التشغيل Android 12، تليها الصيغة محايدة ومشرقة خيارات الدرجات اللونية والمعبّرة في Android 13 لكل صيغة قيمة فريدة تعمل على تحويل ألوان البذور لخلفية المستخدم من خلال الحيوية وتدوير تدرج اللون. يوضح المثال التالي نظام لون واحد وأعبر عنها من خلال متغيرات الألوان الأربعة.

الشكل 5. مثال على الشكل الذي تظهر به خيارات الألوان المختلفة على جهاز واحد

لا يزال تطبيقك يستخدم الرموز المميّزة نفسها للوصول إلى هذه الألوان. للحصول على التفاصيل حول الرموز المميزة، راجع إنشاء مظهر باستخدام الرموز المميزة في هذه الصفحة.

بدء استخدام Compose

إذا كنت تنشئ واجهة المستخدم باستخدام Compose، اطّلِع على تخصيص مظهر المواد في Compose للاطّلاع على تفاصيل حول تطبيق "اللون الديناميكي" على التطبيق.

بدء استخدام بانوراميات

يمكنك تطبيق "اللون الديناميكي" على مستوى التطبيق أو النشاط. لإجراء ذلك، اتصل applyToActivitiesIfAvailable() لتسجيل 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);
  }
}

بعد ذلك، أضف المظهر إلى تطبيقك.

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

إنشاء مظهر باستخدام الرموز المميّزة

يستفيد اللون الديناميكي من الرموز المميزة للتصميم لجعل تعيين الألوان عناصر واجهة المستخدم المختلفة أكثر سلاسة واتساقًا. يسمح لك الرمز المميز للتصميم لتعيين أدوار اللون دلاليًا، بدلاً من قيمة محددة، على العناصر المختلفة في واجهة المستخدم. يتيح ذلك لنظام الدرجات اللوني في تطبيقك المزيد من والمرونة وقابلية التوسع والاتساق، وهي قوية بشكل خاص عندما للتصميم لمظاهر فاتحة وداكنة وألوان ديناميكية.

تعرض المقتطفات التالية أمثلة للمظاهر الفاتحة والداكنة، ملف XML المقابل للون، بعد تطبيق رموز الألوان الديناميكية.

المظهر الفاتح

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>

مظهر داكن

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>

تنسيق 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>

للمزيد من المعلومات، يُرجى اتّباع الخطوات التالية:

• لمعرفة المزيد عن اللون الديناميكي والألوان المخصصة وإنشاء الرموز المميزة، تحقق من صفحة اللون الديناميكي Material 3.

• لإنشاء لوحة الألوان الأساسية وألوان التطبيق ومظهره، ضَع علامة في المربّع Material Theme Builder، والمتاحة من خلال مكوّن Figma الإضافي أو في المتصفح).

• لمعرفة المزيد حول كيفية الاستفادة من أنظمة الألوان في توفير إمكانية وصول أفضل في تطبيقك، راجع صفحة Material 3 حول تسهيل استخدام نظام الألوان:

الاحتفاظ بألوان مخصّصة أو ألوان العلامة التجارية

إذا كان تطبيقك يحتوي على ألوان مخصّصة أو ألوان للعلامة التجارية لا تريد تغييرها باستخدام وتفضيلات المستخدم، فيمكنك إضافتها بشكل فردي أثناء إنشاء لونك . مثلاً:

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>

بدلاً من ذلك، يمكنك استخدام Material Theme Builder لاستيراد بيانات الألوان التي تعمل على توسيع نظام الألوان الخاص بك، وبالتالي إنشاء نظام ألوان موحد. مع هذا الخيار، استخدِم HarmonizedColors لتغيير الأسلوب المخصّص. الألوان. يحقق هذا توازنًا مرئيًا وتباينًا يمكن الوصول إليه عند الجمع بين باستخدام ألوان من إنشاء المستخدم. ويتم إجراؤها في وقت التشغيل مع applyToContextIfAvailable()

الشكل 6. مثال على تنسيق الألوان المخصّصة

راجع إرشادات المادة 3 بشأن تنسيق الألوان المخصصة.

تطبيق اللون الديناميكي على الرموز والتطبيقات المصغّرة القابلة للتكيف

بالإضافة إلى تفعيل مظاهر الألوان الديناميكية في تطبيقك، يمكنك أيضًا تحديد مظاهر الألوان الديناميكية لـ الأدوات بدءًا من Android 12، وبالنسبة إلى الرموز التكيفية بدءًا من الإصدار 13 من نظام التشغيل Android