کاربران را قادر می سازد تا تجربه رنگ خود را در برنامه شما شخصی کنند

روش Compose را امتحان کنید

Jetpack Compose جعبه ابزار UI توصیه شده برای اندروید است. با نحوه کار با رنگ پویا در Compose آشنا شوید.

رنگ های پویا - متریال دیزاین 3 →

Dynamic Color که در اندروید 12 اضافه شده است، به کاربران امکان می‌دهد دستگاه‌های خود را شخصی‌سازی کنند تا با طرح رنگ کاغذدیواری شخصی خود یا از طریق یک رنگ انتخابی در انتخابگر کاغذ دیواری هماهنگ شوند.

می‌توانید با افزودن DynamicColors API از این ویژگی استفاده کنید، که این موضوع را در برنامه یا فعالیت شما اعمال می‌کند تا برنامه شما را برای کاربر شخصی‌تر کند.

این صفحه شامل دستورالعمل هایی برای اجرای Dynamic Colors در برنامه شما است. این ویژگی همچنین به طور جداگانه برای ویجت ها و نمادهای تطبیقی ​​در دسترس است، همانطور که در ادامه این صفحه توضیح داده شد. شما همچنین می توانید نرم افزار Codelab را امتحان کنید.

اندروید چگونه طرح های رنگی ایجاد می کند

اندروید مراحل زیر را برای تولید طرح‌های رنگی از تصویر زمینه کاربر انجام می‌دهد.

1. سیستم رنگ های اصلی را در تصویر کاغذدیواری انتخاب شده تشخیص می دهد و یک رنگ منبع را استخراج می کند.

2. این سیستم از آن رنگ مبدأ برای برون یابی بیشتر پنج رنگ کلیدی معروف به نوع اولیه ، ثانویه ، سوم ، خنثی و خنثی استفاده می کند.

   

3. این سیستم هر رنگ کلید را به یک پالت تونال با 13 تن تفسیر می کند.

   

4. این سیستم از این کاغذ دیواری واحد برای استخراج پنج طرح رنگی مختلف استفاده می‌کند که پایه و اساس هر تم روشن و تاریک را فراهم می‌کند.

نحوه نمایش انواع رنگ در دستگاه کاربر

کاربران می‌توانند انواع رنگ‌ها را از رنگ‌های استخراج‌شده با کاغذدیواری و تم‌های مختلف از Android 12 انتخاب کنند، و انواع بیشتری در Android 13 اضافه شده است. برای مثال، کاربری با گوشی پیکسل دارای Android 13، یک نوع را از تنظیمات Wallpaper & style انتخاب می‌کند. در شکل 4 نشان داده شده است.

Android 12 نوع Tonal Spot را اضافه کرد و به دنبال آن انواع Neutral ، Vibrant Tonal و Expressive در Android 13 قرار گرفتند. هر نسخه دارای دستور العمل منحصر به فردی است که رنگ دانه کاغذ دیواری کاربر را از طریق شادابی و چرخش رنگ تغییر می دهد. مثال زیر یک طرح رنگ واحد را نشان می دهد که از طریق این چهار نوع رنگ بیان شده است.

برنامه شما همچنان از همان نشانه ها برای دسترسی به این رنگ ها استفاده می کند. برای جزئیات بیشتر درباره نشانه‌ها، به ایجاد طرح زمینه با نشانه‌ها در این صفحه مراجعه کنید.

با Views شروع کنید

می‌توانید Dynamic Color را در سطح برنامه یا فعالیت اعمال کنید. برای انجام این کار، با 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>

تم خود را با توکن ها ایجاد کنید

Dynamic Color از نشانه‌های طراحی استفاده می‌کند تا تخصیص رنگ‌ها به عناصر مختلف رابط کاربری ساده‌تر و یکدست‌تر شود. یک نشانه طراحی به شما امکان می دهد نقش های رنگی را به جای یک مقدار مجموعه، به عناصر مختلف یک رابط کاربری اختصاص دهید. این سیستم تونال برنامه شما را قادر می‌سازد انعطاف‌پذیری، مقیاس‌پذیری و سازگاری بیشتری داشته باشد، و به ویژه هنگام طراحی برای تم‌های روشن و تیره و رنگ‌های پویا قدرتمند است.

قطعه‌های زیر نمونه‌هایی از تم‌های روشن و تیره و رنگ 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>

برای اطلاعات بیشتر:

• برای کسب اطلاعات بیشتر در مورد Dynamic Color، رنگ‌های سفارشی و تولید توکن‌ها، صفحه Material 3 Dynamic Color را بررسی کنید.

• برای تولید پالت رنگ پایه و رنگ‌ها و تم برنامه‌تان، 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 در مورد هماهنگ کردن رنگ های سفارشی مراجعه کنید.

رنگ پویا را به نمادها و ویجت های تطبیقی ​​خود اعمال کنید

علاوه بر فعال کردن طرح زمینه رنگی پویا در برنامه خود، می‌توانید از طرح زمینه رنگی پویا برای ویجت‌هایی که در اندروید 12 شروع می‌شوند و برای نمادهای تطبیقی ​​که در اندروید 13 شروع می‌شوند، پشتیبانی کنید.

