דף זה תורגם על ידי Cloud Translation API.

המשתמשים יכולים להתאים אישית את חוויית הצבע שלהם באפליקציה

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

כדי לשפר את ההתאמה האישית של האפליקציה למשתמשים, אפשר להשתמש בה על ידי הוספת ה-API DynamicColors, שמחיל אותו על האפליקציה או על הפעילות שלכם.

**איור 1.** דוגמאות לסכמות צבעים טונאליות שמבוססות על טפטים שונים

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

איך מערכת Android יוצרת ערכות צבעים

כדי ליצור ערכות צבעים מהטפט של המשתמש, Android מבצע את השלבים הבאים:

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

איור 2. דוגמה לחילוץ צבע מקור מתמונת טפט וחילוץ לחמישה צבעים מרכזיים
המערכת מפרשת כל צבע מפתח ללוח צבעים של 13 גוונים.

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

איך וריאנטים של צבעים מוצגים במכשיר של המשתמש

החל מ-Android 12, המשתמשים יכולים לבחור וריאציות של צבעים מתוך צבעים שחולצו מהטפט ועיצובים שונים, ועוד וריאציות נוספות נוספו ב-Android 13. לדוגמה, משתמש עם טלפון Pixel עם Android 13 יבחר וריאנט מההגדרות טפט וסגנון, כפי שמוצג באיור 4.

**איור 4.** בחירת וריאציות צבע בהגדרות הטפט (מוצגות במכשיר Pixel)

ב-Android 12 נוספה הווריאנט Tonal Spot, ואחריו הווריאנטים Neutral,‏ Vibrant Tonal ו-Expressive ב-Android 13. לכל וריאנט יש מתכון ייחודי שממיר את צבעי המקור של הטפט של המשתמש באמצעות עוצמת צבע וסיבוב של הטון. בדוגמה הבאה מוצגת סכמת צבעים אחת שמתבטאת בארבעת וריאציות הצבעים האלה.

**איור 5.** דוגמה לאופן שבו וריאציות שונות של צבעים נראות במכשיר אחד

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

תחילת העבודה עם Views

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

Colors 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 Theme Builder, שזמין דרך יישומון Figma או בדפדפן).
למידע נוסף על האופן שבו שימוש בסכימות צבעים יכול לשפר את הנגישות באפליקציה, אפשר לעיין בדף Material 3 בנושא נגישות של מערכת צבעים.

שמירה של צבעים בהתאמה אישית או של צבעי המותג

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

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

**איור 6.** דוגמה לשילוב צבעים מותאמים אישית

כדאי לעיין בהנחיות של Material 3 בנושא התאמה של צבעים מותאמים אישית.

החלת צבע דינמי על סמלים ווידג'טים מותאמים

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