كيفية تحديث ايقونة المشغِّل (Launcher Icon)لتطبيق الاندرويد الخاص بك

إعطاء مظهر واجهة مستخدم احترافية للمنتج وإضفاء قيمة عليه. عندما يحب المستخدم ما يراه في واجهة مستخدم التطبيق ، فإن فرصة تثبيته ستزيد كثيرا هناك مجموعة من القواعد المحددة للتصميم واللون والأيقونة وعناصر واجهة المستخدم (UI elements) الأخرى التي يجب أن يتبعها تطبيق الاندرويد . في هذه المقالة ، سنلتزم بالاتقونات ، أيقونة المشغِّل (launcher icon)، لتطبيق الاندرويد الخاص بك .

يتم فصل رموز تطبيق الاندرويد إلى عدة فئات. وتشمل هذه:

• ايقونة المشغِّل (Launcher Icon) : تمثل هذه الايقونة تطبيقك على الشاشة الرئيسية لجهاز المستخدم أو قائمة التطبيقات. يمكن أن يكون هذا إما Adaptive Launcher Icon، لـ Android 8.0 (مستوى واجهة برمجة التطبيقات API 26) أو أعلى ، أو Legacy Launcher icon ، لنظام التشغيل Android 7.1 (مستوى واجهة برمجة التطبيقات API 25) أو أقل.
• Action Bar Icons : للعناصر الموجودة في شريط الإجراءات (action bar).
• Tab Icons: لعناصر الtab التي تحتوي على ايقونات ، إن وجدت

يمكنك معرفة المزيد حول فئات الأيقونات هذه من خلال النظر إلى التطبيقات الأخرى. إليك مثال ايقونات Whatsapp:

الآن ، قد يبدو إنشاء هذه الأيقونات سهلاً إذا كنت مصممًا ، أو إذا كنت مطورًا يمتلك مصممًا في فريقك. لكن الأمر ليس سهلاً كما يبدو. سيكون عليك إنشاء أيقونات لكل بُعد مختلف ( dimension) ، استنادًا إلى دقة وكثافة شاشة (resolutions and density) جهاز الاندرويد . لإعطائك فكرة عن حجم هذا العمل ، إليك قائمة الأحجام التي تحتاج إلى إنشاء ايقونة المشغِّل إذا كنت ستفعلها بالطريقة التقليدية:

وهذا هو مجرد رمز المشغِّل (launcher icon). هناك قائمة مماثلة لكل فئة من الأيقونات. ولكن الحمد لله ، يوفر لنا Android Studio أداة تسمى Image Asset Studio التي تتعامل مع إنشاء الأيقونات لجميع كثافة الشاشة (screen densities) بسهولة بالغة.

ما هو Image Asset Studio؟

قدم Android Studio 3 ال Image Asset Studio لإنشاء ـأيقونات لتطبيقك. ويهتم بإنتاج أيقونات التطبيق ذات الدقة المناسبة لكثافة الشاشات المختلفة ووضعها في مجلداتmipmap-density في resource directory. كما أنه يولد أيقونات للويب (512 × 512 بكسل) وهو مطلوب لتحميل التطبيق إلى متجر Google Play. يتم بعد ذلك جلب هذه الأيقونات من المجلدات بناءً على كثافة الشاشة ( screen density) للأجهزة أثناء وقت التشغيل.

بالنسبة إلى adaptive launcher icons ، يوفر Image Asset Studio معاينة كاملة لمجموعة الأيقونات التي تتضمن دائرة ومربعة ومربّع دائري و squircle full bleed layer و legacy icon و round و إصدارات متجر Google Play من الأيقونات أيضًا.

بالنسبة لرموز المشغل القديمة legacy launcher icons، من جهة أخرى ، لا تدعم الأجهزة الأيقونات ذات الأشكال المختلفة. لذلك سيتم إنشاء مجموعة أكثر تقييدًا من الأيقونات .

باستخدام Image Asset Studio

لنلقِ نظرة على كيفية إنشاء مجموعة أيقونات باستخدام Image Asset Studio.

تحديث الرمز باستخدام Image Asset Studio:

لبدء Image Asset Studio ، حدد Android في نافذة المشروع. انقر بزر الماوس الأيمن على المجلد res وحدد New ثم Image Asset. لقد قمت الآن بفتح Image Asset Studio. يمكنك الآن إنشاء Adaptive Launcher Icon أو Legacy Only Launcher Icon حسب متطلباتك.

إنشاء Adaptive Launcher Icon

ستستخدم نوع الأيقونة هذا لدعم Android 8.0.

أولاً ، حدد ال Launcher Icons ل (Adaptive & Legacy) لنوع الأيقونة . قم بتغيير اسم الأيقونة إذا كنت ترغب في ذلك. إذا كان الاسم موجودًا بالفعل ، فسيكون هناك تحذير في الجزء السفلي من مربع الحوار ، لإخباره بأنه سيتم الكتابة فوقه.

في Foreground Layer Tab ، حدد نوع ال Asset :

• Image: عيّن مسار صورة الأيقونة المخصص.
• Clip Art: حدد أيقونة من مجموعة material design icons المواد واضبط اللون.
• Text: تعيين string محدد، تعيين الخط واللون.

