יצירת סמלים של אפליקציות

סמלים עוזרים למשתמשים לזהות את האפליקציה ואת הפעולות שבתוכה. אתם יכולים לגשת לחבילת סמלי Material ולהוסיף אותם לאפליקציה ישירות באמצעות Compose. כדי ליצור סמלים או סמלים מותאמים אישית עבור את האפליקציה שלכם באמצעות תצוגות מפורטות, מערכת Android Studio מציעה את Image Asset Studio.

הוספת סמלים לאפליקציה באמצעות 'כתיבה'

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

אם אתם צריכים ליצור סמלים מותאמים אישית, למשל סמל של מרכז האפליקציות, תוכלו להשתמש ב-Image Asset Studio. לסמלי מרכז האפליקציות, AndroidManifest.xml הקובץ חייב להתייחס למיקום mipmap/. הקוד הזה נוסף ל-Image Asset Studio באופן אוטומטי. הקוד הבא בקובץ המניפסט מפנה לסמל ic_launcher בתיקייה mipmap/:

  <application android:name="ApplicationTitle"
            android:label="@string/app_label"
            android:icon="@mipmap/ic_launcher" >
  

מידע על Image Asset Studio

Android Studio כולל כלי שנקרא Image Asset Studio, שעוזר לכם ליצור סמלי אפליקציה משלכם מסמלי Material Design, מתמונות בהתאמה אישית וממחרוזות טקסט. היא יוצרת קבוצת סמלים ברזולוציה המתאימה לכל פיקסל דחיסות הנתונים שהאפליקציה שלכם תומכת בה. מערכת Image Asset Studio ממפה את הסמלים החדשים שנוצרו לתיקיות ספציפיות לצפיפות, בספרייה res/ בפרויקט. בזמן הריצה, מערכת Android משתמשת על סמך דחיסות המסך של המכשיר שהאפליקציה פועלת בו.

בעזרת Image Asset Studio תוכלו ליצור את סוגי הסמלים הבאים:

• סמלי מרכז האפליקציות
• סמלי הכרטיסיות וסרגל הפעולות
• סמלי התראה

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

סמלי מרכז האפליקציות אדפטיביים וסמלים מדור קודם

סמל מרכז האפליקציות הוא גרפיקה שמייצגת את האפליקציה שלך למשתמשים. הוא יכול:

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

סמלי מרכז האפליקציות עם התאמה אישית יכולים להופיע במגוון צורות בדגמי מכשירים שונים, והם זמינים ב-Android 8.0 (API ברמה 26) ואילך. Android Studio 3.0 כולל תמיכה עבור ליצור סמלים מותאמים באמצעות Image Asset Studio. בעזרת Image Asset Studio אפשר ליצור תצוגות מקדימות של סמל גמיש בצורות עגולות, ריבועיות, ריבועיות מעוגלות ומעוגלות, וגם תצוגה מקדימה של הסמל בפורמט bleed מלא. הכלי Image Asset Studio יוצר גם גרסה קודמת, חנות עגולה וחנות Google Play. תצוגות מקדימות של הסמל. סמל של מרכז האפליקציות מדור קודם הוא גרפיקה שמייצגת את האפליקציה שלך במסך הבית ובחלון של מרכז האפליקציות. סמלי מרכז האפליקציות מהדור הקודם מיועדים לשימוש במכשירים עם Android מגרסה 7.1 (רמת API 25) ומטה, שלא תומכים בסמלים מותאמים ולא מציגים צורות שונות במכשירים שונים.

מערכת Image Asset Studio ממפה את הסמלים למיקומים המתאימים בספריות res/mipmap-density/. הוא יוצר גם תמונה בגודל 512 על 512 פיקסלים שמתאימה לחנות Google Play.

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

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

סמלי הכרטיסיות וסרגל הפעולות

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

סמלי כרטיסיות הם אלמנטים גרפיים שמשמשים לייצוג כרטיסיות בודדות ממשק מרובה כרטיסיות. לכל סמל כרטיסייה יש שני מצבים: 'לא מסומנת' ו'נבחרה'. למידע נוסף, ראו יצירת תצוגות החלקה באמצעות כרטיסיות כרטיסיות – עיצוב חדשני (Material Design) אפשר לקבל מידע נוסף.