روش Compose را امتحان کنید

Jetpack Compose جعبه ابزار UI توصیه شده برای اندروید است. با نحوه کار با رنگ پویا در Compose آشنا شوید.

رنگ های پویا - متریال دیزاین 3 →

Dynamic Color که در اندروید 12 اضافه شده است، به کاربران امکان می‌دهد دستگاه‌های خود را شخصی‌سازی کنند تا با طرح رنگ کاغذدیواری شخصی خود یا از طریق یک رنگ انتخابی در انتخابگر کاغذ دیواری هماهنگ شوند.

می‌توانید با افزودن DynamicColors API از این ویژگی استفاده کنید، که این موضوع را در برنامه یا فعالیت شما اعمال می‌کند تا برنامه شما را برای کاربر شخصی‌تر کند.

این صفحه شامل دستورالعمل هایی برای اجرای Dynamic Colors در برنامه شما است. این ویژگی همچنین به طور جداگانه برای ویجت ها و نمادهای تطبیقی ​​در دسترس است، همانطور که در ادامه این صفحه توضیح داده شد. شما همچنین می توانید نرم افزار Codelab را امتحان کنید.

اندروید چگونه طرح های رنگی ایجاد می کند

اندروید مراحل زیر را برای تولید طرح‌های رنگی از تصویر زمینه کاربر انجام می‌دهد.

1. سیستم رنگ های اصلی را در تصویر کاغذدیواری انتخاب شده تشخیص می دهد و یک رنگ منبع را استخراج می کند.

2. این سیستم از آن رنگ مبدأ برای برون یابی بیشتر پنج رنگ کلیدی معروف به نوع اولیه ، ثانویه ، سوم ، خنثی و خنثی استفاده می کند.

   

3. این سیستم هر رنگ کلید را به یک پالت تونال با 13 تن تفسیر می کند.

   

4. این سیستم از این کاغذ دیواری واحد برای استخراج پنج طرح رنگی مختلف استفاده می‌کند که پایه و اساس هر تم روشن و تاریک را فراهم می‌کند.

نحوه نمایش انواع رنگ در دستگاه کاربر

کاربران می‌توانند انواع رنگ‌ها را از رنگ‌های استخراج‌شده با کاغذدیواری و تم‌های مختلف از Android 12 انتخاب کنند، و انواع بیشتری در Android 13 اضافه شده است. برای مثال، کاربری با گوشی پیکسل دارای Android 13، یک نوع را از تنظیمات Wallpaper & style انتخاب می‌کند. در شکل 4 نشان داده شده است.

Android 12 نوع Tonal Spot را اضافه کرد و به دنبال آن انواع Neutral ، Vibrant Tonal و Expressive در Android 13 قرار گرفتند. هر نسخه دارای دستور العمل منحصر به فردی است که رنگ دانه کاغذ دیواری کاربر را از طریق شادابی و چرخش رنگ تغییر می دهد. مثال زیر یک طرح رنگ واحد را نشان می دهد که از طریق این چهار نوع رنگ بیان شده است.

برنامه شما همچنان از همان نشانه ها برای دسترسی به این رنگ ها استفاده می کند. برای جزئیات بیشتر درباره نشانه‌ها، به ایجاد طرح زمینه با نشانه‌ها در این صفحه مراجعه کنید.

با Views شروع کنید

می‌توانید Dynamic Color را در سطح برنامه یا فعالیت اعمال کنید. برای انجام این کار، با 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>

تم خود را با توکن ها ایجاد کنید

Dynamic Color از نشانه‌های طراحی استفاده می‌کند تا تخصیص رنگ‌ها به عناصر مختلف رابط کاربری ساده‌تر و یکدست‌تر شود. یک نشانه طراحی به شما امکان می دهد نقش های رنگی را به جای یک مقدار مجموعه، به عناصر مختلف یک رابط کاربری اختصاص دهید. این سیستم تونال برنامه شما را قادر می‌سازد انعطاف‌پذیری، مقیاس‌پذیری و سازگاری بیشتری داشته باشد، و به ویژه هنگام طراحی برای تم‌های روشن و تیره و رنگ‌های پویا قدرتمند است.

قطعه‌های زیر نمونه‌هایی از تم‌های روشن و تیره و رنگ 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>

برای اطلاعات بیشتر:

• برای کسب اطلاعات بیشتر در مورد Dynamic Color، رنگ‌های سفارشی و تولید توکن‌ها، صفحه Material 3 Dynamic Color را بررسی کنید.

• برای تولید پالت رنگ پایه و رنگ‌ها و تم برنامه‌تان، 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 در مورد هماهنگ کردن رنگ های سفارشی مراجعه کنید.

رنگ پویا را به نمادها و ویجت های تطبیقی ​​خود اعمال کنید

علاوه بر فعال کردن طرح زمینه رنگی پویا در برنامه خود، می‌توانید از طرح زمینه رنگی پویا برای ویجت‌هایی که در اندروید 12 شروع می‌شوند و برای نمادهای تطبیقی ​​که در اندروید 13 شروع می‌شوند، پشتیبانی کنید.