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

تتيح ميزة "اللون الديناميكي" ( Dynamic Color) التي أُضيفت في Android 12 للمستخدمين تخصيص أجهزتهم لتتوافق مع نظام ألوان خلفيتهم الشخصية أو من خلال لون محدّد في "أداة اختيار الخلفيات".

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

بدء استخدام 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 والرموز التكيفية بدءًا من Android 13.