מערכת Image Asset Studio ממפה את הסמלים למיקומים המתאימים בתיקיות res/drawable-density/.

מומלץ להשתמש בסגנון של עיצוב חומר (Material Design) בסרגל הפעולות ובסמלי הכרטיסיות, גם אם אתם תומכים בגרסאות ישנות יותר של Android. שימוש ב-appcompat ובאמצעים אחרים ספריות תמיכה כדי להעביר את ממשק המשתמש של העיצוב החומרי שלכם לגרסאות פלטפורמה ישנות יותר.

לחלופין ל-Image Asset Studio, אפשר להשתמש ב-Vector Asset Studio כדי ליצור סמלי כרטיסיות וסרגל פעולות. פריטים וקטוריים להזזה מתאימים לסמלים פשוטים ויכולים להקטין את אפליקציה.

סמלי התראה

התראה היא הודעה שאפשר להציג למשתמש מחוץ לממשק המשתמש הרגיל של אפליקציה. התכונה 'סטודיו לנכסי תמונות' ממקמת סמלי התראות במיקומים הנכונים ספריות res/drawable-density/:

• סמלים ל-Android 2.2 (רמת API 8) ומטה ממוקמים בספריות res/drawable-density/.
• נמצאים סמלים ל-Android מגרסה 2.3 עד 2.3.7 (רמת API 9 עד 10) res/drawable-density-v9/ ספריות.
• סמלים ל-Android 3 (רמת API 11) ול גבוהה יותר נמצאות בספריות res/drawable-density-v11/.

אם האפליקציה תומכת ב-Android מגרסה 2.3 עד 2.3.7 (רמת API 9 עד 10), מערכת Image Asset Studio תיצור גרסה אפורה של הסמל. בגרסאות Android מאוחרות יותר נעשה שימוש בסמל הלבן שנוצר ב-Image Asset Studio.

למידע נוסף, אפשר לעיין במאמרים הבאים: התראות, התראות ב-Material Design, התראות, שינויים ב-Android 5.0, התראות, Android 4.4 ומטה וסמלי שורת המצב, Android 3.0 ומטה.

אוסף תמונות

בעזרת Image Asset Studio קל לייבא סמלים של חומרים מ-Google ב-VectorDrawable פורמטים PNG: פשוט בוחרים סמל מתיבת דו-שיח. מידע נוסף זמין במאמר הבא: סמלי חומרים.

תמונות

ניתן לייבא תמונות משלך ולשנות אותן בהתאם לסוג הסמל. מערכת Image Asset Studio תומכת בסוגי הקבצים הבאים: PNG (מומלץ), JPG (קביל) ו-GIF (לא מומלץ).

מחרוזות טקסט

בעזרת Image Asset Studio אפשר להקליד מחרוזת טקסט במגוון גופנים, ולהציב אותה על סמל. הוא ממיר את הסמל מבוסס-הטקסט לקובצי PNG לדחיסות שונה. אפשר להשתמש בגופנים מותקנות במחשב שלך.

הפעלת Studio Asset Studio

כדי להפעיל את Studio Asset Studio, פועלים לפי השלבים הבאים:

1. בחלון Project, בוחרים באפשרות Android view.
2. לוחצים לחיצה ימנית על התיקייה res ובוחרים באפשרות New (חדש) > Image Asset (נכס תמונה).

   

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

יצירת סמלי מרכז אפליקציות מותאמים ומותאמים מדור קודם

אחרי שפותחים את Product Asset Studio, אפשר להוסיף סמלים מותאמים וסמלים קודמים באמצעות באמצעות השלבים הבאים:

1. בשדה Icon Type, בוחרים באפשרות Launcher Icons (Adaptive and Legacy).
2. בכרטיסייה שכבת חזית, בוחרים סוג נכס ומציינים את הנכס בשדה שמתחת:
   • בוחרים באפשרות תמונה כדי לציין את הנתיב לקובץ תמונה.
   • בוחרים באפשרות קליפ ארט כדי לציין תמונה הוגדר סמל לעיצוב חומרים.
   • בוחרים באפשרות טקסט כדי לציין מחרוזת טקסט ולבחור גופן.
