Giao diện tối có sẵn trên Android 10 (API cấp 29) trở lên. Chiến dịch này có các lợi ích sau:
- Làm giảm đáng kể mức sử dụng năng lượng, tuỳ vào chế độ cài đặt của thiết bị màn hình.
- Cải thiện khả năng hiển thị đối với những người dùng có thị lực kém và những người nhạy cảm với ánh sáng.
- Giúp bạn dễ dàng sử dụng thiết bị trong môi trường ánh sáng yếu.
Giao diện tối áp dụng cho giao diện người dùng của hệ thống Android và các ứng dụng chạy trên thiết bị.
Có 3 cách để bật giao diện tối trên Android 10 trở lên:
- Sử dụng chế độ cài đặt hệ thống bằng cách chuyển đến phần Cài đặt > Hiển thị > Giao diện thành bật giao diện tối.
- Sử dụng ô Cài đặt nhanh để chuyển đổi các giao diện từ khay thông báo, khi được bật.
- Trên các thiết bị Pixel, hãy bật chế độ Tiết kiệm pin để bật cả giao diện tối bất cứ lúc nào. Các thiết bị khác có thể không hỗ trợ hành vi này.
Để xem hướng dẫn về cách bật giao diện tối cho nội dung dựa trên nền tảng web bằng thành phần WebView, hãy xem phần Làm tối nội dung web trong WebView.
Hỗ trợ giao diện tối trong ứng dụng
Để hỗ trợ giao diện tối, hãy thiết lập giao diện của ứng dụng (thường có trong
res/values/styles.xml
– để kế thừa từ giao diện DayNight
:
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
Bạn cũng có thể dùng chế độ tối cho Material Components giao diện:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
Điều này gắn kết giao diện chính của ứng dụng với các cờ chế độ ban đêm do hệ thống kiểm soát và khi được bật, sẽ cung cấp cho ứng dụng một giao diện tối mặc định.
Giao diện và kiểu
Tránh sử dụng màu sắc hoặc biểu tượng được cố định giá trị trong mã để sử dụng trong giao diện sáng. Sử dụng hoặc các tài nguyên đủ điều kiện về đêm.
2 thuộc tính giao diện quan trọng nhất đối với giao diện tối:
?android:attr/textColorPrimary
: màu văn bản đa năng. Đó là gần đen trong giao diện sáng và gần trắng trong giao diện tối. Thành phần này chứa trạng thái tắt.?attr/colorControlNormal
: màu biểu tượng đa năng. Thành phần này chứa trạng thái tắt.
Bạn nên dùng Material Design
Thành phần, vì giao diện màu
system, chẳng hạn như giao diện
?attr/colorSurface
và ?attr/colorOnSurface
, giúp bạn dễ dàng truy cập
thành màu phù hợp. Bạn có thể tuỳ chỉnh các thuộc tính này trong giao diện của mình.
Thay đổi giao diện trong ứng dụng
Bạn có thể cho phép người dùng thay đổi giao diện của ứng dụng trong khi ứng dụng đang chạy. Nội dung sau đây là các lựa chọn được đề xuất:
- Sáng
- Tối
- Theo giá trị mặc định của hệ thống (lựa chọn mặc định nên dùng)
Các tuỳ chọn này sẽ liên kết trực tiếp với các chế độ AppCompat.DayNight
:
Sáng:
MODE_NIGHT_NO
.Tối:
MODE_NIGHT_YES
.Theo giá trị mặc định của hệ thống:
MODE_NIGHT_FOLLOW_SYSTEM
.
Để chuyển đổi giao diện, hãy làm như sau:
Trên API cấp 31 trở lên, hãy sử dụng
UiModeManager#setApplicationNightMode
để cho hệ thống biết ứng dụng của bạn sẽ chạy giao diện nào. Điều này cho phép hệ thống so khớp giao diện trong màn hình chờ.Trên API cấp 30 trở xuống, hãy sử dụng
AppCompatDelegate.setDefaultNightMode()
để chuyển đổi chủ đề.
Buộc chế độ tối
Android 10 cung cấp tính năng Buộc chế độ tối, một tính năng để các nhà phát triển
nhanh chóng triển khai giao diện tối mà không đặt rõ ràng giao diện DayNight
.
Tính năng Buộc chế độ tối phân tích từng chế độ xem của ứng dụng có giao diện sáng và áp dụng giao diện tối trước khi vẽ lên màn hình. Bạn có thể sử dụng kết hợp tính năng Buộc chế độ tối và triển khai gốc để cắt giảm thời gian cần thiết để triển khai giao diện tối chủ đề.
Các ứng dụng phải chọn sử dụng tính năng Buộc chế độ tối bằng cách đặt android:forceDarkAllowed="true"
trong
chủ đề của hoạt động. Thuộc tính này được đặt trên tất cả hệ thống và
Các giao diện sáng do AndroidX cung cấp, chẳng hạn như Theme.Material.Light
. Khi bạn sử dụng
Buộc chế độ tối, kiểm thử ứng dụng kỹ lưỡng và loại trừ các khung hiển thị nếu cần.
Nếu ứng dụng của bạn dùng giao diện tối, chẳng hạn như Theme.Material
), thì tính năng Buộc chế độ tối sẽ không hoạt động
áp dụng. Tương tự, nếu giao diện của ứng dụng kế thừa từ giao diện DayNight
, hãy Buộc
Chế độ tối không hoạt động do tính năng tự động chuyển đổi giao diện.
Tắt tính năng Buộc chế độ tối trong khung nhìn
Bạn có thể kiểm soát tính năng Buộc chế độ tối trên các góc nhìn cụ thể bằng
Thuộc tính bố cục android:forceDarkAllowed
hoặc có
setForceDarkAllowed()
.
Nội dung trên web
Để biết thêm thông tin về cách sử dụng giao diện tối cho nội dung dựa trên nền tảng web, hãy xem phần Làm tối nội dung trên web trong WebView. Ví dụ về giao diện tối đã áp dụng cho WebView, hãy xem bản minh hoạ WebView trên GitHub của Google.
Các phương pháp hay nhất
Các phần sau đây cung cấp các phương pháp hay nhất để triển khai các giao diện tối.
Thông báo và tiện ích
Đối với các nền tảng giao diện người dùng mà bạn hiển thị trên thiết bị nhưng không trực tiếp điều khiển, hãy thực hiện hãy đảm bảo mọi khung hiển thị mà bạn sử dụng đều phản ánh giao diện của ứng dụng lưu trữ. Hai ví dụ là thông báo và tiện ích trình chạy.
Thông báo
Sử dụng các mẫu thông báo do hệ thống cung cấp, chẳng hạn như MessagingStyle
. Chiến dịch này
có nghĩa là hệ thống chịu trách nhiệm áp dụng đúng kiểu cho khung hiển thị.
Tiện ích và khung nhìn thông báo tuỳ chỉnh
Đối với các tiện ích trình chạy hoặc nếu ứng dụng của bạn dùng khung hiển thị nội dung thông báo tuỳ chỉnh, kiểm tra nội dung trên cả giao diện sáng lẫn tối.
Những lỗi phổ biến cần chú ý bao gồm:
- Giả sử màu nền luôn là màu sáng.
- Mã hoá cứng màu văn bản.
- Đặt màu nền được cố định giá trị trong mã trong khi sử dụng màu văn bản mặc định.
- Sử dụng biểu tượng có thể vẽ là màu tĩnh.
Trong tất cả những trường hợp này, hãy dùng các thuộc tính giao diện thích hợp thay vì mã hoá cứng màu.
Màn hình khởi chạy
Nếu ứng dụng của bạn có màn hình khởi chạy tuỳ chỉnh, bạn có thể cần phải sửa đổi màn hình đó để phản ánh giao diện đã chọn.
Xoá mọi màu được cố định giá trị trong mã, chẳng hạn như màu nền được đặt theo phương thức lập trình thành
màu trắng. Thay vào đó, hãy sử dụng thuộc tính giao diện ?android:attr/colorBackground
.
Các thay đổi về cấu hình
Khi giao diện của ứng dụng thay đổi, thông qua cài đặt hệ thống hoặc AppCompat,
kích hoạt uiMode
thay đổi cấu hình. Điều này có nghĩa là các hoạt động sẽ được tự động tạo lại.
Trong một số trường hợp, bạn có thể muốn ứng dụng xử lý thay đổi cấu hình. Ví dụ như bạn có thể trì hoãn một thay đổi cấu hình do đang phát video.
Ứng dụng có thể xử lý việc triển khai giao diện tối bằng cách khai báo rằng mỗi
Activity
có thể xử lý thay đổi cấu hình của uiMode
:
<activity
android:name=".MyActivity"
android:configChanges="uiMode" />
Khi Activity
khai báo rằng nó xử lý các thay đổi về cấu hình,
onConfigurationChanged()
được gọi khi có thay đổi giao diện.
Để kiểm tra xem giao diện hiện tại là gì, các ứng dụng có thể chạy mã như sau:
Kotlin
val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK when (currentNightMode) { Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme. Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme. }
Java
int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK; switch (currentNightMode) { case Configuration.UI_MODE_NIGHT_NO: // Night mode is not active, we're using the light theme break; case Configuration.UI_MODE_NIGHT_YES: // Night mode is active, we're using dark theme break; }