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

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

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

תחילת העבודה עם 'כתיבה'

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

תחילת העבודה עם תצוגות מפורטות

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

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

אפשר לעיין בהנחיות של Material 3 לגבי הרמוניה של צבעים בהתאמה אישית.

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

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