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

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

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

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

  

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

  

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

  

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

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

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

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

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

  

  

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

  

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

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

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

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

• תבנית דף לקהילת Figma
• הסבר על הסמלים המותאמים של Android
• עיצוב סמלים מותאמים אישית
• הטמעה של סמלים מותאמים
• יצירת סמלים של אפליקציות ב-Android Studio
• מפרט עיצוב הסמל ב-Google Play