Personalizza l'UI del Centro per la sicurezza online

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: