رموز التطبيقات التكيُّفية

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

يمكن للرمز التكيُّفي أن يتكيّف مع حالات الاستخدام المختلفة:

  • أشكال مختلفة: يمكن أن يعرض الرمز التكيُّفي مجموعة متنوعة من الأشكال على طُرز الأجهزة المختلفة. على سبيل المثال، يمكنها عرض شكل دائري على أحد أجهزة المصنّع الأصلي للجهاز، وعرض رمز دائري (شكل بين مربع ودائرة) على جهاز آخر. يجب أن يوفر كل مصنّع أصلي للجهاز قناع يستخدمه النظام لعرض جميع الأيقونات التكيُّفية بنفس الشكل.

    ملف GIF يعرض صورة متحركة متكرّرة لنموذج رمز Android نفسه،
ويعرض أشكالاً مختلفة حسب القناع المستخدَم - دائرة ثم نوعان مختلفان من المربَّعات
    الشكل 1. تدعم الأيقونات التكيُّفية مجموعة متنوعة من الأقنعة، والتي تختلف من جهاز إلى آخر.
  • المؤثرات البصرية: يتيح الرمز التكيُّفي استخدام مجموعة متنوعة من المؤثرات البصرية الجذابة، التي يتم عرضها عندما يضع المستخدمون الرمز أو يحرّكونه في جميع أنحاء الشاشة الرئيسية.

    ملف GIF يعرض أمثلة على رمزَي Android على شكل دائرة متحرّكة، وهما متحرّكتان لتوضيح استجابة المستخدم. يظهر الرمز الأول شعار Android وهو يتأرجح
لليسار ثم اليمين، ثم لأعلى ولأسفل داخل الدائرة. تتوسع الأيقونة
الثانية ثم تتقلص مرة أخرى.
    الشكل 2. أمثلة على التأثيرات المرئية التي تعرضها أيقونة تكيّفية.
  • مظاهر المستخدمين: بدءًا من Android 13 (المستوى 33 لواجهة برمجة التطبيقات)، يمكن للمستخدمين تصميم رموزهم التكيُّفية. إذا فعّل المستخدم رموز التطبيقات المستوحاة من موضوع معيّن، عن طريق تفعيل خيار الرموز المستوحاة من موضوع معيّن في إعدادات النظام وكان مشغّل التطبيقات يتيح استخدام هذه الميزة، سيستخدم النظام تلوين الخلفية والمظهر اللذين اختارهما المستخدم لتحديد لون التلوين الخفيف.

    صورة تعرض أمثلة لثلاثة أجهزة Android، يعرض كل جهاز منها
مظهرًا مختلفًا للمستخدم بدرجات ألوان مختلفة: يعرض الأول خلفية بدرجات ألوان داكنة، والآخر يعرض خلفية ذهبية اللون. ويعرض الثالث خلفية باللون الرمادي الفاتح مع خلفية بلون أزرق مائل إلى الأزرق. في كل مثال، ورثت الأيقونات
ألوان الخلفية ومزجها بشكل مثالي.
    الشكل 3. الأيقونات التكيُّفية التي تكتسبها من خلفية المستخدم ومظاهره.

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

  • إذا لم يفعّل المستخدم رموز التطبيقات المستوحاة من موضوع معيّن
  • إذا كان تطبيقك لا يوفّر رمز تطبيق أحادي اللون.
  • إذا كان مشغّل التطبيقات لا يتوافق مع رموز التطبيقات المستوحاة من موضوع معيّن

تصميم الرموز التكيُّفية

للتأكد من أن الأيقونة التكيفية تدعم الأشكال والتأثيرات المرئية وموضوعات المستخدم المختلفة، يجب أن يفي التصميم بالمتطلبات التالية:

  • يجب توفير طبقتين لإصدار اللون من الرمز: واحدة للمقدمة وواحدة للخلفية.

    صورة تعرض مثالاً لطبقة مقدمة (الصورة اليسرى)
وطبقة خلفية (الصورة اليمنى). تعرض المقدّمة رمزًا مكونًا من 16 جانبًا
لنموذج لشعار Android في وسط منطقة آمنة بحجم 66×66. تتمركز المنطقة الآمنة
داخل حاوية بحجم 108×108. تعرض الخلفية الأبعاد نفسها التي تم قياسها للمنطقة الآمنة والحاوية، ولكنّها تعرض خلفية زرقاء فقط وبدون شعار.
    الشكل 4. الأيقونات التكيُّفية التي يتم تحديدها باستخدام طبقات المقدمة والخلفية. المنطقة الآمنة المعروضة بحجم 66x66 وهي المساحة التي لا يتم اقتصاصها أبدًا باستخدام قناع على شكل قناع يحدده المصنّع الأصلي للجهاز.
    صورة تعرض الرمز من الصورة السابقة متراكبة على قناع دائري.
    الشكل 5. مثال على كيفية ظهور الطبقات المقدمة والخلفية معًا مع تطبيق قناع دائري.
  • إذا كنت تريد إتاحة مظاهر المستخدم لرموز التطبيقات، قدِّم طبقة واحدة للإصدار الأحادي اللون من الرمز.

    صورة تعرض مثالاً لطبقة رمز أحادية اللون (الصورة اليسرى)
