Le code de l'interface utilisateur de Safety Center se trouve dans le répertoire safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/ . Personnalisez l'interface utilisateur de Safety Center à l'aide des superpositions de ressources d'exécution (RRO) dans le dossier de superposition OEM. Pour plus d'informations sur les RRO, consultez Modifier la valeur des ressources d'une application au moment de l'exécution .
Thèmes et couleurs du Centre de sécurité
Safety Center comporte quatre thèmes principaux qui partagent les mêmes attributs d'interface utilisateur :
- Lumière du centre de sécurité
- Centre de sécurité sombre
- Voyant Paramètres rapides du Centre de sécurité
- Paramètres rapides du Centre de sécurité sombre
Les thèmes Safety Center contiennent des couleurs par défaut. Les principales couleurs de l'interface utilisateur sont tirées des couleurs du système Android et peuvent s'adapter automatiquement à la personnalisation générale des couleurs Android par l'OEM. Par défaut, ces couleurs s'adaptent dans le cadre du style Material You dans Android.
Vous pouvez modifier les couleurs du Safety Center en remplaçant leurs valeurs.
| Couleur de l’interface utilisateur du centre de sécurité | Nom d'attribut | Ressource |
|---|---|---|
| Arrière-plan | 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 de surface | colorSurfaceVariant | @color/sc_surface_variant_light@color/sc_surface_variant_dark |
| Texte principal | android:textColorPrimary | @android:color/text_color_primary |
| Texte secondaire | android:textColorSecondary | @android:color/text_color_secondary |
| Icônes | android:textColorSecondary | @android:color/text_color_secondary |
| Ressource | Valeur par défaut |
|---|---|
@color/sc_surface_light | @android:color/system_neutral1_500 avec une valeur d'étoile L de 98 (luminance perceptuelle) |
@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 |
Couleurs de gravité du problème
Safety Center communique la gravité du problème à l'aide d'un système de couleurs de feux de signalisation :
- Vert pour les problèmes d'information et l'état OK
- Jaune pour les recommandations
- Rouge pour les problèmes graves
- Gris pour une absence d'information
Par défaut, ces couleurs sont tirées de la palette de couleurs Google Material. Nous vous recommandons de conserver ces couleurs de base, mais vous pouvez utiliser différentes nuances de la palette verte, jaune et rouge.
Ces attributs de couleur sont utilisés pour associer des éléments de couleur de gravité dans l'interface utilisateur de Safety Center, notamment des icônes, des boutons et des animations d'analyse et de changement d'état. La modification de ces couleurs recolore tous les éléments. Par exemple, la modification de @color/sc_status_info_{light,dark} modifie la couleur d'arrière-plan à la fois dans l'image d'état statique et dans l'animation de l'arrière-plan lors d'une analyse.
Le thème Paramètres rapides du Centre de sécurité utilise les couleurs du mode sombre, que l'appareil soit défini ou non en mode sombre.
| Gravité | Élément d'interface utilisateur | Nom de l'attribut ou de la ressource | Couleur par défaut |
|---|---|---|---|
| Infos (Vert) | Bouclier de statut | ?attr/colorScStatusInfo | Lumière : Vert 600 (#1e8e3e) Foncé : Vert 500 (#34a853) |
| Conteneur de bouclier d'état | ?attr/colorScStatusBackgroundInfo | Lumière : Vert 100 (#ceead6)colorSurfaceVariant | |
| Icône | ?attr/colorScIconInfo | Vert 500 (#34a853) | |
| Bouton d'action principale | @color/safety_center_button_info | Vert 400 (#5bb974) | |
| Bouton d'action secondaire | @color/safety_center_outline_button_info | Vert 300 (#81c995) | |
| Recommandation (jaune) | Bouclier de statut | ?attr/colorScStatusRecommend | Lumière : Jaune 600 (#f9ab00) Foncé : Jaune 500 (#fbbc04) |
| Conteneur de bouclier d'état | ?attr/colorScStatusBackgroundRecommend | Lumière : Jaune 100 (#feefc3) Foncé : colorSurfaceVariant | |
| Icône | ?attr/colorScIconRecommend | Jaune 500 (#fbbc04) | |
| Bouton d'action principale | @color/safety_center_button_recommend | Jaune 400 (#fcc934) | |
| Bouton d'action secondaire | @color/safety_center_outline_button_recommend | Jaune 300 (#fdd663) | |
| Avertissement (rouge) | Bouclier de statut | ?attr/colorScStatusWarn | Lumière : Rouge 600 (#d93025) Foncé : Rouge 500 (#ea4335) |
| Conteneur de bouclier d'état | ?attr/colorScStatusBackgroundWarn | Lumière : Rouge 100 (#fad2cf) Foncé : colorSurfaceVariant | |
| Icône | ?attr/colorScIconWarn | Rouge 500 (#ea4335) | |
| Bouton d'action principale | @color/safety_center_button_warn | Rouge 400 (#ee675c) | |
| Bouton d'action secondaire | @color/safety_center_outline_button_warn | Rouge 300 (#f28b82) | |
| Aucune recommandation (gris) | Icône | ?attr/colorScIconNull | Gris 600 (#80868b) |
Dans Android 14, des ressources de couleurs superposables ont été ajoutées pour chaque propriété de couleur du thème, et certaines couleurs par défaut ont été modifiées :
| Nom de la ressource | Couleur de support Android 13 | Couleur de support Android 14 | Code hexadécimal Android 14 |
|---|---|---|---|
@color/sc_status_info_light | Vert 600 | Vert sémantique | #0E8435 |
@color/sc_status_recommend_light | Jaune 600 | Inchangé | |
@color/sc_status_warn_light | Rouge 600 | Inchangé | |
@color/sc_status_info_dark | Vert 500 | Vert 400 | #5BB974 |
@color/sc_status_recommend_dark | Jaune 500 | Jaune 400 | #FCC934 |
@color/sc_status_warn_dark | Rouge 500 | Rouge 400 | #EE675C |
@color/sc_status_background_info_light | Vert 100 | Inchangé | |
@color/sc_status_background_recommend_light | Jaune 100 | Inchangé | |
@color/sc_status_background_warn_light | Rouge 100 | Inchangé | |
@color/sc_status_background_info_dark | sc_surface_variant_dark | Inchangé | |
@color/sc_status_background_recommend_dark | sc_surface_variant_dark | Inchangé | |
@color/sc_status_background_warn_dark | sc_surface_variant_dark | Inchangé | |
@color/sc_icon_info_light | Vert 500 | Inchangé | |
@color/sc_icon_recommend_light | Jaune 500 | Inchangé | |
@color/sc_icon_warn_light | Rouge 500 | Inchangé | |
@color/sc_icon_null_light | Gris 600 | Inchangé | |
@color/sc_icon_info_dark | Vert 500 | Vert 400 | |
@color/sc_icon_recommend_dark | Jaune 500 | Jaune 400 | |
@color/sc_icon_warn_dark | Rouge 500 | Rouge 400 | |
@color/sc_icon_null_dark | Gris 600 | Gris 400 | #BDC1C6 |
@color/sc_shield_accent_dark | Pas disponible | Gris 900 | #202124 |
Couleurs de l'interface utilisateur
État vert
| Bouclier vert | |
|---|---|
| #1E8E3E (vert/600) |
| Thème sombre #34A853 (vert/500) | |
| Conteneur vert | |
|---|---|
| #CEEAD6 (vert/100) |
| Thème sombre #474741 | |
| Icône de paramètres verte | |
|---|---|
| #34A853 (vert/500) |
| Thème sombre #34A853 (vert/500) | |
| Bouton de numérisation | |
|---|---|
| Bouton vert |
| #5BB974 (vert/400) | |
| Titre | Sous-titre |
|
|
|---|---|
| # 1B1C17 (TexteCouleurPrimaire) | #46483B (TexteCouleurSecondaire) |
État jaune
| Bouclier jaune | |
|---|---|
| #F9AB00 (Jaune/600) |
| Thème sombre #FBBC04 (jaune/500) | |
| Conteneur jaune | |
|---|---|
| #FEEFC3 (jaune/100) |
| Thème sombre #474741 (jaune/500) | |
| Icône de paramètres jaune | |
|---|---|
| #FBBC04 (jaune/500) |
| Thème sombre #FBBC04 (jaune/500) | |
| Bouton de numérisation | |
|---|---|
| Bouton jaune |
| #5BB974 (Jaune/400) | |
| Titre | Sous-titre |
|
|
|---|---|
| # 1B1C17 (TexteCouleurPrimaire) | #46483B (TexteCouleurSecondaire) |
État rouge
| Bouclier Rouge | |
|---|---|
| #D93025 (Rouge/600) |
| Thème sombre #EA4335 (rouge/500) | |
| Conteneur rouge | |
|---|---|
| #FAD2CF (rouge/100) |
| Thème sombre #474741 | |
| Icône de paramètres rouge | |
|---|---|
| #EA4335 (rouge/500) |
| Thème sombre #EA4335 (rouge/500) | |
| Bouton Désinstaller | |
|---|---|
| bouton rouge |
| #EE675C (rouge/400) | |
| Titre | Sous-titre |
|
|
|---|---|
| # 1B1C17 (TexteCouleurPrimaire) | #46483B (TexteCouleurSecondaire) |
Polices et apparence du texte
Les polices et l'apparence du texte de Safety Center sont basées sur l'apparence du texte par défaut d'Android et doivent hériter de toutes les modifications apportées à une famille de polices, à l'épaisseur et à d'autres propriétés déjà configurées par les OEM pour leurs styles à l'échelle de l'appareil. L’apparence du texte du Safety Center peut être remplacée directement à l’aide des RRO.
| Apparence du texte du centre de sécurité | Base DeviceDefault | Couleur | Taille | Poids |
|---|---|---|---|---|
TextAppearance.SafetyCenter.Headline | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | Varie | Régulier |
TextAppearance.SafetyCenter.Headline.Status | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 22 vitesses/28 vitesses | " |
TextAppearance.SafetyCenter.Headline.Issue | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 18 vitesses/24 vitesses | " |
TextAppearance.SafetyCenter.Headline.Entry | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 20 vitesses/24 vitesses | " |
TextAppearance.SafetyCenter.Medium | TextAppearance.DeviceDefault.Medium | Varie | 14 vitesses/20 vitesses ou 16 vitesses/24 vitesses | Moyen |
TextAppearance.SafetyCenter.Body | TextAppearance.DeviceDefault.Small | android:textColorSecondary | 14 vitesses/20 vitesses | Régulier |
Espacement et styles
Safety Center utilise universellement un ensemble de valeurs de remplissage par défaut pour le remplissage et les marges. Modifiez la densité des informations du Safety Center en remplaçant les valeurs d'espacement.
| Nom de la ressource | Valeur par défaut |
|---|---|
@dimen/sc_spacing_xxxsmall | 2 points de pénétration |
@dimen/sc_spacing_xxsmall | 4 points de pénétration |
@dimen/sc_spacing_xsmall | 8 points de vue |
@dimen/sc_spacing_small | 12 points de pourcentage |
@dimen/sc_spacing_medium | 14 points de pénétration |
@dimen/sc_spacing_large | 16 points de pourcentage |
@dimen/sc_spacing_xlarge | 18 dp |
@dimen/sc_spacing_xxlarge | 20 points de pourcentage |
@dimen/sc_spacing_xxxlarge | 24 points de vue |
Vous pouvez personnaliser les rayons des coins des cartes Safety Center. Un rayon de taille de coin est utilisé pour les boutons et trois tailles de coin sont utilisées pour les cartes Safety Center :
| Nom de la ressource | Valeur par défaut |
|---|---|
@dimen/sc_button_corner_radius | 12 points de pourcentage |
@dimen/sc_card_corner_radius_large | 28 dp |
@dimen/sc_card_corner_radius_medium | 20 points de pourcentage |
@dimen/sc_card_corner_radius_xsmall | 4 points de pénétration |
Mosaïque Paramètres rapides
Safety Center est accessible à partir d’une vignette Paramètres rapides implémentée dans le module PermissionController. La vignette Paramètres rapides réutilise certains des composants de l'interface utilisateur des écrans de Safety Center afin que les superpositions puissent fonctionner :
- Service de vignette Paramètres rapides :
SafetyCenterQsTileService.kt - Activité Paramètres rapides :
SafetyCenterQsActivity.java