Giao diện tối

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Giao diện tối có sẵn trên Android 10 (API cấp 29) trở lên. Giao diện này mang lại nhiều lợi ích như sau:

  • Có thể làm giảm đáng kể mức sử dụng năng lượng (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 mọi người dễ dàng sử dụng thiết bị trong môi trường ánh sáng yếu.

Chế độ Giao diện tối áp dụng cho cả 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 (API cấp 29) trở lên:

  • Sử dụng tuỳ chọn cài đặt hệ thống (Cài đặt -> Hiển thị -> Chủ đề) để 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 đã bật).
  • Trên các thiết bị Pixel, Giao diện tối sẽ được bật khi chọn chế độ Tiết kiệm pin. Các OEM khác có thể hỗ trợ hành vi này hoặc không.

Để 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, bạn phải thiết lập giao diện của ứng dụng (thường có trong res/values/styles.xml) để kế thừa giao diện DayNight như sau:

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

Bạn cũng có thể sử dụng giao diện tối của MaterialComponents như sau:

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

Cách 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 Giao diện tối mặc định (khi được bật).

Giao diện và kiểu

Giao diện và kiểu nên tránh các màu sắc hoặc biểu tượng được mã hoá cứng nhằm sử dụng trong giao diện sáng. Bạn nên (ưu tiên) sử dụng các thuộc tính giao diện hoặc các tài nguyên phù hợp cho giao diện tối.

Dưới đây là hai thuộc tính giao diện quan trọng nhất mà bạn cần biết:

  • ?android:attr/textColorPrimary Đây là màu văn bản được dùng cho mục đích chung. Đây là 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 cho mục đích chung. Thành phần này chứa trạng thái tắt.

Bạn nên sử dụng Các thành phần Material Design vì hệ thống chủ đề màu sắc (chẳng hạn như các thuộc tính giao diện ?attr/colorSurface và ?attr/colorOnSurface) cung cấp quyền truy cập dễ dàng vào các màu phù hợp. Tất nhiên, 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ể muốn 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. Ứng dụng có thể cho phép người dùng chọn giữa các giao diện. Các tuỳ chọn được đề xuất gồm có:

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

Mỗi tuỳ chọn liên kết trực tiếp với một trong các chế độ AppCompat.DayNight:

Để chuyển đổi giao diện, hãy gọi AppCompatDelegate.setDefaultNightMode().

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 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 thiết lập thủ công giao diện DayNight như mô tả ở trên.

Tính năng Buộc chế độ tối phân tích từng khung nhìn của ứng dụng giao diện sáng và tự động áp dụng giao diện tối trước khi được vẽ ra màn hình. Một số nhà phát triển sử dụng kết hợp chế độ triển khai gốc và Buộc chế độ tối để giảm thiểu thời gian cần thiết để 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 thiết lập android:forceDarkAllowed="true" trong giao diện của hoạt động. Thuộc tính này được thiết lập cho tất cả các hệ thống và AndroidX cung cấp các giao diện sáng, chẳng hạn như Theme.Material.Light. Khi sử dụng tính năng Buộc chế độ tối, bạn nên nhớ kiểm thử ứng dụng kỹ lưỡng và loại trừ các khung nhìn nếu cần.

Nếu ứng dụng sử 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 đượ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 chế độ 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 Buộc chế độ tối trong một số khung nhìn 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ụ áp dụng giao diện tối, hãy xem bản minh hoạ WebView trên GitHub.

Những 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 bề mặt 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, điều quan trọng là cần đảm bảo rằng mọi khung nhìn sử dụng đều phản ánh giao diện của ứng dụng chủ. Thông báo và tiện ích trình chạy là hai ví dụ điển hình.

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 đảm bảo áp dụng đúng kiểu cho khung nhìn.

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 sử dụng các khung nhìn nội dung thông báo tuỳ chỉnh, bạn cần kiểm thử nội dung trên cả Giao diện sáng và Giao diện tối.

Những sai lầm phổ biến cần chú ý:

  • Giả định màu nền luôn là màu sáng
  • Mã hoá cứng màu văn bản
  • Thiết lập màu nền được mã hoá cứng trong khi sử dụng màu văn bản mặc định
  • Sử dụng một 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 mã hoá cứng.

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

Nếu ứng dụng có màn hình khởi chạy tuỳ chỉnh, ứng dụng đó có thể cần được chỉnh sửa để phù hợp với giao diện đã chọn.

Xoá bất kỳ màu nào được mã hoá cứng, ví dụ như bất kỳ điểm màu nền có thể là màu trắng. Thay vào đó, hãy sử dụng thuộc tính giao diện ?android:attr/colorBackground.

Lưu ý rằng các đối tượng có thể kéo android:windowBackground theo giao diện tối chỉ hoạt động trên Android 10.

Thay đổi cấu hình

Khi thay đổi giao diện của ứng dụng (thông qua tuỳ chọn cài đặt hệ thống hoặc AppCompat), giao diện sẽ kích hoạt 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, 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ể tự xử lý việc triển khai Giao diện tối bằng cách khai báo rằng mỗi Hoạt động có thể xử lý thay đổi cấu hình uiMode như sau:

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

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