3. בכרטיסייה Background Layer (שכבת רקע), בוחרים באפשרות Asset Type (סוג נכס) ומציינים את הנכס בשדה שמתחת. אפשר לבחור צבע או לציין תמונה שתשמש כשכבת הרקע.
4. בכרטיסייה Options, בודקים את הגדרות ברירת המחדל ומאשרים שרוצים ליצור סמלים מהדור הקודם, סמלים עגולים וסמלים של חנות Google Play.
5. אפשר לשנות את השם ואת הגדרות התצוגה של כל אחד הכרטיסיות שכבת חזית ושכבת רקע:
   • שם - אם לא רוצים להשתמש בשם ברירת המחדל, מקלידים שם חדש שם. אם שם המשאב הזה כבר קיים בפרויקט, כפי שמצוין בשגיאה בחלק התחתון של האשף, הוא יימחק. השם יכול לכלול תווים קטנים, קווים תחתונים וספרות בלבד.
   • חיתוך – כדי לשנות את השוליים בין הגרפיקה של הסמל לבין המסגרת בנכס המקור, בוחרים באפשרות כן. הפעולה הזו מסירה שטח שקוף, תוך שמירה על יחס הגובה-רוחב. כדי לצאת נכס המקור לא השתנה, בוחרים באפשרות לא.
   • צבע – כדי לשנות את הצבע של סמל גרפיקה או של טקסט, לוחצים על השדה. בתיבת הדו-שיח Select Color, מציינים צבע ולוחצים על Choose. הערך החדש מופיע ב בשדה.
   • שינוי גודל – משתמשים בפס ההזזה כדי לציין גורם שינוי במדד אחוזים, כדי לשנות את הגודל של תמונה, קליפס ארט או סמל טקסט. הזה מושבת עבור שכבת הרקע כאשר מציינים סוג הנכס צבע.
6. לוחצים על הבא.
7. אפשר גם לשנות את ספריית המשאבים: בוחרים את קבוצת מקורות המשאבים. שבהם רוצים להוסיף את נכס התמונות: src/main/res, src/debug/res, src/release/res או קבוצת מקור בהתאמה אישית. קבוצת המקור הראשית חלה על כל וריאציות ה-build, כולל ניפוי באגים גרסה חדשה. קבוצות המקור לניפוי באגים והפצה מבטלות את קבוצת המקור הראשית וגם יחולו על גרסה אחת של build. קבוצת מקורות הניפוי מיועדת לניפוי באגים בלבד. כדי להגדיר קבוצת מקורות חדשה, בוחרים באפשרות File (קובץ) > Project Structure (מבנה הפרויקט) > app (אפליקציה) > Build Types (סוגים של גרסאות build). לדוגמה, אפשר להגדיר קבוצת מקור בגרסת בטא וליצור גרסה של סמל שכולל את הטקסט "בטא" בפינה הימנית התחתונה. למידע נוסף, ראו הגדרת גרסאות build.
8. לוחצים על סיום. Image Asset Studio מוסיף את התמונות mipmap עבור רזולוציות שונות.

תצוגה מקדימה של סמלי אפליקציות מעוצבים

ב-Android Studio אפשר לראות תצוגה מקדימה סמל האפליקציה ולבדוק איך הוא מתאים את עצמו לצבע הטפט של המשתמש. כדי לראות תצוגה מקדימה של האפליקציה המעוצבת , פותחים את הקובץ launcher.xml שמגדיר את הסמל שלכם ומשתמשים הבורר מצב ממשק המשתמש של המערכת בסרגל הכלים כדי להחליף טפטים ולראות איך הסמל מגיב.

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

יצירת סרגל פעולות או סמל כרטיסייה

אחרי שפותחים את Image Asset Studio, אפשר להוסיף סרגל פעולות או סמל כרטיסייה. באמצעות השלבים הבאים:

1. בשדה Icon Type (סוג הסמל), בוחרים באפשרות Action Bar and Tab Icons (סמלי שורת הפעולות וכרטיסיות).
2. בוחרים את סוג הנכס ומציינים את הנכס בשדה שמתחת:
• בשדה קליפ ארט, לוחצים על הלחצן.

