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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

الشكل 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>

لمزيد من المعلومات:

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

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

• للاطّلاع على المزيد من المعلومات حول كيفية تسهيل استخدام أنظمة الألوان لتسهيل استخدام تطبيقك، راجِع صفحة المادة 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 حول مواءمة الألوان المخصّصة.

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

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