Tuỳ chỉnh giao diện người dùng của Trung tâm an toàn

Mã cho giao diện người dùng của Trung tâm an toàn nằm trong thư mục safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/. Tuỳ chỉnh giao diện người dùng của Trung tâm an toàn bằng cách sử dụng Lớp phủ tài nguyên thời gian chạy (RRO) trong thư mục lớp phủ OEM. Để biết thông tin về RRO, hãy xem phần Thay đổi giá trị tài nguyên của ứng dụng trong thời gian chạy.

Giao diện và màu sắc của Trung tâm an toàn

Trung tâm bảo mật có 4 giao diện chính có cùng các thuộc tính giao diện người dùng:

  • Đèn Trung tâm an toàn
  • Trung tâm an toàn ở chế độ tối
  • Đèn Cài đặt nhanh của Trung tâm bảo mật
  • Trình đơn Cài đặt nhanh của Trung tâm an toàn, tối

Giao diện Trung tâm bảo mật có các màu mặc định. Màu sắc nguyên tắc của giao diện người dùng được lấy từ màu hệ thống Android và có thể tự động điều chỉnh theo chế độ tuỳ chỉnh chung của nhà sản xuất thiết bị gốc (OEM) về màu Android. Theo mặc định, những màu này sẽ điều chỉnh như một phần của tính năng tạo kiểu Material You trong Android.

Bạn có thể thay đổi màu sắc của Trung tâm an toàn bằng cách ghi đè các giá trị của màu sắc đó.

Màu giao diện người dùng của Trung tâm an toàn Tên thuộc tính Tài nguyên
Thông tin khái quát android:colorBackground @android:color/background_device_default_light
@android:color/primary_dark_device_default_settings
Bề mặt colorSurface @color/sc_surface_light @color/sc_surface_dark
Biến thể bề mặt colorSurfaceVariant @color/sc_surface_variant_light
@color/sc_surface_variant_dark
Văn bản chính android:textColorPrimary @android:color/text_color_primary
Văn bản thứ cấp android:textColorSecondary @android:color/text_color_secondary
Biểu tượng android:textColorSecondary @android:color/text_color_secondary
Tài nguyên Giá trị mặc định
@color/sc_surface_light @android:color/system_neutral1_500 có giá trị sao L là 98 (độ chói cảm nhận)
@color/sc_surface_dark @android:color/system_neutral1_800
@color/sc_surface_variant_light @android:color/system_neutral2_100
@color/sc_surface_variant_dark @android:color/system_neutral1_700

Màu sắc thể hiện mức độ nghiêm trọng của vấn đề

Trung tâm an toàn thông báo mức độ nghiêm trọng của vấn đề bằng hệ thống màu đèn giao thông:

  • Màu xanh lục cho các vấn đề thông tin và trạng thái OK
  • Màu vàng cho nội dung đề xuất
  • Màu đỏ cho các vấn đề nghiêm trọng
  • Màu xám cho biết không có thông tin

Theo mặc định, các màu này được lấy từ bảng màu Google Material. Bạn nên giữ nguyên các màu cơ bản này, nhưng có thể sử dụng nhiều sắc thái khác nhau của bảng màu xanh lục, vàng và đỏ.

Các thuộc tính màu này được dùng để liên kết các mục có màu theo mức độ nghiêm trọng trong giao diện người dùng của Trung tâm an toàn, bao gồm cả biểu tượng, nút và ảnh động quét cũng như thay đổi trạng thái. Việc sửa đổi các màu này sẽ tô màu lại tất cả phần tử. Ví dụ: việc sửa đổi @color/sc_status_info_{light,dark} sẽ thay đổi màu nền trong cả hình ảnh trạng thái tĩnh và ảnh động của nền trong quá trình quét.

Giao diện Cài đặt nhanh của Trung tâm an toàn sử dụng màu chế độ tối, cho dù thiết bị có được đặt ở chế độ tối hay không.