בתיבת הדו-שיח Select Icon (בחירת סמל), בוחרים סמל חומר ולוחצים על OK (אישור).

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

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

3. אם רוצים, משנים את השם ואת אפשרויות התצוגה:
   • שם – אם אתם לא רוצים להשתמש בשם ברירת המחדל, מקלידים שם חדש. אם שם המשאב הזה כבר קיים בפרויקט, אפשר לזהות את השגיאה: בחלק התחתון של האשף, הוא מוחלף. השם יכול להכיל אותיות קטנות. תווים, קווים תחתונים וספרות בלבד.
   • חיתוך - כדי לכוונן את השוליים בין הגרפיקה והגבול של הסמל בנכס המקור, בוחרים באפשרות כן. הפעולה הזו מסירה את החלקים השקופים תוך שמירה על יחס הגובה-רוחב. כדי להשאיר את נכס המקור ללא שינוי, בוחרים באפשרות לא.
   • Padding – אם רוצים לשנות את ההגדרה של הרווח מסביב לנכס המקור בכל ארבעת הצדדים, מזיזים את פס ההזזה. בוחרים ערך בין -10% ל-50%. אם בוחרים גם באפשרות חיתוך, החיתוך מתבצע קודם.
   • עיצוב – בחירה HOLO_light או HOLO_DARK. לחלופין, כדי לציין צבע בתיבת הדו-שיח Select Color, בוחרים באפשרות CUSTOM ולוחצים על השדה Custom color.

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

4. לוחצים על הבא.
5. אפשר לשנות את ספריית המשאבים:
• Res Directory – בוחרים את קבוצת מקורות המשאבים שאליה רוצים להוסיף את נכס תמונות: src/main/res, src/debug/res, src/publish/res, או קבוצת מקור שהוגדרה על ידי המשתמש. קבוצת המקור הראשית חלה על כל הווריאנטים של ה-build, כולל ניפוי באגים והפצה. קבוצות המקור לניפוי באגים והפצה מבטלות את קבוצת המקור הראשית ומחילים אותן לגרסה אחת של build. מקור ניפוי הבאגים שהוגדר מיועד לניפוי באגים בלבד. כדי להגדיר קבוצת מקורות חדשה, בוחרים באפשרות File (קובץ) > Project Structure (מבנה הפרויקט) > app (אפליקציה) > Build Types (סוגים של גרסאות build). לדוגמה, אפשר להגדיר קבוצת מקורות של גרסאות בטא וליצור גרסה של סמל שכוללת את הטקסט 'בטא' בפינה השמאלית התחתונה. מידע נוסף זמין במאמר הבא: הגדרת וריאציות ב-Build

באזור Output Directories מוצגות התמונות והתיקיות שבהן הן יופיעו בתצוגת Project Files בחלון Project.

6. לוחצים על סיום.

כלי Image Asset Studio מוסיף את התמונות לתיקיות drawable עבור הצפיפויות השונות.

יצירת סמל התראה

אחרי שפותחים את Image Asset Studio, אפשר להוסיף סמל התראה באופן הבא:

1. בשדה Icon Type (סוג הסמל), בוחרים באפשרות Notification Icons (סמלי התראות).
2. בוחרים סוג נכס ומציינים את הנכס בשדה שמתחת:
• בשדה Clip Art, לוחצים על הלחצן.

בתיבת הדו-שיח Select Icon (בחירת סמל), בוחרים סמל חומר ולוחצים על OK (אישור).

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

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

3. אם רוצים, משנים את השם ואת אפשרויות התצוגה:
   • שם – אם אתם לא רוצים להשתמש בשם ברירת המחדל, מקלידים שם חדש. אם שם המשאב הזה כבר קיים בפרויקט, אפשר לזהות את השגיאה: בחלק התחתון של האשף, הוא מוחלף. השם יכול להכיל אותיות קטנות. תווים, קווים תחתונים וספרות בלבד.
   • חיתוך - כדי לכוונן את השוליים בין הגרפיקה והגבול של הסמל בנכס המקור, בוחרים באפשרות כן. הפעולה הזו מסירה את החלקים השקופים תוך שמירה על יחס הגובה-רוחב. כדי להשאיר את נכס המקור ללא שינוי, בוחרים באפשרות לא.
   • Padding – אם רוצים לשנות את ההגדרה של הרווח בנכס המקור בכל ארבעת הצדדים, מזיזים את פס ההזזה. צריך לבחור ערך בין -10% ו-50%. אם גם בוחרים באפשרות חיתוך. החיתוך מתבצע קודם.

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

