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ọ sao cho phù hợp với bảng phối màu hình nền cá nhân hoặc thông qua một 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.
á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 được cá nhân hoá tốt hơn
cho người dùng.
Trang này bao gồm hướng dẫn triển khai Màu động trong ứng dụng của bạn. Tính năng này cũng được cung cấp 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ể tham khảo lớp học lập trình này.
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.
Hệ thống 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.
Hệ thống sử dụng màu nguồn đó để ngoại suy thêm 5 màu chính được gọi là Chính, Cấp hai, Cấp ba, Trung lập và Trung lập biến thể.
Hình 2. Ví dụ về việc 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 Hệ thống diễn giải mỗi màu chính thành một bảng sắc độ gồm 13 sắc độ.
Hình 3. Ví dụ về cách tạo bảng sắc độ cụ thể Hệ thống sử dụng hình nền duy nhất này để tạo 5 màu khác nhau giao thức này tạo nền tảng cho mọi giao diện sáng và tối.
Cách các biến thể màu sắc hiển thị trên thiết bị của người dùng
Người dùng có thể chọn biến thể màu sắc từ các màu được trích xuất hình nền và các biến thể khác nhau các giao diện bắt đầu từ Android 12, cùng với nhiều biến thể hơn được bổ sung trong Android 13. Cho ví dụ: người dùng có điện thoại Pixel chạy Android 13 sẽ chọn một biến thể từ ứng dụng Hình nền & style, như minh họa trong Hình 4.
Android 12 đã thêm biến thể Tonal Spot, theo sau là Static (Trung lập), Vibrant Các biến thể có sắc độ và biểu thức trong Android 13. Mỗi biến thể đều có một giá trị riêng công thức biến đổi màu sắc gốc cho hình nền của người dùng nhờ sự sống động và thay đổi tông màu. Ví dụ sau đây cho thấy một bảng phối màu đơn được thể hiện qua bốn biến thể màu sắc này.
Ứng dụng của bạn vẫn 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 về mã thông báo, hãy xem bài viết Tạo giao diện bằng mã thông báo trên trang này.
Làm quen với Compose
Nếu bạn đang xây dựng giao diện người dùng bằng Compose, hãy tham khảo Tuỳ chỉnh giao diện Material trong Compose để biết thông tin chi tiết về cách áp dụng Màu động cho .
Bắt đầu sử dụng Chế độ xem
Bạn có thể áp dụng Màu động ở cấp ứng dụng hoặc hoạt động. Để thực hiện việc này, 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 của bạn.
<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 mã thông báo thiết kế để chỉ định màu cho các thành phần khác nhau trên giao diện người dùng được sắp xếp hợp lý và nhất quán hơn. Mã thông báo thiết kế cho phép bạn để gán vai trò của màu sắc theo ngữ nghĩa thay vì một giá trị đã đặt, vào các phần tử khác nhau của một giao diện người dùng. Việc này giúp hệ thống sắc độ của ứng dụng có nhiều sắc độ hơn tính linh hoạt, khả năng có thể mở rộng và tính nhất quán, đồng thời đặc biệt hiệu quả khi thiết kế theo giao diện sáng, tối và 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>
xml màu
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:
Để tìm hiểu thêm về Màu động, màu tuỳ chỉnh và cách tạo mã thông báo, hãy xem trang Màu động của Material 3.
Để tạo bảng màu cơ bản cũng như màu và giao diện của ứng dụng, hãy kiểm tra Material Theme Builder (Trình tạo giao diện Material) có sẵn thông qua Trình bổ trợ Figma hoặc trong trình duyệt).
Để tìm hiểu thêm về việc sử dụng bảng phối màu có thể giúp cải thiện khả năng tiếp cận như thế nào trong ứng dụng của bạn, hãy xem trang Material 3 về Khả năng hỗ trợ tiếp cận của hệ thống màu.
Giữ lại màu sắc tuỳ chỉnh hoặc màu sắc của 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 bằng lựa chọn ưu tiên của người dùng, bạn có thể thêm từng màu khi bạn tạo màu hệ thống. 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 (Trình tạo giao diện Material) để nhập thêm
giúp mở rộng bảng phối màu của bạn, nhờ đó tạo ra hệ thống màu thống nhất.
Với tuỳ chọn này, hãy sử dụng HarmonizedColors để đổi tông màu của màn hình tuỳ chỉnh
màu. Điều này giúp cân bằng thị giác và độ tương phản dễ tiếp cận khi được kết hợp
bằng các màu do người dùng tạo. Sự cố xảy ra trong thời gian chạy với
applyToContextIfAvailable().
Xem hướng dẫn của Material 3 về cách hài hoà màu sắc 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ợ Tuỳ chỉnh giao diện màu rối tiện ích bắt đầu sau Android 12 trở lên biểu tượng thích ứng bắt đầu bằng Android 13.