وبالمثل، في علامة التبويب Background Layer يمكنك تحديد نوع الasset للصورة أو قصاصة فنية (Clip Art) أو النص (Text) .

لكل من طبقات المقدمة والخلفية (foreground and background layers),، لديك أيضًا الإعدادات الاختيارية التالية:

• اسم الطبقة Layer Name: يمكنك إعطاء الطبقة (layer )اسمًا فريدًا.
• Scaling Parameters : يمكن ضبطها لمتطلباتك. يتم تعطيل هذا الخيار إذا قمت بتحديد لون لطبقة الخلفية ( background layer).
• Trim: اختر ما إذا كنت تريد إزالة المسافات الشفافة (transparent) حول الأيقونة الخاص بك.
• تغيير حجم: تغيير حجم الأيقونة .

تتيح لك Legacy Tab إمكانية تحديد ما إذا كنت تريد إنشاء legacy icon أم لا. يمكنك هنا اختيار ما إذا كنت تريد إنشاء legacy icon وGoogle Play Store icon, وround icon ، بالإضافة إلى الشكل المطلوب استخدامه لكل منهما.

إنشاء Legacy Launcher Icon

هذا هو نوع الأيقونة الذي ستنشئه إذا كنت تريد دعم إصدارات الاندرويد أقل من أو يساوي 7.1.

حدد أولاً Launcher Icons ل(Legacy Only) لنوع الأيقونة . يمكنك تغيير اسم الأيقونة في هذا الوقت إذا كنت ترغب في ذلك. إذا كان الاسم موجودًا بالفعل ، فسيكون هناك تحذير في الجزء السفلي من أنه سيتم استبدال الكتابة الحالية. حدد Asset Type وتكوين إعدادات المشاركة (configure the associate settings).

• Image: عيّن مسار صورة الأيقونة المخصص.
• Clip Art: حدد أيقونة من مجموعة الmaterial design iconsواضبط اللون.
• Text: تعيين string محدد ، قم بتعيين الخط واللون.

يمكنك أيضًا تهيئة بعض الإعدادات الاختيارية لمظهر الأيقونة :

• Trim: اختر ما إذا كنت تريد إزالة المسافات الشفافة حول الرمز الخاص بك.
• الحشو(Padding): تعيين الpadding للأيقونة .
• Foreground: تعيين اللون الأمامي.
• الخلفية (Background): تعيين لون الخلفية.
• القياس (Scaling): اختيار crop أو fit (احتواء مناسب).
• الشكل (Shape): لإضافة خلفية إلى الأيقونة ، حدد الشكل. بالنسبة لخلفية شفافة، حدد بلا.
• Effect: اختر ما إذا كنت ستحظى ب dog effect لأيقونة مربعة الشكل أو مستطيلة الشكل.

ستنعكس أي تغييرات تجريها في قسم المعاينة (preview section) . بعد أن تصبح سعيدًا بمظهر وأسلوب الأيقونة ، انقر على Next (التالي).

ستنتقل بعد ذلك إلى شاشة الإعدادات حيث يمكنك تغيير ال Resource Directory حيث سيتم إرسال الأيقونات الخاصة بك. تحديثه إذا كنت تريد. فيما يلي الخيارات المتاحة:

• main/res: لكل ال build variants، بما في ذلك release وال debug.
• release/res :عمل override لmain source تعيين إصدار واحد ( single release) للبناء.
• debug/res: للتصحيح فقط (debugging) .
• custom source set (تعيين مصدر مخصص) : يمكنك تعريف مجموعة المصدر(source) الخاصة بك.

وأخيراً، يختتم أنه عن طريق الضغط على Finish "إنهاء".

الآن نحن مستعدون مع launcher icon الجديد الخاص بنا في كافة المجلدات الخاصة. اسم رمز المشغل الخاص بي هو ic_launcher_demo. يمكنك رؤية جميع الأيقونات التي تم إنشاؤها لهذا الايقونة في لقطة الشاشة أدناه.

تحديث ملف ال AndroidManifest

الآن حان الوقت لتحديث الملف ال AndroidManifest بحيث بحيث يعرف تطبيقنا استخدام أيقونة جديدة. للبدء، افتح ملف AndroidManifest.xml الخاص بك. في ما يلي تعيين مجموعة أيقونات المشغِّل الافتراضية على الخط 7 و 9. يلزمك تحديثها باستخدام الايقونة الجديدة التي أنشأتها.

تغيير android:icon و android:roundIcon إلى الاسم الذي اخترته لأيقونة المشغل الخاص بك.

1

android:icon="@mipmap/ic_launcher_demo"

2

android:roundIcon="@mipmap/ic_launcher_demo_round"

تهانينا! لقد قمت بنجاح تحديث الlauncher icon للتطبيق الخاص بك.

الخاتمة

في هذه المشاركة ، تعرفت على أنواع الأيقونات المختلفة المستخدمة في تطبيق الاندرويد ، بالإضافة إلى جميع درجات دقة الشاشة المختلفة التي يجب إنشاؤها لكل أيقونة . بعد ذلك ، تعرفت على أداة Image Asset Studio وكيفية جعل إنشاء الايقونات لتطبيق الاندرويد أسهل بكثير.