Triển khai giao diện tối

Thử cách sử 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 giao diện trong Compose.

Hình 1. Giao diện tối.

Giao diện tối có sẵn trên Android 10 (API cấp 29) trở lên. Hàm này có những lợi ích sau:

  • Giảm đáng kể mức sử dụng pin, tuỳ thuộc vào công nghệ màn hình của thiết bị.
  • 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 trong 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 > Màn hình > Giao diện để bật giao diện tối.
  • Sử dụng ô Cài đặt nhanh để chuyển đổi giao diện từ khay thông báo khi tính năng này được bật.
  • Trên các thiết bị Pixel, hãy bật chế độ Tiết kiệm pin để bật giao diện tối cùng lúc. 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 đặt 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ể sử dụng giao diện tối của Thành phần Material:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

Thao tác này sẽ gắn 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à cung cấp cho ứng dụng một giao diện tối mặc định khi được bật.

Giao diện và kiểu

Tránh dùng các màu hoặc biểu tượng được cố định giá trị trong mã nhằm mục đích sử dụng trong giao diện sáng. Thay vào đó, hãy sử dụng các thuộc tính giao diện hoặc tài nguyên phù hợp cho ban đêm.

2 thuộc tính giao diện có ý nghĩa quan trọng nhất đối với giao diện tối:

  • ?android:attr/textColorPrimary: màu văn bản đa dụng. Nó có màu gần như màu đen trong giao diện sáng và gần như màu 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 sử dụng chung. Thành phần này chứa trạng thái tắt.

Bạn nên sử dụng Thành phần Material Design, vì hệ thống giao diện màu của thành phần này, chẳng hạn như các thuộc tính giao diện ?attr/colorSurface?attr/colorOnSurface, giúp bạn dễ dàng truy cập vào các màu phù hợp. Bạn có thể tuỳ chỉnh các thuộc tính này trong giao diện.

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. Sau đây là các tuỳ chọn được đề xuất:

  • Nhạt
  • Tối
  • Theo giá trị mặc định của hệ thống (lựa chọn mặc định được đề xuất)

Những tuỳ chọn này liên kết trực tiếp với các chế độ AppCompat.DayNight:

Để chuyển đổi giao diện, hãy làm như sau:

Buộc chế độ tối

Android 10 cung cấp Buộc chế độ tối, một tính năng giúp các nhà phát triển nhanh chóng triển khai giao diện tối mà không cần cài đặt rõ ràng giao diện DayNight.

Tính năng Buộc chế độ tối phân tích từng khung hiển thị của ứng dụng có giao diện sáng và tự động á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à phương thức triển khai gốc để giảm thiểu thời gian cần thiết cho việc triển khai giao diện tối.

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 giao diện của hoạt động. Thuộc tính này được đặt trên tất cả các giao diện sáng do hệ thống và AndroidX cung cấp, chẳng hạn như Theme.Material.Light. Khi bạn sử dụng tính năng Buộc chế độ tối, hãy 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 tối sẽ không được áp dụng. Tương tự, nếu giao diện của ứng dụng kế thừa từ giao diện DayNight, thì tính năng Buộc tối sẽ không được áp dụng do quá trình chuyển đổi giao diện tự động.

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 khung hiển thị cụ thể bằng thuộc tính bố cục android:forceDarkAllowed hoặc bằng setForceDarkAllowed().

Nội dung 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. Để xem 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á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 kiểm soát, hãy đảm bảo rằng 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. Điều này có nghĩa là hệ thống chịu trách nhiệm áp dụng đúng kiểu 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, hãy kiểm thử nội dung trên cả giao diện sáng lẫn tối.

Những lỗi phổ biến cần lưu ý 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 sử dụng các thuộc tính giao diện thích hợp thay vì màu được cố định giá trị trong mã.

Màn hình khởi chạy

Nếu ứng dụng có màn hình chạy tuỳ chỉnh, thì bạn có thể 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 thành màu trắng) theo phương thức lập trình. Thay vào đó, hãy dùng thuộc tính giao diện ?android:attr/colorBackground.

Thay đổi về cấu hình

Khi thay đổi giao diện của ứng dụng, thông qua chế độ cài đặt hệ thống hoặc AppCompat, giao diện sẽ kích hoạt thay đổi cấu hình uiMode. Đ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, có thể bạn muốn một ứng dụng xử lý thay đổi về 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.

Một ứ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 về cấu hình uiMode:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

Khi một Activity khai báo rằng nó xử lý các thay đổi về cấu hình, phương thức onConfigurationChanged() của nó sẽ được gọi khi có sự thay đổi về 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;
}