Cho phép người dùng cá nhân hoá trải nghiệm màu sắc của họ trong ứng dụng của bạn

Thử cách dùng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng màu động trong Compose.
Màu động – Material Design 3 →

Tính năng Màu động được thêm vào Android 12 cho phép người dùng cá nhân hoá thiết bị của họ để điều chỉnh tông màu cho phù hợp với bảng phối màu của hình nền cá nhân hoặc thông qua màu đã chọn trong bộ chọn hình nền.

Bạn có thể tận dụng tính năng này bằng cách thêm API DynamicColors. API này sẽ áp dụng giao diện này cho ứng dụng hoặc hoạt động của bạn để giúp ứng dụng phù hợp hơn với người dùng.

Hình 1. Ví dụ về bảng phối màu theo tông màu bắt nguồn từ nhiều hình nền

Trang này bao gồm hướng dẫn triển khai Màu động trong ứng dụng. Tính năng này cũng có sẵn riêng cho tiện ích và biểu tượng thích ứng, như mô tả ở phần sau của trang này. Bạn cũng có thể thử tham gia lớp học lập trình.

Cách Android tạo bảng phối màu

Android thực hiện các bước sau để tạo bảng phối màu từ hình nền của người dùng.

  1. Hệ thống sẽ phát hiện các màu chính trong hình nền đã chọn và trích xuất màu nguồn.

  2. Hệ thống sử dụng màu nguồn đó để dự đoán thêm 5 màu chính được gọi là Chính, Phụ, Thứ ba, Trung tính và Biến thể trung tính.

    Ví dụ về việc trích xuất màu nguồn
    Hình 2. Ví dụ về cách trích xuất màu nguồn từ hình nền và trích xuất thành 5 màu chính

  3. Hệ thống diễn giải từng màu chính thành một bảng sắc độ gồm 13 tông màu.

    Ví dụ về cách tạo một bảng sắc độ nhất định
    Hình 3. Ví dụ về cách tạo một bảng sắc độ nhất định

  4. Hệ thống sử dụng một hình nền duy nhất này để lấy 5 bảng phối màu khác nhau, là cơ sở cho mọi giao diện sáng và tối.

Cách các biến thể màu hiển thị trên thiết bị của người dùng

Người dùng có thể chọn các biến thể màu từ màu được trích xuất từ hình nền và nhiều giao diện khác nhau kể từ Android 12, với nhiều biến thể khác được thêm vào Android 13. Ví dụ: người dùng điện thoại Pixel chạy Android 13 sẽ chọn một biến thể trong phần cài đặt Hình nền và kiểu, như minh hoạ trong hình 4.

Hình 4. Chọn biến thể màu trong phần cài đặt hình nền (hiển thị trên thiết bị Pixel)

Android 12 đã thêm biến thể Tonal Spot (Điểm màu), theo sau là các biến thể Neutral (Trung tính), Vibrant Tonal (Màu sắc sống động) và Expressive (Biểu cảm) trong Android 13. Mỗi biến thể có một công thức riêng giúp biến đổi màu hạt giống của hình nền của người dùng thông qua độ sống động và xoay màu sắc. Ví dụ sau đây cho thấy một bảng phối màu duy nhất được thể hiện thông qua 4 biến thể màu này.

Hình 5. Ví dụ về giao diện của các biến thể màu sắc trên một thiết bị

Ứng dụng của bạn vẫn sử dụng các mã thông báo tương tự để truy cập vào các màu này. Để biết thông tin chi tiết về mã thông báo, hãy xem phần Tạo giao diện bằng mã thông báo trên trang này.

Bắt đầu sử dụng Khung hiển thị

Bạn có thể áp dụng Màu động ở cấp ứng dụng hoặc cấp hoạt động. Để làm điều đó, hãy gọi applyToActivitiesIfAvailable() để đăng ký ActivityLifeCycleCallbacks cho ứng dụng của bạn.

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);
  }
}

Tiếp theo, hãy thêm giao diện vào ứng dụng.

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

Tạo giao diện bằng mã thông báo

Màu động tận dụng các mã thông báo thiết kế để chỉ định màu cho các thành phần trên giao diện người dùng một cách đơn giản và nhất quán hơn. Mã thông báo thiết kế cho phép bạn chỉ định vai trò màu sắc theo ngữ nghĩa, thay vì một giá trị đã đặt, cho các phần tử khác nhau của giao diện người dùng. Điều này giúp hệ thống tông màu của ứng dụng linh hoạt, có khả năng mở rộng và nhất quán hơn, đồng thời đặc biệt hiệu quả khi thiết kế giao diện sáng và tối cũng như màu động.

Các đoạn mã sau đây cho thấy ví dụ về giao diện sáng và tối, cũng như một tệp xml màu tương ứng, sau khi áp dụng mã thông báo màu động.

Giao diện sáng

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>

Giao diện tối

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>

Thông tin khác:

Giữ lại màu tuỳ chỉnh hoặc màu thương hiệu

Nếu ứng dụng của bạn có màu tuỳ chỉnh hoặc màu thương hiệu mà bạn không muốn thay đổi theo lựa chọn ưu tiên của người dùng, thì bạn có thể thêm từng màu đó khi xây dựng bảng phối màu. Ví dụ:

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>

Ngoài ra, bạn có thể sử dụng Material Theme Builder để nhập các màu bổ sung mở rộng bảng phối màu, từ đó tạo ra một hệ thống màu thống nhất. Với tuỳ chọn này, hãy sử dụng HarmonizedColors để thay đổi tông màu của màu tuỳ chỉnh. Điều này giúp đạt được sự cân bằng hình ảnh và độ tương phản dễ tiếp cận khi kết hợp với màu do người dùng tạo. Lỗi này xảy ra trong thời gian chạy với applyToContextIfAvailable().

Hình 6. Ví dụ về cách điều chỉnh màu tuỳ chỉnh sao cho hài hoà

Xem hướng dẫn của Material 3 về cách cân bằng màu tuỳ chỉnh.

Áp dụng Màu động cho các biểu tượng và tiện ích thích ứng

Ngoài việc bật giao diện Màu động trên ứng dụng, bạn cũng có thể hỗ trợ giao diện Màu động cho tiện ích bắt đầu từ Android 12 và cho biểu tượng thích ứng bắt đầu từ Android 13.