4. לוחצים על הבא.
5. אפשר לשנות את ספריית המשאבים:
• Res Directory – בוחרים את קבוצת מקורות המשאבים שבה רוצים להוסיף את נכס התמונה: src/main/res,‏ src/debug/res,‏ src/release/res או קבוצת מקורות מוגדרת על ידי משתמש. קבוצת המקור הראשית חלה על כל הווריאנטים של ה-build, כולל ניפוי באגים והפצה. קבוצות המקור לניפוי באגים והפצה מבטלות את קבוצת המקור הראשית ומחילים אותן לגרסה אחת של build. מקור ניפוי הבאגים שהוגדר מיועד לניפוי באגים בלבד. כדי להגדיר מקור חדש הגדרה, בוחרים קובץ > מבנה הפרויקט > app > סוגי Build. לדוגמה, אפשר להגדיר קבוצת מקורות של גרסאות בטא וליצור גרסה של סמל שכוללת את הטקסט 'בטא' בפינה השמאלית התחתונה. למידע נוסף, ראו הגדרת וריאנטים של גרסאות build.

באזור Output Directories (ספריות פלט) מוצגות התמונות והתיקיות. שבו הם יופיעו תצוגה 'קובצי פרויקט' של החלון Project.

6. לוחצים על סיום.

ב-Image Asset Studio מוסיפים את התמונות בתיקיות שניתנות לשרטוט של את הדחיסות והגרסאות השונות.

עיון במשאב של תמונות בקוד באמצעות Viewer (Views)

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

• ברוב המקרים, אפשר להפנות למשאבי תמונות בתור @drawable בקוד XML או Drawable בקוד Java.

לדוגמה, קוד ה-XML הבא של הפריסה מציג את ה-drawable ב-ImageView:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

הקוד הבא ב-Java מאחזר את התמונה בתור Drawable:

Kotlin

val drawable = resources.getDrawable(R.drawable.myimage, theme)

Java

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

getResources() נמצא ב-Context מחלקה, שחלה על אובייקטים בממשק המשתמש, כמו פעילויות, מקטעים, פריסות, תצוגות וכו'.

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

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

אפשר לגשת למשאבי תמונות רק מה-thread הראשי.

אחרי שיהיה לכם משאב תמונות בספרייה res/ של הפרויקט, תוכלו להפנות אליו מקוד Java או מפריסת ה-XML באמצעות מזהה המשאב שלו. הקוד הבא ב-Java מגדיר ImageView לשימוש במשאב drawable/myimage.png:

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

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

מחיקת סמל מפרויקט

כדי להסיר סמל מפרויקט:

1. בחלון Project, בוחרים באפשרות Android view.
2. מרחיבים את התיקייה res/mipmap לסמל של מרכז האפליקציות, או התיקייה res/drawable לסמלים מסוגים אחרים.
3. מאתרים תיקיית משנה עם השם של הסמל שרוצים למחוק.

התיקייה הזו מכילה את הסמל בצפיפויות שונות.

4. בוחרים את התיקייה ו מקישים על מקש Delete.

לחלופין, בוחרים באפשרות עריכה > מחיקה. או לוחצים לחיצה ימנית על קובץ ובוחרים באפשרות מחיקה.

תיבת הדו-שיח Safe Delete מופיעה.

5. אפשר לבחור אפשרויות כדי למצוא איפה הסמל נמצא בפרויקט, ואז ללחוץ על אישור.

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

6. בוחרים באפשרות Build > (יצירה). פרויקט נקי.

Android Studio מסיר את כל קובצי התמונות שנוצרו שתואמים למשאב התמונה שנמחק. הפעולה מסירה אותם מהפרויקט ומה-Drive.

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

השגיאות האלה מודגשות בקוד ב-Android Studio. אחרי שמסירים את כל ההפניות מהקוד, אפשר לבנות שוב את הפרויקט.