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

איך עושים את זה ב-Compose

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

   איור 3. דוגמה ליצירת פלטת גוונים נתונה

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

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

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

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

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

איור 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>

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.