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

تجربة ميزة "الكتابة"
‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المُقترَحة لنظام التشغيل Android. تعرَّف على كيفية العمل مع الألوان الديناميكية في ميزة "الإنشاء".
ألوان ديناميكية - التصميم المتعدّد الأبعاد 3 →

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

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

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

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

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

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

  1. يرصد النظام الألوان الرئيسية في صورة الخلفية المحدّدة ويشدِّد على لون المصدر.

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

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

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

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

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

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

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

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

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

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

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

بدء استخدام "المشاهدات"

يمكنك تطبيق ميزة "الألوان الديناميكية" على مستوى التطبيق أو النشاط. لإجراء ذلك، يُرجى الاتصال برقم applyToActivitiesIfAvailable() لتسجيل ActivityLifeCycleCallbacks في تطبيقك.

KotlinJava
class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}
 
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 حول سهولة الوصول إلى نظام الألوان.

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

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

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 لاستيراد مزيد من الألوان التي تضيف إلى نظام الألوان، وبالتالي إنشاء نظام ألوان موحّد. باستخدام هذا الخيار، استخدِم HarmonizedColors لتغيير درجة كثافة الألوان المخصّصة. ويؤدي ذلك إلى تحقيق توازن مرئي وتباين سهل الاستخدام عند دمجه مع الألوان التي ينشئها المستخدم. ويحدث ذلك أثناء التشغيل باستخدام applyToContextIfAvailable().

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

اطّلِع على إرشادات Material 3 حول مواءمة الألوان المخصّصة.

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

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