Il codice per l'interfaccia utente di Safety Center si trova nella directory safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/ . Personalizza l'interfaccia utente di Safety Center utilizzando Runtime Resource Overlays (RRO) nella cartella degli overlay OEM. Per informazioni sulle RRO, consulta Modificare il valore delle risorse di un'app in fase di esecuzione .
Temi e colori del Centro sicurezza
Safety Center dispone di quattro temi principali che condividono gli stessi attributi dell'interfaccia utente:
- Luce del centro di sicurezza
- Centro di sicurezza buio
- Spia Impostazioni rapide del Centro sicurezza
- Impostazioni rapide del Centro sicurezza scuro
I temi del Centro sicurezza contengono colori predefiniti. I colori principali dell'interfaccia utente derivano dai colori del sistema Android e possono adattarsi automaticamente alla personalizzazione generale del colore Android da parte dell'OEM. Per impostazione predefinita, questi colori si adattano come parte dello stile Material You in Android.
Puoi modificare i colori del Centro sicurezza sovrascrivendone i valori.
| Colore dell'interfaccia utente del Centro sicurezza | Nome attributo | Risorsa |
|---|---|---|
| Sfondo | android:colorBackground | @android:color/background_device_default_light@android:color/primary_dark_device_default_settings |
| Superficie | colorSurface | @color/sc_surface_light @color/sc_surface_dark |
| Variante di superficie | colorSurfaceVariant | @color/sc_surface_variant_light@color/sc_surface_variant_dark |
| Testo primario | 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 di default |
|---|---|
@color/sc_surface_light | @android:color/system_neutral1_500 con un valore L star 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 della gravità del problema
Safety Center comunica la gravità del problema con un sistema di colori a semaforo:
- Verde per problemi informativi e stato OK
- Giallo per raccomandazioni
- Rosso per problemi seri
- Grigio per assenza di informazione
Per impostazione predefinita, questi colori vengono estratti dalla tavolozza dei colori dei materiali di Google. Ti consigliamo di mantenere questi colori di base, ma puoi utilizzare diverse tonalità della tavolozza verde, giallo e rosso.
Questi attributi di colore vengono utilizzati per associare elementi colorati con gravità nell'interfaccia utente di Safety Center, tra cui icone, pulsanti e animazioni di scansione e modifica dello stato. La modifica di questi colori ricolora tutti gli elementi. Ad esempio, la modifica di @color/sc_status_info_{light,dark} modifica il colore di sfondo sia nell'immagine di stato statica che nell'animazione dello sfondo durante una scansione.
Il tema Impostazioni rapide del Centro sicurezza utilizza i colori della modalità oscura, indipendentemente dal fatto che il dispositivo sia impostato o meno in modalità oscura.
| Gravità | Elemento dell'interfaccia utente | Nome dell'attributo o della risorsa | Colore predefinito |
|---|---|---|---|
| Informazioni (Verde) | Scudo di stato | ?attr/colorScStatusInfo | Luce: verde 600 (#1e8e3e) Scuro: verde 500 (#34a853) |
| Contenitore dello scudo di stato | ?attr/colorScStatusBackgroundInfo | Luce: 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 secondaria | @color/safety_center_outline_button_info | Verde 300 (#81c995) | |
| Raccomandazione (giallo) | Scudo di stato | ?attr/colorScStatusRecommend | Luce: Giallo 600 (#f9ab00) Scuro: Giallo 500 (#fbbc04) |
| Contenitore dello scudo di stato | ?attr/colorScStatusBackgroundRecommend | Luce: Giallo 100 (#feefc3) Scuro: colorSurfaceVariant | |
| Icona | ?attr/colorScIconRecommend | Giallo 500 (#fbbc04) | |
| Pulsante di azione principale | @color/safety_center_button_recommend | Giallo 400 (#fcc934) | |
| Pulsante di azione secondaria | @color/safety_center_outline_button_recommend | Giallo 300 (#fdd663) | |
| Avvertimento (rosso) | Scudo di stato | ?attr/colorScStatusWarn | Luce: rossa 600 (#d93025) Scuro: Rosso 500 (#ea4335) |
| Contenitore dello scudo di stato | ?attr/colorScStatusBackgroundWarn | Luce: 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 secondaria | @color/safety_center_outline_button_warn | Rosso 300 (#f28b82) | |
| Nessuna raccomandazione (grigio) | Icona | ?attr/colorScIconNull | Grigio 600 (#80868b) |
In Android 14 sono state aggiunte risorse di colore sovrapponibili per ciascuna proprietà di colore del tema e alcuni colori predefiniti sono stati modificati:
| Nome della risorsa | Colore del supporto Android 13 | Colore del supporto 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 | sc_surface_variant_dark | Invariato | |
@color/sc_status_background_recommend_dark | sc_surface_variant_dark | Invariato | |
@color/sc_status_background_warn_dark | sc_surface_variant_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 dell'interfaccia utente
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 Scansione | |
|---|---|
| Tasto verde |
| #5BB974 (verde/400) | |
| Titolo | Sottotitolo |
|
|
|---|---|
| #1B1C17 (ColoreTestoPrimario) | #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 Scansione | |
|---|---|
| Tasto giallo |
| #5BB974 (Giallo/400) | |
| Titolo | Sottotitolo |
|
|
|---|---|
| #1B1C17 (ColoreTestoPrimario) | #46483B (ColoreTestoSecondario) |
Stato rosso
| Scudo Rosso | |
|---|---|
| #D93025 (Rosso/600) |
| Tema scuro #EA4335 (rosso/500) | |
| Contenitore rosso | |
|---|---|
| #FAD2CF (rosso/100) |
| Tema scuro #474741 | |
| Icona rossa delle impostazioni | |
|---|---|
| #EA4335 (rosso/500) |
| Tema scuro #EA4335 (rosso/500) | |
| Pulsante Disinstalla | |
|---|---|
| Pulsante rosso |
| #EE675C (rosso/400) | |
| Titolo | Sottotitolo |
|
|
|---|---|
| #1B1C17 (ColoreTestoPrimario) | #46483B (ColoreTestoSecondario) |
Caratteri e aspetto del testo
I caratteri e l'aspetto del testo di Safety Center si basano sull'aspetto del testo predefinito di Android e dovrebbero ereditare eventuali modifiche alla famiglia di caratteri, al peso e ad altre proprietà già configurate dagli OEM nei rispettivi stili a livello di dispositivo. L'aspetto del testo del Centro sicurezza può essere sovrascritto direttamente utilizzando le RRO.
| Centro sicurezza Aspetto del testo | DispositivoBase predefinita | Colore | Misurare | Peso |
|---|---|---|---|---|
TextAppearance.SafetyCenter.Headline | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | Varia | Regolare |
TextAppearance.SafetyCenter.Headline.Status | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 22 velocità/28 velocità | " |
TextAppearance.SafetyCenter.Headline.Issue | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 18 velocità/24 velocità | " |
TextAppearance.SafetyCenter.Headline.Entry | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 20 velocità/24 velocità | " |
TextAppearance.SafetyCenter.Medium | TextAppearance.DeviceDefault.Medium | Varia | 14 sp/20 sp oppure 16 velocità/24 velocità | medio |
TextAppearance.SafetyCenter.Body | TextAppearance.DeviceDefault.Small | android:textColorSecondary | 14 sp/20 sp | Regolare |
Spaziature e stili
Safety Center utilizza universalmente un set di valori di riempimento predefiniti per il riempimento e i margini. Modificare la densità delle informazioni di Safety Center sovrascrivendo i valori di spaziatura.
| Nome della risorsa | Valore di default |
|---|---|
@dimen/sc_spacing_xxxsmall | 2 d.p |
@dimen/sc_spacing_xxsmall | 4 d.p |
@dimen/sc_spacing_xsmall | 8 d.p |
@dimen/sc_spacing_small | 12 d.p |
@dimen/sc_spacing_medium | 14 d.p |
@dimen/sc_spacing_large | 16 d.p |
@dimen/sc_spacing_xlarge | 18 d.p |
@dimen/sc_spacing_xxlarge | 20 d.p |
@dimen/sc_spacing_xxxlarge | 24 d.p |
È possibile personalizzare i raggi degli angoli delle schede Safety Center. Per i pulsanti viene utilizzato il raggio di una dimensione dell'angolo e per le schede Safety Center vengono utilizzate tre dimensioni dell'angolo:
| Nome della risorsa | Valore di default |
|---|---|
@dimen/sc_button_corner_radius | 12 d.p |
@dimen/sc_card_corner_radius_large | 28 d.p |
@dimen/sc_card_corner_radius_medium | 20 d.p |
@dimen/sc_card_corner_radius_xsmall | 4 d.p |
Riquadro Impostazioni rapide
Safety Center è accessibile da un riquadro Impostazioni rapide implementato nel modulo PermissionController. Il riquadro Impostazioni rapide riutilizza alcuni componenti dell'interfaccia utente delle schermate del Centro sicurezza in modo che gli overlay possano funzionare:
- Servizio riquadro Impostazioni rapide:
SafetyCenterQsTileService.kt - Attività Impostazioni rapide:
SafetyCenterQsActivity.java