Mã cho giao diện người dùng của Trung tâm an toàn nằm trong thư mục trung safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/ . Tùy chỉnh giao diện người dùng 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 Thay đổi giá trị tài nguyên của ứng dụng khi chạy .
Chủ đề và màu sắc của Trung tâm An toàn
Trung tâm An toàn có bốn chủ đề chính có chung thuộc tính giao diện người dùng:
- Đèn trung tâm an toàn
- Trung tâm an toàn tối
- Đèn Cài đặt nhanh của Trung tâm An toàn
- Trung tâm an toàn Cài đặt nhanh màu tối
Chủ đề của Trung tâm An toàn chứa các màu mặc định. Màu giao diện người dùng chính được lấy từ màu hệ thống Android và có thể tự động điều chỉnh theo tùy chỉnh chung của 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 kiểu dáng Material You trong Android.
Bạn có thể thay đổi màu của Trung tâm An toàn bằng cách ghi đè giá trị của chúng.
| Màu giao diện người dùng của Trung tâm an toàn | Tên thuộc tính | Nguồn |
|---|---|---|
| Lý lịch | 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 phụ | android:textColorSecondary | @android:color/text_color_secondary |
| Biểu tượng | android:textColorSecondary | @android:color/text_color_secondary |
| Nguồn | Giá trị mặc định |
|---|---|
@color/sc_surface_light | @android:color/system_neutral1_500 với giá trị sao L là 98 (độ sáng 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 |
Vấn đề màu sắc nghiêm trọng
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ây cho các vấn đề về thông tin và trạng thái OK
- Màu vàng cho khuyến nghị
- Màu đỏ cho các vấn đề nghiêm trọng
- Màu xám vì thiếu thông tin
Theo mặc định, những màu này được lấy từ bảng màu Google Material. Chúng tôi khuyên bạn nên giữ lại những màu cơ bản này nhưng bạn có thể sử dụng các sắc thái khác nhau của bảng màu xanh lá cây, vàng và đỏ.
Các thuộc tính màu này được sử dụng để liên kết các mục có màu sắ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ác biểu tượng, nút cũng như hoạt ảnh quét và thay đổi trạng thái. Việc sửa đổi những màu này sẽ làm thay đổi màu sắc của tất cả các phần tử. Ví dụ: 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à hoạt ảnh của nền trong quá trình quét.
Chủ đề Cài đặt nhanh của Trung tâm An toàn sử dụng các 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 | Thành phầ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) | Khiên trạng thái | ?attr/colorScStatusInfo | Ánh sáng: Xanh 600 (#1e8e3e) Tối: Xanh 500 (#34a853) |
| Thùng chứa lá chắn trạng thái | ?attr/colorScStatusBackgroundInfo | Ánh sáng: Xanh 100 (#ceead6)colorSurfaceVariant | |
| Biểu tượng | ?attr/colorScIconInfo | Xanh 500 (#34a853) | |
| Nút hành động chính | @color/safety_center_button_info | Xanh 400 (#5bb974) | |
| Nút hành động phụ | @color/safety_center_outline_button_info | Xanh 300 (#81c995) | |
| Khuyến nghị (Vàng) | Khiên trạng thái | ?attr/colorScStatusRecommend | Ánh sáng: Vàng 600 (#f9ab00) Tối: Vàng 500 (#fbbc04) |
| Thùng chứa lá chắn trạng thái | ?attr/colorScStatusBackgroundRecommend | Ánh 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 (Đỏ) | Khiên trạng thái | ?attr/colorScStatusWarn | Ánh sáng: Đỏ 600 (#d93025) Tối: Đỏ 500 (#ea4335) |
| Thùng chứa lá chắn trạng thái | ?attr/colorScStatusBackgroundWarn | Ánh 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ó khuyến nghị (Xám) | Biểu tượng | ?attr/colorScIconNull | Xám 600 (#80868b) |
Trong Android 14, tài nguyên màu có thể phủ đã được thêm cho từng thuộc tính màu chủ đề và một số màu mặc định đã được sửa đổi:
| Tên tài nguyên | Màu nền của Android 13 | Màu nền của Android 14 | Mã hex Android 14 |
|---|---|---|---|
@color/sc_status_info_light | Xanh 600 | Màu xanh ngữ nghĩa | #0E8435 |
@color/sc_status_recommend_light | Vàng 600 | Không thay đổi | |
@color/sc_status_warn_light | Đỏ 600 | Không thay đổi | |
@color/sc_status_info_dark | Xanh 500 | Xanh 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 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 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 500 | Xanh 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ó sẵn | Xám 900 | #202124 |
Màu giao diện người dùng
Trạng thái xanh
| Lá chắn xanh | |
|---|---|
| #1E8E3E (xanh/600) |
| Chủ đề tối #34A853 (xanh/500) | |
| Thùng màu xanh lá cây | |
|---|---|
| #CEEAD6 (xanh/100) |
| Chủ đề tối #474741 | |
| Biểu tượng cài đặt màu xanh lá cây | |
|---|---|
| #34A853 (xanh/500) |
| Chủ đề tối #34A853 (xanh/500) | |
| Nút quét | |
|---|---|
| Nút màu xanh lá cây |
| #5BB974 (xanh/400) | |
| Tiêu đề | Phụ đề |
|
|
|---|---|
| #1B1C17 (TextColorPrimary) | #46483B (TextColorSecondary) |
Trạng thái màu vàng
| Khiên vàng | |
|---|---|
| #F9AB00 (Vàng/600) |
| Chủ đề tối #FBBC04 (vàng/500) | |
| Thùng màu vàng | |
|---|---|
| #FEEFC3 (vàng/100) |
| Chủ đề tối #474741 (vàng/500) | |
| Biểu tượng cài đặt màu vàng | |
|---|---|
| #FBBC04 (vàng/500) |
| Chủ đề 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 màu đỏ
| lá chắn đỏ | |
|---|---|
| #D93025 (Đỏ/600) |
| Chủ đề tối #EA4335 (đỏ/500) | |
| Thùng màu đỏ | |
|---|---|
| #FAD2CF (đỏ/100) |
| Chủ đề tối #474741 | |
| Biểu tượng cài đặt màu đỏ | |
|---|---|
| #EA4335 (đỏ/500) |
| Chủ đề 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à sự xuất hiện của văn bản
Phông chữ và hình thức 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à phải kế thừa mọi thay đổi đối với họ phông chữ, trọng lượng và các thuộc tính khác đã được OEM định cấu hình cho kiểu trên toàn thiết bị của họ. Giao diện văn bản của Trung tâm An toàn có thể được ghi đè trực tiếp bằng RRO.
| Xuất hiện văn bản của Trung tâm an toàn | Cơ sở mặc định của thiết bị | Màu sắc | Kích cỡ | Cân nặng |
|---|---|---|---|---|
TextAppearance.SafetyCenter.Headline | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | Khác nhau | Thường xuyên |
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 | Khác nhau | 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 xuyên |
Khoảng cách và phong cách
Trung tâm An toàn sử dụng một tập hợp các giá trị khoảng đệm mặc định 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 ngày |
@dimen/sc_spacing_medium | 14 ngày |
@dimen/sc_spacing_large | 16 ngày |
@dimen/sc_spacing_xlarge | 18 ngày |
@dimen/sc_spacing_xxlarge | 20 dp |
@dimen/sc_spacing_xxxlarge | 24 ngày |
Bạn có thể tùy chỉnh bán kính góc của thẻ Trung tâm an toàn. Bán kính kích thước một góc được sử dụng cho các nút và ba kích thước góc được sử dụng 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 ngày |
@dimen/sc_card_corner_radius_large | 28 ngày |
@dimen/sc_card_corner_radius_medium | 20 dp |
@dimen/sc_card_corner_radius_xsmall | 4 dp |
Ô Cài đặt nhanh
Có thể truy cập 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 giao diện người dùng từ màn hình Trung tâm an toàn để các lớp phủ có thể hoạt động:
- Dịch vụ lát cài đặt nhanh:
SafetyCenterQsTileService.kt - Hoạt động Cài đặt nhanh:
SafetyCenterQsActivity.java