Il codice dell'interfaccia utente del Centro per la sicurezza online si trova nella directory safetycenter
packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/
Personalizza l'interfaccia utente del Centro per la sicurezza online utilizzando gli overlay delle risorse di runtime (RRO) nel
Cartella overlay dell'OEM. Per informazioni sugli RRO, consulta l'articolo Modificare il valore del parametro
delle risorse in fase di runtime.
Temi e colori del Centro per la sicurezza online
Il Centro per la sicurezza online ha quattro temi principali che condividono gli stessi attributi dell'interfaccia utente:
- Spia del Centro per la sicurezza online
- Centro per la sicurezza online, carnagione scura
- Spia Impostazioni rapide del Centro per la sicurezza online
- Impostazioni rapide del Centro per la sicurezza online, carnagione scura
I temi del Centro per la sicurezza online contengono colori predefiniti. Vengono disegnati i principali colori dell'interfaccia utente dai colori del sistema Android e può adattarsi automaticamente alle specifiche personalizzazione del colore Android. Per impostazione predefinita, questi colori si adattano Stili Material You su Android.
Puoi modificare i colori del Centro per la sicurezza online eseguendo l'override dei relativi valori.
Colore UI Centro per la sicurezza online | Nome attributo | Risorsa |
---|---|---|
Premessa | android:colorBackground |
@android:color/background_device_default_light @android:color/primary_dark_device_default_settings |
Surface | colorSurface |
@color/sc_surface_light
@color/sc_surface_dark |
Variante superficie | colorSurfaceVariant |
@color/sc_surface_variant_light @color/sc_surface_variant_dark |
Testo principale | android:textColorPrimary |
@android:color/text_color_primary |
Testo secondario | android:textColorSecondary |
@android:color/text_color_secondary |
Icone | android:textColorSecondary |
@android:color/text_color_secondary |
Risorsa | Valore predefinito |
---|---|
@color/sc_surface_light |
@android:color/system_neutral1_500 con un valore stella L
di 98 (luminanza percettiva) |
@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
|
Colori con gravità del problema
Il Centro per la sicurezza online comunica la gravità del problema con un sistema di colori a semaforo:
- Verde per problemi informativi e stato OK
- Giallo per i consigli
- Rosso per problemi gravi
- Grigio indica un'assenza di informazioni
Per impostazione predefinita, questi colori vengono selezionati dalla tavolozza dei colori Materiale Google. Me consigliamo di mantenere questi colori della base, ma puoi usare tonalità diverse di i colori verde, giallo e rosso.
Questi attributi di colore vengono utilizzati per associare articoli con un colore di gravità nel
UI del Centro per la sicurezza online con icone, pulsanti, scansione e modifica dello stato
le animazioni. La modifica di questi colori comporta la ricolorazione di tutti gli elementi. Ad esempio, la modifica
@color/sc_status_info_{light,dark}
cambia il colore dello sfondo sia in
immagine di stato statica e animazione dello sfondo durante una scansione.
Il tema Impostazioni rapide del Centro per la sicurezza online utilizza i colori della modalità Buio, indipendentemente dal fatto che dispositivo è impostato in modalità Buio.
Gravità | Elemento UI | Nome dell'attributo o della risorsa | Colore predefinito |
---|---|---|---|
Informazioni (verde) | Scudo dello status | ?attr/colorScStatusInfo |
Chiaro: verde 600 (#1e8e3e) Scuro: verde 500 (#34a853) |
Contenitore Status Shield | ?attr/colorScStatusBackgroundInfo |
Chiaro: verde 100 (#ceead6)colorSurfaceVariant |
|
Icona | ?attr/colorScIconInfo |
Verde 500 (#34a853) | |
Pulsante di azione principale | @color/safety_center_button_info |
Verde 400 (#5bb974) | |
Pulsante di azione secondario | @color/safety_center_outline_button_info |
Verde 300 (#81c995) | |
Consiglio (giallo) | Scudo dello status | ?attr/colorScStatusRecommend |
Chiaro: giallo 600 (#f9ab00) Scuro: giallo 500 (#fbbc04) |
Contenitore Status Shield | ?attr/colorScStatusBackgroundRecommend |
Chiaro: giallo 100 (#feefc3) Scuro: colorSurfaceVariant |
|
Icona | ?attr/colorScIconRecommend |
Giallo 500 (#fbbc04) | |
Pulsante di azione principale | @color/safety_center_button_recommend |
400 gialli (#fcc934) | |
Pulsante di azione secondario | @color/safety_center_outline_button_recommend |
Giallo 300 (#fdd663) | |
Avviso (rosso) | Scudo dello status | ?attr/colorScStatusWarn |
Luce: rosso 600 (#d93025) Scuro: rosso 500 (#ea4335) |
Contenitore Status Shield | ?attr/colorScStatusBackgroundWarn |
Chiaro: rosso 100 (#fad2cf) Scuro: colorSurfaceVariant |
|
Icona | ?attr/colorScIconWarn |
Rosso 500 (#ea4335) | |
Pulsante di azione principale | @color/safety_center_button_warn |
Rosso 400 (#ee675c) | |
Pulsante di azione secondario | @color/safety_center_outline_button_warn |
Rosso 300 (#f28b82) | |
Nessun consiglio (grigio) | Icona | ?attr/colorScIconNull |
Grigio 600 (#80868b) |
In Android 14, sono state aggiunte risorse di colore sovrapponibili per ciascuna proprietà dei colori del tema e alcuni colori predefiniti sono stati modificati:
Nome risorsa | Colore del retro di Android 13 | Colore del retro di Android 14 | Codice esadecimale Android 14 |
---|---|---|---|
@color/sc_status_info_light |
Verde 600 | Verde semantico | #0E8435 |
@color/sc_status_recommend_light |
Giallo 600 | Invariato | |
@color/sc_status_warn_light |
Rosso 600 | Invariato | |
@color/sc_status_info_dark |
Verde 500 | Verde 400 | #5BB974 |
@color/sc_status_recommend_dark |
Giallo 500 | Giallo 400 | #FCC934 |
@color/sc_status_warn_dark |
Rosso 500 | Rosso 400 | #EE675C |
@color/sc_status_background_info_light |
Verde 100 | Invariato | |
@color/sc_status_background_recommend_light |
Giallo 100 | Invariato | |
@color/sc_status_background_warn_light |
Rosso 100 | Invariato | |
@color/sc_status_background_info_dark |
variante_sc_surface_dark | Invariato | |
@color/sc_status_background_recommend_dark |
variante_sc_surface_dark | Invariato | |
@color/sc_status_background_warn_dark |
variante_sc_surface_dark | Invariato | |
@color/sc_icon_info_light |
Verde 500 | Invariato | |
@color/sc_icon_recommend_light |
Giallo 500 | Invariato | |
@color/sc_icon_warn_light |
Rosso 500 | Invariato | |
@color/sc_icon_null_light |
Grigio 600 | Invariato | |
@color/sc_icon_info_dark |
Verde 500 | Verde 400 | |
@color/sc_icon_recommend_dark |
Giallo 500 | Giallo 400 | |
@color/sc_icon_warn_dark |
Rosso 500 | Rosso 400 | |
@color/sc_icon_null_dark |
Grigio 600 | Grigio 400 | #BDC1C6 |
@color/sc_shield_accent_dark |
Non disponibile | Grigio 900 | #202124 |
Colori UI
Stato verde
Scudo verde | |
---|---|
#1E8E3E (verde/600) | |
Tema scuro #34A853 (verde/500) |
Contenitore verde | |
---|---|
#CEEAD6 (verde/100) | |
Tema scuro #474741 |
Icona delle impostazioni verde | |
---|---|
#34A853 (verde/500) | |
Tema scuro #34A853 (verde/500) |
Pulsante Cerca | |
---|---|
Pulsante verde | |
#5BB974 (verde/400) |
Titolo | Sottotitolo |
---|---|
#1B1C17 (ColoreColorePrincipale) | #46483B (ColoreTestoSecondario) |
Stato giallo
Scudo giallo | |
---|---|
#F9AB00 (Giallo/600) | |
Tema scuro #FBBC04 (giallo/500) |
Contenitore giallo | |
---|---|
#feeFC3 (giallo/100) | |
Tema scuro #474741 (giallo/500) |
Icona delle impostazioni gialla | |
---|---|
#FBBC04 (giallo/500) | |
Tema scuro #FBBC04 (giallo/500) |
Pulsante Cerca | |
---|---|
Pulsante giallo | |
#5BB974 (Giallo/400) |
Titolo | Sottotitolo |
---|---|
#1B1C17 (ColoreColorePrincipale) | #46483B (ColoreTestoSecondario) |
Stato rosso
Scudo rosso | |
---|---|
#D93025 (Rosso/600) | |
Tema scuro #EA4335 (rosso/500) |
Contenitore rosso | |
---|---|
#FAD2CF (rosso/100) | |
Tema scuro #474741 |
Icona delle impostazioni rossa | |
---|---|
#EA4335 (rosso/500) | |
Tema scuro #EA4335 (rosso/500) |
Pulsante Disinstalla | |
---|---|
Pulsante rosso | |
#EE675C (rosso/400) |
Titolo | Sottotitolo |
---|---|
#1B1C17 (ColoreColorePrincipale) | #46483B (ColoreTestoSecondario) |
Caratteri e aspetto del testo
I caratteri e l'aspetto del testo del Centro per la sicurezza online si basano sul testo predefinito di Android l'aspetto e devono ereditare eventuali modifiche apportate a famiglia di caratteri, spessore e altri già configurate dagli OEM negli stili a livello di dispositivo. Centro per la sicurezza online l'aspetto del testo può essere sostituito direttamente utilizzando gli RRO.
Aspetto del testo del Centro per la sicurezza online | Base DeviceDefault | Colore | Dimensioni | Peso |
---|---|---|---|---|
TextAppearance.SafetyCenter.Headline |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
Varia | Periodici |
TextAppearance.SafetyCenter.Headline.Status |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
22 m/28 m | " |
TextAppearance.SafetyCenter.Headline.Issue |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
18 m/24 m | " |
TextAppearance.SafetyCenter.Headline.Entry |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
20 m/24 m | " |
TextAppearance.SafetyCenter.Medium |
TextAppearance.DeviceDefault.Medium |
Varia | 14 sp/20 sp o 16 m/24 m |
Medio |
TextAppearance.SafetyCenter.Body |
TextAppearance.DeviceDefault.Small |
android:textColorSecondary |
14 m/20 m | Periodici |
Spaziatura e stili
Il Centro per la sicurezza online utilizza un insieme di valori di spaziatura interna predefiniti universali per la spaziatura interna e margini. Modifica la densità delle informazioni del Centro per la sicurezza online eseguendo l'override della spaziatura e i relativi valori.
Nome della risorsa | Valore predefinito |
---|---|
@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 |
Puoi personalizzare i raggi degli angoli delle schede Centro per la sicurezza online. Un angolo raggio viene utilizzato per i pulsanti e vengono utilizzate tre dimensioni degli angoli per il Centro per la sicurezza online schede:
Nome della risorsa | Valore predefinito |
---|---|
@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 |
Riquadro Impostazioni rapide
Il Centro per la sicurezza online è accessibile da un riquadro Impostazioni rapide implementato in Modulo PermissionController. Il riquadro Impostazioni rapide riutilizza parte dell'UI dalle schermate del Centro per la sicurezza online in modo che gli overlay possano funzionare:
- Servizio riquadro Impostazioni rapide:
SafetyCenterQsTileService.kt
- Attività relativa alle Impostazioni rapide:
SafetyCenterQsActivity.java