Mức độ nghiêm trọng Phần tử trên giao diện người dùng Tên thuộc tính hoặc tài nguyên Màu mặc định
Thông tin (Xanh lục) Khiên trạng thái ?attr/colorScStatusInfo Sáng: Xanh lục 600 (#1e8e3e)
Tối: Xanh lục 500 (#34a853)
Vùng chứa khiên trạng thái ?attr/colorScStatusBackgroundInfo Sáng: Xanh lục 100 (#ceead6)
colorSurfaceVariant
Biểu tượng ?attr/colorScIconInfo Xanh lục 500 (#34a853)
Nút hành động chính @color/safety_center_button_info Xanh lục 400 (#5bb974)
Nút hành động phụ @color/safety_center_outline_button_info Xanh lục 300 (#81c995)
Đề xuất (Màu vàng) Thẻ thông tin trạng thái ?attr/colorScStatusRecommend Sáng: Vàng 600 (#f9ab00)
Tối: Vàng 500 (#fbbc04)
Vùng chứa thẻ trạng thái ?attr/colorScStatusBackgroundRecommend Sáng: Vàng 100 (#feefc3)
Tối: colorSurfaceVariant
Biểu tượng ?attr/colorScIconRecommend Vàng 500 (#fbbc04)
Nút hành động chính @color/safety_center_button_recommend Vàng 400 (#fcc934)
Nút hành động phụ @color/safety_center_outline_button_recommend Vàng 300 (#fdd663)
Cảnh báo (Màu đỏ) Thẻ thông tin trạng thái ?attr/colorScStatusWarn Sáng: Đỏ 600 (#d93025)
Tối: Đỏ 500 (#ea4335)
Vùng chứa thẻ trạng thái ?attr/colorScStatusBackgroundWarn Sáng: Đỏ 100 (#fad2cf)
Tối: colorSurfaceVariant
Biểu tượng ?attr/colorScIconWarn Đỏ 500 (#ea4335)
Nút hành động chính @color/safety_center_button_warn Đỏ 400 (#ee675c)
Nút hành động phụ @color/safety_center_outline_button_warn Đỏ 300 (#f28b82)
Không có đề xuất (Xám) Biểu tượng ?attr/colorScIconNull Xám 600 (#80868b)

Trong Android 14, các tài nguyên màu có thể phủ đã được thêm vào cho mỗi thuộc tính màu giao diện và một số màu mặc định đã được sửa đổi:

Tên tài nguyên Màu hỗ trợ trên Android 13 Màu hỗ trợ trên Android 14 Mã thập lục phân Android 14
@color/sc_status_info_light Xanh lục 600 Semantic Green #0E8435
@color/sc_status_recommend_light Vàng 600 Không thay đổi
@color/sc_status_warn_light Red 600 Không thay đổi
@color/sc_status_info_dark Xanh lục 500 Xanh lục 400 #5BB974
@color/sc_status_recommend_dark Vàng 500 Vàng 400 #FCC934
@color/sc_status_warn_dark Đỏ 500 Đỏ 400 #EE675C
@color/sc_status_background_info_light Xanh lục 100 Không thay đổi
@color/sc_status_background_recommend_light Vàng 100 Không thay đổi
@color/sc_status_background_warn_light Đỏ 100 Không thay đổi
@color/sc_status_background_info_dark sc_surface_variant_dark Không thay đổi
@color/sc_status_background_recommend_dark sc_surface_variant_dark Không thay đổi
@color/sc_status_background_warn_dark sc_surface_variant_dark Không thay đổi
@color/sc_icon_info_light Xanh lục 500 Không thay đổi
@color/sc_icon_recommend_light Vàng 500 Không thay đổi
@color/sc_icon_warn_light Đỏ 500 Không thay đổi
@color/sc_icon_null_light Xám 600 Không thay đổi
@color/sc_icon_info_dark Xanh lục 500 Xanh lục 400
@color/sc_icon_recommend_dark Vàng 500 Vàng 400
@color/sc_icon_warn_dark Đỏ 500 Đỏ 400
@color/sc_icon_null_dark Xám 600 Xám 400 #BDC1C6
@color/sc_shield_accent_dark Không có Xám 900 #202124

Màu giao diện người dùng

Trạng thái xanh lục

Green Shield

#1E8E3E (xanh lục/600)
Giao diện tối
#34A853 (xanh lục/500)
Vùng chứa màu xanh lục

#CEEAD6 (xanh lục/100)
Giao diện tối
#474741
Biểu tượng chế độ cài đặt màu xanh lục

#34A853 (xanh lục/500)
Giao diện tối
#34A853 (xanh lục/500)
Nút quét

Nút màu xanh lục
#5BB974 (xanh lục/400)
Tiêu đề Phụ đề

#1B1C17 (TextColorPrimary) #46483B (TextColorSecondary)

Trạng thái vàng

Yellow Shield

#F9AB00 (Vàng/600)
Giao diện tối
#FBBC04 (vàng/500)
Vùng chứa màu vàng

#FEEFC3 (vàng/100)
Giao diện tối
#474741 (vàng/500)
Biểu tượng cài đặt màu vàng

#FBBC04 (vàng/500)
Giao diện tối
#FBBC04 (vàng/500)
Nút quét

Nút màu vàng
#5BB974 (Vàng/400)
Tiêu đề Phụ đề

#1B1C17 (TextColorPrimary) #46483B (TextColorSecondary)

Trạng thái đỏ

Bảo vệ Đỏ

#D93025 (Đỏ/600)
Giao diện tối
#EA4335 (đỏ/500)
Vùng chứa màu đỏ

#FAD2CF (đỏ/100)
Giao diện tối
#474741
Biểu tượng cài đặt màu đỏ

#EA4335 (đỏ/500)
Giao diện tối
#EA4335 (đỏ/500)
Nút Gỡ cài đặt

Nút màu đỏ
#EE675C (đỏ/400)
Tiêu đề Phụ đề

#1B1C17 (TextColorPrimary) #46483B (TextColorSecondary)

Phông chữ và giao diện văn bản

Phông chữ và giao diện văn bản của Trung tâm an toàn dựa trên giao diện văn bản mặc định của Android và sẽ kế thừa mọi thay đổi đối với một bộ phông chữ, độ đậm và các thuộc tính khác mà nhà sản xuất thiết bị gốc (OEM) đã định cấu hình cho các kiểu trên toàn thiết bị. Bạn có thể ghi đè trực tiếp giao diện văn bản của Trung tâm an toàn bằng cách sử dụng RRO.

Giao diện văn bản của Trung tâm an toàn Cơ sở DeviceDefault Màu Kích thước Cân nặng
TextAppearance.SafetyCenter.Headline TextAppearance.DeviceDefault.Headline android:textColorPrimary Thay đổi Thông dụng
TextAppearance.SafetyCenter.Headline.Status TextAppearance.DeviceDefault.Headline android:textColorPrimary 22 sp/28 sp ".
TextAppearance.SafetyCenter.Headline.Issue TextAppearance.DeviceDefault.Headline android:textColorPrimary 18 sp/24 sp ".
TextAppearance.SafetyCenter.Headline.Entry TextAppearance.DeviceDefault.Headline android:textColorPrimary 20 sp/24 sp ".
TextAppearance.SafetyCenter.Medium TextAppearance.DeviceDefault.Medium Thay đổi 14 sp/20 sp hoặc
16 sp/24 sp		 Trung bình
TextAppearance.SafetyCenter.Body TextAppearance.DeviceDefault.Small android:textColorSecondary 14 sp/20 sp Thông dụng

Giãn cách và kiểu

Trung tâm an toàn sử dụng một bộ giá trị khoảng đệm mặc định chung cho khoảng đệm và lề. Thay đổi mật độ thông tin của Trung tâm an toàn bằng cách ghi đè các giá trị khoảng cách.

Tên tài nguyên Giá trị mặc định
@dimen/sc_spacing_xxxsmall 2 dp
@dimen/sc_spacing_xxsmall 4 dp
@dimen/sc_spacing_xsmall 8 dp
@dimen/sc_spacing_small 12 dp
@dimen/sc_spacing_medium 14 dp
@dimen/sc_spacing_large 16 dp
@dimen/sc_spacing_xlarge 18 dp
@dimen/sc_spacing_xxlarge 20 dp
@dimen/sc_spacing_xxxlarge 24 dp

Bạn có thể tuỳ chỉnh bán kính góc của các thẻ trong Trung tâm an toàn. Một bán kính kích thước góc được dùng cho các nút và 3 kích thước góc cho thẻ Trung tâm an toàn:

Tên tài nguyên Giá trị mặc định
@dimen/sc_button_corner_radius 12 dp
@dimen/sc_card_corner_radius_large 28 dp
@dimen/sc_card_corner_radius_medium 20 dp
@dimen/sc_card_corner_radius_xsmall 4 dp

Ô Cài đặt nhanh

Bạn có thể truy cập vào Trung tâm an toàn từ ô Cài đặt nhanh được triển khai trong mô-đun PermissionController. Ô Cài đặt nhanh sử dụng lại một số thành phần trên giao diện người dùng trên màn hình của Trung tâm an toàn để các lớp phủ có thể hoạt động: