סמלים מותאמים

סמל מותאם, או AdaptiveIconDrawable יכולים להיות מוצגים באופן שונה בהתאם ליכולות של כל מכשיר ולמשתמש לפי נושאים. סמלים מותאמים משמשים בעיקר את מרכז האפליקציות במסך הבית, אבל אפשר להשתמש בהם גם בקיצורי דרך, באפליקציית ההגדרות, בתיבות דו-שיח לשיתוף במסך הסקירה הכללית. הסמלים המותאמים משמשים בכל גורמי הצורה של Android.

בניגוד ל-bitmap" תמונות, סמלים מותאמים להתאים את התוכן לתרחישים שונים לדוגמה:

  • צורות שונות: סמל מותאם יכול להציג מגוון צורות בדגמי מכשירים שונים. לדוגמה, יכול להיות שיוצגו בו צורה של עיגול. במכשיר OEM (יצרן ציוד מקורי) אחד, ולהציג ריבוע (צורה בין ריבוע) מעגל) במכשיר אחר. כל OEM (יצרן ציוד מקורי) של מכשיר חייב לספק מסכה, שבה המערכת משתמשת כדי להציג את כל הסמלים המותאמים אישית בעלי אותה צורה.

    קובץ GIF שבו מוצגת אנימציה חוזרת של אותו סמל Android לדוגמה, שמוצגות בו צורות שונות בהתאם למסיכה שבה נעשה שימוש – עיגול ואז שני סוגים שונים של ריבועים
    איור 1. סמלים מותאמים אישית תומכים במגוון של מסכות שונות, בהתאם למכשיר.

  • אפקטים חזותיים: סמל דינמי שתומך במגוון של רכיבים חזותיים מושכים אפקטים, שמוצגים כשמשתמשים מציבים את הסמל או מזיזים אותו ברחבי הבית מסך.

    קובץ GIF שמציג דוגמאות של שני סמלים לדוגמה של Android בצורת עיגול, מונפש כדי להציג את תגובת המשתמש. בסמל הראשון מוצג הלוגו של Android מתנדנדת שמאלה ואז ימינה ואז למעלה ולמטה בתוך המעגל. השנייה הסמל מתרחב ואז הוא שוב מתכווץ.
    איור 2. דוגמאות לאפקטים חזותיים שמוצגים על ידי סמל שניתן להתאמה.

  • נושאי משתמשים: החל מ-Android 13 (רמת API 33), המשתמשים יכולים לעצב הסמלים הייחודיים שלהם. אם המשתמש מפעיל סמלים של אפליקציות מעוצבים, על ידי הפעלת סמלים מעוצבים עוברים למצב מופעל בהגדרות המערכת, ומרכז האפליקציות תומך באפשרות הזו התכונה, המערכת משתמשת בצבעי הטפט שנבחר על ידי המשתמש כדי לקבוע את צבע הגוון.

    תמונה שמציגה דוגמאות לשלושה מכשירי Android, שבכל אחד מהם מוצג סמל עיצוב משתמש שונה עם גוונים שונים: במקור הראשון מוצג טפט עם גוון כהה, השנייה מציגה טפט בגוון זהוב. השלישי מראה טפט עם אפור בהיר עם טפט בגוונים כחולים. בכל דוגמה, סמלים עברו בירושה את גוון הטפט והשתלבו באופן מושלם.
    איור 3. סמלים מותאמים שעברו בירושה מ את הטפט והעיצובים של המשתמש.

    בתרחישים הבאים, מסך הבית לא מציג את העיצוב סמל האפליקציה, ובמקומם מוצג הסמל של האפליקציה המותאמת או את הסמל הרגיל של האפליקציה:

    • אם המשתמש לא מפעיל סמלי אפליקציות מעוצבים.
    • אם באפליקציה אין סמל מונוכרומטי.
    • אם מרכז האפליקציות לא תומך בסמלי אפליקציות מעוצבים.

עיצוב סמלים מותאמים

