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ọ 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ộ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. 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.
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 cung cấp riêng cho các 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 sẽ thực hiện các bước sau để tạo bảng phối màu trên hình nền của người dùng.
Hệ thống sẽ phát hiện màu chính trong hình nền đã chọn và trích xuất màu nguồn.
Hệ thống sẽ sử dụng màu nguồn đó để ngoại suy 5 màu chính là Primary (Chính), Secondary (Cấp hai), Tertiary (Tertiary), Cập nhật (Màu trung tính) và Trung lập).
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ủ đạo thành một bảng sắc độ gồm 13 tông màu.
Hình 3. Ví dụ về cách tạo bảng sắc độ nhất định Hệ thống sử dụng hình nền duy nhất này để đưa ra 5 bảng phối màu khác nhau, làm cơ sở 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 trong số các màu được trích xuất hình nền và nhiều chủ đề kể từ Android 12, sau đó bổ sung nhiều biến thể hơn từ Android 13. Ví dụ: người dùng có đ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à phong cách, như minh hoạ trong hình 4.
Android 12 đã thêm biến thể Tông màu, tiếp theo là các biến thể Trung tính, Sắc thái rung và Biểu hiện trong Android 13. Mỗi biến thể có một công thức riêng giúp biến đổi màu gốc của hình nền người dùng thông qua sự sống động và xoay màu. Ví dụ sau đây cho thấy một bảng phối màu duy nhất được biểu thị qua bốn biến thể màu này.
Ứng dụng của bạn vẫn dùng cùng một mã thông báo để sử dụng những 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 với Compose
Nếu bạn đang xây dựng giao diện người dùng bằng Compose, hãy xem phần 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 ứng dụng.
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 này 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 mã thông báo thiết kế để giúp việc chỉ định màu cho các phần tử trên giao diện người dùng khác nhau được tinh giản và nhất quán hơn. Mã thông báo thiết kế cho phép bạn chỉ định theo ngữ nghĩa vai trò của màu sắc thay vì giá trị đã đặt cho các thành phần khác nhau của giao diện người dùng. Điều này giúp hệ thống sắc độ của ứng dụng trở nên linh hoạt, có thể 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, 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 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 sắc và giao diện của ứng dụng, hãy xem Material Theme Builder (Trình tạo giao diện Material) có trong Trình bổ trợ Figma hoặc trong trình duyệt).
Để tìm hiểu thêm về cách sử dụng bảng phối màu để cải thiện khả năng hỗ trợ tiếp cận trong ứng dụng của bạn, hãy xem trang Material 3 về 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 sắc 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 tạo 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 (Trình tạo giao diện Material) để nhập các màu bổ sung giúp mở rộng bảng phối màu, từ đó tạo ra hệ thống màu hợp nhất.
Với tuỳ chọn này, hãy sử dụng HarmonizedColors để chuyển đổi tông màu của các màu tuỳ chỉnh. Điều này giúp đạt được sự cân bằng về 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. Quá trình này xảy ra trong thời gian chạy bằng applyToContextIfAvailable().
Xem hướng dẫn của Material 3 về cách hoà hợp màu tuỳ chỉnh.
Áp dụng Màu động cho biểu tượng và tiện ích thích ứng
Ngoài việc bật tính năng tuỳ chỉnh giao diện Màu động trên ứng dụng, bạn cũng có thể hỗ trợ tính năng tuỳ chỉnh giao diện Màu Dynanmic cho các tiện ích bắt đầu từ Android 12 và các biểu tượng thích ứng trong Android 13.