התכונה 'צבע דינמי' שנוספה ב-Android 12 מאפשרת למשתמשים להתאים אישית שהמכשירים שלהם יתאמו לערכת הצבעים של הטפט האישי שלהם או באמצעות צבע שנבחר בבוחר הטפטים.
כדי לנצל את התכונה הזו, אפשר להוסיף את ה-API של DynamicColors
,
מחילה את נושא זה על האפליקציה או על הפעילות שלך כדי להתאים אישית את האפליקציה
למשתמש.
![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-differing.png?authuser=1&hl=he)
הדף הזה כולל הוראות להטמעת צבעים דינמיים באפליקציה. התכונה הזו זמינה גם בנפרד עבור ווידג'טים וסמלים מותאמים, כפי שמתואר בהמשך הדף. אפשר גם לנסות את Codelab.
איך מערכת Android יוצרת ערכות צבעים
מערכת Android מבצעת את השלבים הבאים כדי ליצור ערכות צבעים טפט.
המערכת מזהה את הצבעים הראשיים בתמונת הטפט שנבחרה מחלצת צבע מקור.
המערכת משתמשת בצבע המקור כדי לבצע אקסטרפולציה של חמישה צבעי מפתח נקרא ראשי, משני, שלישי, ניטרלי וניטרלי וריאציה.
איור 2. דוגמה לחילוץ צבע מקור מתמונת הטפט וחילוץ לחמישה צבעי מפתח המערכת מפרשת כל צבע מפתח ללוח טונלי של 13 גוונים.
איור 3. דוגמה ליצירת לוח צבעים טונלי נתונים המערכת משתמשת בטפט היחיד הזה כדי להסיק חמישה צבעים שונים , שמספקות את הבסיס לכל עיצוב בהיר או כהה.
איך וריאציות של צבע מוצגות במכשיר של משתמש
המשתמשים יכולים לבחור וריאציות צבע מצבעים שנשלפו מהטפט ומגוונים עיצובים החל מ-Android 12, בתוספת וריאציות ב-Android 13. עבור לדוגמה, משתמש עם טלפון Pixel עם Android 13 יבחר וריאנט מתוך הטפט ו הגדרות, כפי שמוצג באיור 4.
![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-color.png?authuser=1&hl=he)
ל-Android 12 נוספו הווריאנט Tonal Spot ואחריו הווריאנט ניטרלי, Vibrant וריאנטים טונליים ואקספרס ב-Android 13. לכל וריאנט יש ערך ייחודי מתכון שמשנה את צבעי הזרעים של הטפט של המשתמש באמצעות חיוניות ומסובבים את הגוון. הדוגמה הבאה מציגה ערכת צבעים אחת. שמבוטאת באמצעות ארבע וריאציות הצבע האלה.
![](https://developer.android.com/static/develop/ui/views/theming/images/color-variants-example.png?authuser=1&hl=he)
האפליקציה שלך עדיין משתמשת באותם אסימונים כדי לגשת לצבעים האלה. לפרטים מידע על אסימונים זמין בקטע יצירת עיצוב באמצעות אסימונים שבדף הזה.
תחילת העבודה עם 'כתיבה'
אם אתם יוצרים את ממשק המשתמש באמצעות 'כתיבה', עיצוב חומרים ב'כתיבה' לפרטים על החלת צבע דינמי על אפליקציה.
תחילת העבודה עם תצוגות מפורטות
אפשר להחיל צבע דינמי ברמת האפליקציה או ברמת הפעילות. כדי לעשות את זה, צריך להתקשר
applyToActivitiesIfAvailable()
כדי לרשום
ActivityLifeCycleCallbacks
לאפליקציה.
Kotlin
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
Java
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
בשלב הבא, מוסיפים את העיצוב לאפליקציה.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
יצירת עיצוב באמצעות אסימונים
התכונה 'צבע דינמי' משתמשת באסימוני העיצוב כדי להקצות צבעים לרכיבים שונים של ממשק המשתמש, שהם יעילים ועקביים יותר. אסימון עיצוב מאפשר לך להקצות תפקידי צבע באופן סמנטי במקום ערך מוגדר, לרכיבים שונים בממשק משתמש. כך למערכת הטונלית של האפליקציה יש יותר גמישות, מדרגיות ועקביות, והוא חזק במיוחד כאשר עיצוב לפי עיצובים בהירים כהים וצבע דינמי.
קטעי הקוד הבאים מציגים דוגמאות של עיצובים בהירים כהים, קובץ xml תואם של צבע, אחרי החלת אסימונים דינמיים בצבע.
עיצוב בהיר
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
עיצוב כהה
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
XML צבעים
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
לקבלת מידע נוסף:
למידע נוסף על צבע דינמי, צבעים מותאמים אישית ויצירת אסימונים: אפשר לעיין בדף צבע דינמי של Material 3.
כדי ליצור את לוח הצבעים הבסיסי ואת הצבעים והעיצוב של האפליקציה, צריך לסמן את התיבה את Material Design Builder, הזמין הפלאגין של Figma או בדפדפן).
למידע נוסף על ערכות הצבעים יכולות לשפר את הנגישות באפליקציה שלכם, קראו את הדף של Material 3 על נגישות במערכת הצבעים.
שמירה על צבעים מותאמים אישית או צבעים של המותג
אם לאפליקציה יש צבעים בהתאמה אישית או צבעי המותג שאתם לא רוצים לשנות עם העדפות של המשתמש, אפשר להוסיף אותן בנפרד בזמן יצירת הצבע scheme. לדוגמה:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
לחלופין, אפשר להשתמש ב-Material Design Builder כדי לייבא
צבעים שמרחיבים את ערכת הצבעים שלך ויוצרים מערכת צבעים אחידה.
אם תבחרו באפשרות הזו, השתמשו ב-HarmonizedColors
כדי לשנות את האווירה של
צבעים. כך ניתן להשיג איזון חזותי וניגודיות נגישות בעת השילוב
בצבעים שהמשתמשים יוצרים. היא מתרחשת בזמן ריצה עם
applyToContextIfAvailable()
![](https://developer.android.com/static/develop/ui/views/theming/images/harmonize.png?authuser=1&hl=he)
אפשר לעיין בהנחיות של Material 3 לגבי הרמוניה של צבעים בהתאמה אישית.
הוספת צבע דינמי לסמלים ולווידג'טים מותאמים
![](https://developer.android.com/static/develop/ui/views/theming/images/dynamic-color-icons-widgets.png?authuser=1&hl=he)
בנוסף להפעלה של עיצוב צבעים דינמי באפליקציה, אפשר גם לתמוך צבעים דינמיים עבור ווידג'טים שמתחילים ב- Android 12 ואילך סמלים מותאמים שמתחילים ב- Android מגרסה 13.