כדי לוודא שהסמל המותאם אישית תומך בצורות שונות, באפקטים חזותיים שונים על העיצוב של המשתמשים, הוא צריך לעמוד בדרישות הבאות:

  • צריך לספק שתי שכבות לגרסה הצבעונית של הסמל: אחת עבור ואחד לרקע. השכבות יכולות להיות וקטורים או מפות סיביות, אבל וקטורים עדיפים.

    תמונה שמציגה דוגמה לשכבה בחזית (תמונה משמאל) שכבת רקע (תמונה מימין). בחזית התמונה סמל עם 16 פאות של דוגמה של לוגו Android במרכז אזור בטוח בגודל 66x66. האזור הבטוח הוא במרכז קונטיינר בגודל 108x108. אותו רקע מוצג ברקע המימדים שנמדדו של האזור הבטוח ושל הקונטיינר, אבל רק כחול ברקע ואין לוגו.
    איור 4. סמלים מותאמים שהוגדרו באמצעות החזית ושכבות רקע. האזור הבטוח בגודל 66x66 הוא האזור שלעולם לא נחתכה על ידי מסכה בעלת צורה שהוגדרה על ידי ה-OEM.
    תמונה שבה מוצג הסמל מהתמונה הקודמת, מעל מעל במסכה מעגלית.
    איור 5. דוגמה לאופן שבו הם פועלים בחזית ושכבות הרקע נראות יחד עם מסכה מעגלית.

  • אם ברצונך לתמוך בעיצוב סמלי אפליקציות עבור משתמשים, עליך לספק שכבה אחת עבור בגרסה המונוכרומטית של הסמל.

    תמונה שמציגה דוגמה לשכבת סמל מונוכרומטית (תמונה משמאל) ותצוגות מקדימות של צבעים (התמונה השמאלית). השכבה המונוכרמטית מציגה את צלעות 16 סמל של לוגו לדוגמה של Android שנמצא במרכז אזור בטוח בגודל 66x66. הבטיחות האזור ממורכז בתוך קונטיינר בגודל 108x108. התצוגה המקדימה של הצבעים תוצג את השכבה הזאת כאשר מחילים אותה על עיצובי משתמש בצבעים שונים (כתום, ורוד, צהוב וירוק).
    איור 6. שכבת סמל חד-כרומטית (משמאל) עם דוגמאות לתצוגה מקדימה של צבעים (בצד שמאל).

  • גודל כל השכבות ל-108x108dp.

  • להשתמש בסמלים עם קצוות נקיים. השכבות לא יכולות לכלול מסכות או רקע צללים סביב קווי המתאר של הסמל.

  • הלוגו צריך להיות בגודל 48x48dp לפחות. אסור לחרוג מגודל של 66x66 dp, מכיוון שהגודל 66x66 dp הפנימי של הסמל מופיע בתוך המסכה אזור התצוגה.

הגודל החיצוני של 18dp בכל אחד מארבעת צידי השכבות שמור. התממה ויצירת אפקטים חזותיים כמו פרלקס או הבהוב.

באפליקציה ל-Android אפשר לקרוא איך ליצור סמלים מותאמים אישית באמצעות Android Studio סמל Figma תבנית או מסמכי תיעוד של Android Studio ליצירת מרכז האפליקציות סמלים. כמו כן, כדאי לקרוא את הפוסט בבלוג עיצוב דינמי, סמלים הקצר הזה. התשובות שלך יעזרו לנו להשתפר.

הוספת הסמל המותאם לאפליקציה

סמלים מותאמים אישית, בדומה לסמלים לא מותאמים, מוגדרים באמצעות הסמל מאפיין android:icon באפליקציה מניפסט.

מאפיין אופציונלי, android:roundIcon, משמש מרכזים שמייצגים אפליקציות עם סמלים עגולים, ועשויות להיות שימושיות אם סמל האפליקציה כולל רקע מעגלי כחלק מרכזי בעיצוב שלו. מפעילים כאלה נדרשים ליצור סמלי אפליקציות באמצעות החלת מסכה עגולה על android:roundIcon, עשויה לאפשר לכם לשפר את המראה של סמל האפליקציה על ידי לדוגמה, הגדלה קלה של הלוגו כדי לוודא שכאשר חותכים אותו, רקע מעגלי עם כיסוי מלא.

קטע הקוד הבא מדגים את שני המאפיינים האלה, אבל רוב האפליקציות לציין רק android:icon:

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

בשלב הבא, שומרים את הסמל המותאם אישית ב-res/mipmap-anydpi-v26/ic_launcher.xml. כדאי להשתמש את הרכיב <adaptive-icon> כדי להגדיר את החזית, הרקע ו במשאבי שכבות מונוכרומטיים לסמלים שלכם. <foreground>, הרכיבים הפנימיים <background> ו-<monochrome> תומכים בשני הרכיבים תמונות וקטוריות ומפת סיביות (bitmap).

הדוגמה הבאה מראה איך להגדיר את <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() בזמן יצירתן.

מידע נוסף על הטמעת סמלים מותאמים זמין במאמר הטמעה מודעת באנר מותאמת סמלים. למידע נוסף על קיצורי דרך, ראו קיצורי דרך של אפליקציות סקירה כללית.

מקורות מידע נוספים

אפשר להיעזר במשאבים הבאים כדי לקבל מידע נוסף על עיצוב להטמעת סמלים מותאמים.