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

כותרת של סמלים דינמיים

סמל הניתן להתאמה, או 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 מופיע בתוך אזור התצוגה עם המסכה.

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

כדי ללמוד איך ליצור סמלים דינמיים באמצעות 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>
...

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

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

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

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

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