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

כדאי לנסות את התכונה 'כתיבה מהירה'

Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך משתמשים בצבעים דינמיים ב-Compose

צבעים דינמיים – Material Design 3 →

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

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

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

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

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

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

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

   

3. המערכת מפרשת כל צבע מפתח ללוח צבעים של 13 גוונים.

   

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

איך וריאציות של צבע מוצגות במכשיר של משתמש

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

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

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

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

אפשר להחיל את התכונה 'צבע דינמי' ברמת האפליקציה או ברמת הפעילות. כדי לעשות זאת, צריך להתקשר למספר applyToActivitiesIfAvailable() כדי לרשום את ActivityLifeCycleCallbacks לאפליקציה.

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

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().

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

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

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