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

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

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.