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

כותרת של סמלים הניתנים להתאמה

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

בניגוד לתמונות מפת סיביות (bitmap), סמלים שניתנים להתאמה יכולים להתאים לתרחישים שונים:

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

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

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

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

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

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

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

    • אם המשתמש לא מפעיל סמלי אפליקציות מעוצבים.
    • אם לאפליקציה אין סמל מונוכרומטי ובמכשיר של המשתמש פועלת גרסה של Android שקודמת ל-Android 16 QPR 2.
    • אם מרכז האפליקציות לא תומך בסמלי אפליקציות מעוצבים.

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

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

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

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

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

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

  • משנים את הגודל של כל השכבות ל-‎108x108 dp.

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

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

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

כדי ללמוד איך ליצור סמלים הניתנים להתאמה באמצעות Android Studio, אפשר לעיין בתבנית Figma לסמל האפליקציה ל-Android או במסמכי התיעוד של 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> תומכים גם בתמונות וקטוריות וגם בתמונות של מפת סיביות.

בדוגמה הבאה מוסבר איך להגדיר את הרכיבים <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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

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

אפשר גם להגדיר רכיבים שניתנים לשרטוט כרכיבים על ידי הטמעה שלהם ברכיבים <foreground>,‏ <background> ו-<monochrome>. בקטע הקוד הבא מוצגת דוגמה לאיך אפשר לעשות את זה באמצעות ה-drawable של החזית.

<?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>.
  • לקיצורי דרך דינמיים, צריך להפעיל את ה-method‏ createWithAdaptiveBitmap() כשיוצרים אותם.

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

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

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

הקודם
יישום שיטות מומלצות לקיצורי דרך
הבא
יצירת מוזיקה מרחוק