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

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

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

  • צורות שונות: סמל הניתן להתאמה יכול להציג מגוון צורות בדגמים שונים של מכשירים. לדוגמה, יכול להיות שהיא תוצג בצורת עיגול במכשיר אחד של יצרן ציוד מקורי, ובצורת עיגול מרובע (צורה בין ריבוע לעיגול) במכשיר אחר. כל יצרן 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 מופיע בתוך אזור התצוגה המוסתר.

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

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

בדוגמה הבאה אפשר לראות איך מגדירים את הרכיבים <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>
...

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

אפשר גם להגדיר רכיבי drawable כרכיבים על ידי הוספה שלהם בשורת קוד לרכיבים <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() כשיוצרים אותם.

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

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

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

הקודם
בדיקת התכונה 'חיזוי החזרה'