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

تجربة طريقة "الكتابة"

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

الألوان الديناميكية - الإصدار 3 من التصميم المتعدد الأبعاد →

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

بدء استخدام "طرق العرض"

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

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 حول إمكانية الوصول إلى نظام الألوان.

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

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

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

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

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

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