ومعاينات الألوان (الصورة اليمنى). تعرض الطبقة الأحادية اللون رمزًا مكونًا من 16 جانبًا لعينة من شعار Android في وسط منطقة آمنة بحجم 66×66. وتتمركز المنطقة الآمنة داخل حاوية 108×108. تُظهر معاينات الألوان هذه الطبقة عند تطبيقها على مظاهر المستخدم ذات الألوان المختلفة (البرتقالي والزهري والأصفر والأخضر).
    الشكل 6. طبقة رمز أحادية اللون (اليسار) مع أمثلة على معاينات الألوان (اليمين).
  • اضبط حجم جميع الطبقات على 108x108 بكسل مستقل الكثافة.

  • استخدم الرموز ذات الحواف النظيفة. يجب ألا تحتوي الطبقات على أقنعة أو ظلال خلفية حول المخطط التفصيلي للأيقونة.

  • استخدِم شعارًا لا يقل حجمه عن 48x48 وحدة بكسل مستقلة الكثافة. ويجب ألا يتجاوز حجم 66x66 وحدة بكسل مستقلة الكثافة، لأن المساحة الداخلية للرمز بحجم 66x66 بكسل تظهر ضمن إطار العرض المقنّع.

يتم تخصيص 18 بكسل مستقل الكثافة الخارجي على كل جانب من الجوانب الأربعة للطبقة للإخفاء ولإنشاء تأثيرات مرئية مثل اختلاف المنظر أو الوميض.

للتعرّف على طريقة إنشاء رموز تكيّفية باستخدام "استوديو Android"، يمكنك الاطّلاع على نموذج Figma لرمز تطبيق Android أو مستندات "استوديو Android" لإنشاء رموز مشغّل التطبيقات. يمكنك أيضًا الاطّلاع على مشاركة المدوّنة Designing Adaptive Icons .

إضافة رمز التكيُّف إلى تطبيقك

لإضافة رمز تكيُّفي إلى تطبيقك، عليك تعديل سمة android:icon في بيان التطبيق لتحديد مورد قابل للرسم. يمكنك أيضًا تحديد مورد قابل للرسم على الرموز باستخدام السمة android:roundIcon، ولكن فقط إذا كنت تطلب مادة عرض رمز مختلفة للأقنعة الدائرية، على سبيل المثال، إذا كانت علامتك التجارية تعتمد على شكل دائري.

يوضِّح مقتطف الرمز التالي كلتا السمتَين، ولكن معظم التطبيقات تحدّد السمة android:icon فقط:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

الخطوة التالية هي في res/mipmap-anydpi-v26/ic_launcher.xml إنشاء موارد بديلة قابلة للرسم في تطبيقك للتوافق مع الأنظمة القديمة مع Android 8.0 (المستوى 26 من واجهة برمجة التطبيقات). استخدِم العنصر <adaptive-icon> لتحديد العناصر القابلة للرسم في المقدّمة والخلفية والطبقات الأحادية اللون لرموزك. تتوافق العناصر الداخلية <foreground> و<background> و<monochrome> مع السمة android:drawable.

يوضح المثال التالي كيفية تعريف عناصر <foreground> و<background> و<monochrome> داخل <adaptive-icon>:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

يمكنك أيضًا تحديد العناصر القابلة للرسم كعناصر من خلال تضمينها في العناصر <foreground> و<background> و<monochrome>. يُظهر المقتطف التالي مثالاً للقيام بذلك باستخدام عنصر قابل للرسم في المقدمة.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

إذا كنت ترغب في تطبيق نفس القناع والتأثير المرئي على اختصاراتك كرموز تكيّفية عادية، فاستخدم أحد الأساليب التالية:

  • بالنسبة إلى الاختصارات الثابتة، استخدِم العنصر <adaptive-icon>.
  • بالنسبة إلى الاختصارات الديناميكية، عليك استدعاء الطريقة createWithAdaptiveBitmap() عند إنشائها.

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

مراجع إضافية

راجع الموارد التالية للحصول على معلومات إضافية حول تصميم الأيقونات التكيُّفية وتنفيذها.