El código para la interfaz de usuario del Centro de seguridad se encuentra en el directorio safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/ . Personalice la interfaz de usuario del Centro de seguridad mediante las superposiciones de recursos de tiempo de ejecución (RRO) en la carpeta de superposiciones OEM. Para obtener información sobre RRO, consulte Cambiar el valor de los recursos de una aplicación en tiempo de ejecución .
Temas y colores del Centro de seguridad
Safety Center tiene cuatro temas principales que comparten los mismos atributos de la interfaz de usuario:
- Luz del centro de seguridad
- Centro de seguridad oscuro
- Luz de configuración rápida del centro de seguridad
- Configuración rápida del Centro de seguridad oscuro
Los temas del Centro de seguridad contienen colores predeterminados. Los colores principales de la interfaz de usuario se extraen de los colores del sistema Android y pueden adaptarse automáticamente con la personalización general del color de Android del OEM. De forma predeterminada, estos colores se adaptan como parte del estilo Material You en Android.
Puede cambiar los colores del Centro de seguridad anulando sus valores.
| Color de la interfaz de usuario del Centro de seguridad | Nombre del Atributo | Recurso |
|---|---|---|
| Fondo | 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 de superficie | colorSurfaceVariant | @color/sc_surface_variant_light@color/sc_surface_variant_dark |
| texto primario | android:textColorPrimary | @android:color/text_color_primary |
| Texto secundario | android:textColorSecondary | @android:color/text_color_secondary |
| Iconos | android:textColorSecondary | @android:color/text_color_secondary |
| Recurso | Valor por defecto |
|---|---|
@color/sc_surface_light | @android:color/system_neutral1_500 con un valor de estrella L de 98 (luminancia perceptual) |
@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 |
Colores de gravedad del problema
El Centro de seguridad comunica la gravedad del problema con un sistema de color de semáforo:
- Verde para problemas informativos y estado OK
- Amarillo para recomendaciones.
- Rojo para problemas graves
- Gris por falta de información.
De forma predeterminada, estos colores se extraen de la paleta de colores de materiales de Google. Te recomendamos que mantengas estos colores base, pero puedes utilizar diferentes tonos de la paleta de verde, amarillo y rojo.
Estos atributos de color se utilizan para asociar elementos de colores severos en la interfaz de usuario del Centro de seguridad, incluidos íconos, botones y animaciones de escaneo y cambio de estado. La modificación de estos colores vuelve a colorear todos los elementos. Por ejemplo, modificar @color/sc_status_info_{light,dark} cambia el color de fondo tanto en la imagen de estado estática como en la animación del fondo durante un escaneo.
El tema de Configuración rápida del Centro de seguridad utiliza colores en modo oscuro, ya sea que el dispositivo esté configurado en modo oscuro o no.
| Gravedad | Elemento de interfaz de usuario | Nombre del atributo o recurso | Color predeterminado |
|---|---|---|---|
| Información (verde) | Escudo de estado | ?attr/colorScStatusInfo | Luz: Verde 600 (#1e8e3e) Oscuro: Verde 500 (#34a853) |
| Contenedor de escudo de estado | ?attr/colorScStatusBackgroundInfo | Luz: Verde 100 (#ceead6)colorSurfaceVariant | |
| Icono | ?attr/colorScIconInfo | Verde 500 (#34a853) | |
| Botón de acción principal | @color/safety_center_button_info | Verde 400 (#5bb974) | |
| Botón de acción secundaria | @color/safety_center_outline_button_info | Verde 300 (#81c995) | |
| Recomendación (amarillo) | Escudo de estado | ?attr/colorScStatusRecommend | Luz: Amarillo 600 (#f9ab00) Oscuro: Amarillo 500 (#fbbc04) |
| Contenedor de escudo de estado | ?attr/colorScStatusBackgroundRecommend | Luz: Amarilla 100 (#feefc3) Oscuro: colorSurfaceVariant | |
| Icono | ?attr/colorScIconRecommend | Amarillo 500 (#fbbc04) | |
| Botón de acción principal | @color/safety_center_button_recommend | Amarillo 400 (#fcc934) | |
| Botón de acción secundaria | @color/safety_center_outline_button_recommend | Amarillo 300 (#fdd663) | |
| Advertencia (rojo) | Escudo de estado | ?attr/colorScStatusWarn | Luz: Roja 600 (#d93025) Oscuro: Rojo 500 (#ea4335) |
| Contenedor de escudo de estado | ?attr/colorScStatusBackgroundWarn | Luz: Roja 100 (#fad2cf) Oscuro: colorSurfaceVariant | |
| Icono | ?attr/colorScIconWarn | Rojo 500 (#ea4335) | |
| Botón de acción principal | @color/safety_center_button_warn | Rojo 400 (#ee675c) | |
| Botón de acción secundaria | @color/safety_center_outline_button_warn | Rojo 300 (#f28b82) | |
| Sin recomendación (gris) | Icono | ?attr/colorScIconNull | Gris 600 (#80868b) |
En Android 14, se agregaron recursos de color superpuestos para cada propiedad de color del tema y se modificaron algunos colores predeterminados:
| Nombre del recurso | Color de respaldo de Android 13 | Color de respaldo de Android 14 | Código hexadecimal de Android 14 |
|---|---|---|---|
@color/sc_status_info_light | Verde 600 | Verde semántico | #0E8435 |
@color/sc_status_recommend_light | Amarillo 600 | Sin alterar | |
@color/sc_status_warn_light | rojo 600 | Sin alterar | |
@color/sc_status_info_dark | Verde 500 | Verde 400 | #5BB974 |
@color/sc_status_recommend_dark | Amarillo 500 | Amarillo 400 | #FCC934 |
@color/sc_status_warn_dark | rojo 500 | rojo 400 | #EE675C |
@color/sc_status_background_info_light | Verde 100 | Sin alterar | |
@color/sc_status_background_recommend_light | Amarillo 100 | Sin alterar | |
@color/sc_status_background_warn_light | rojo 100 | Sin alterar | |
@color/sc_status_background_info_dark | sc_surface_variant_dark | Sin alterar | |
@color/sc_status_background_recommend_dark | sc_surface_variant_dark | Sin alterar | |
@color/sc_status_background_warn_dark | sc_surface_variant_dark | Sin alterar | |
@color/sc_icon_info_light | Verde 500 | Sin alterar | |
@color/sc_icon_recommend_light | Amarillo 500 | Sin alterar | |
@color/sc_icon_warn_light | rojo 500 | Sin alterar | |
@color/sc_icon_null_light | Gris 600 | Sin alterar | |
@color/sc_icon_info_dark | Verde 500 | Verde 400 | |
@color/sc_icon_recommend_dark | Amarillo 500 | Amarillo 400 | |
@color/sc_icon_warn_dark | rojo 500 | rojo 400 | |
@color/sc_icon_null_dark | Gris 600 | Gris 400 | #BDC1C6 |
@color/sc_shield_accent_dark | No disponible | Gris 900 | #202124 |
colores de la interfaz de usuario
Estado verde
| Escudo Verde | |
|---|---|
| #1E8E3E (verde/600) |
| tema oscuro #34A853 (verde/500) | |
| Contenedor verde | |
|---|---|
| #CEEAD6 (verde/100) |
| tema oscuro #474741 | |
| Icono de configuración verde | |
|---|---|
| #34A853 (verde/500) |
| tema oscuro #34A853 (verde/500) | |
| Botón de escaneo | |
|---|---|
| Botón verde |
| #5BB974 (verde/400) | |
| Título | Subtitular |
|
|
|---|---|
| #1B1C17 (TextColorPrimario) | #46483B (TextColorSecundario) |
Estado amarillo
| Escudo amarillo | |
|---|---|
| #F9AB00 (Amarillo/600) |
| tema oscuro #FBBC04 (amarillo/500) | |
| Contenedor amarillo | |
|---|---|
| #FEEFC3 (amarillo/100) |
| tema oscuro #474741 (amarillo/500) | |
| Icono de configuración amarillo | |
|---|---|
| #FBBC04 (amarillo/500) |
| tema oscuro #FBBC04 (amarillo/500) | |
| Botón de escaneo | |
|---|---|
| Botón amarillo |
| #5BB974 (Amarillo/400) | |
| Título | Subtitular |
|
|
|---|---|
| #1B1C17 (TextColorPrimario) | #46483B (TextColorSecundario) |
estado rojo
| escudo rojo | |
|---|---|
| #D93025 (Rojo/600) |
| tema oscuro #EA4335 (rojo/500) | |
| Contenedor rojo | |
|---|---|
| #FAD2CF (rojo/100) |
| tema oscuro #474741 | |
| Icono de configuración rojo | |
|---|---|
| #EA4335 (rojo/500) |
| tema oscuro #EA4335 (rojo/500) | |
| Botón de desinstalación | |
|---|---|
| botón rojo |
| #EE675C (rojo/400) | |
| Título | Subtitular |
|
|
|---|---|
| #1B1C17 (TextColorPrimario) | #46483B (TextColorSecundario) |
Fuentes y apariencia del texto.
Las fuentes y la apariencia del texto del Centro de seguridad se basan en la apariencia del texto predeterminada de Android y deben heredar cualquier cambio en una familia de fuentes, peso y otras propiedades ya configuradas por los OEM en sus estilos para todo el dispositivo. La apariencia del texto del Centro de seguridad se puede anular directamente mediante RRO.
| Centro de seguridad Apariencia del texto | DispositivoBase predeterminada | Color | Tamaño | Peso |
|---|---|---|---|---|
TextAppearance.SafetyCenter.Headline | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | Varía | Regular |
TextAppearance.SafetyCenter.Headline.Status | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 22 velocidades/28 velocidades | " |
TextAppearance.SafetyCenter.Headline.Issue | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 18 velocidades/24 velocidades | " |
TextAppearance.SafetyCenter.Headline.Entry | TextAppearance.DeviceDefault.Headline | android:textColorPrimary | 20 velocidades/24 velocidades | " |
TextAppearance.SafetyCenter.Medium | TextAppearance.DeviceDefault.Medium | Varía | 14 velocidades/20 velocidades o 16 velocidades/24 velocidades | Medio |
TextAppearance.SafetyCenter.Body | TextAppearance.DeviceDefault.Small | android:textColorSecondary | 14 velocidades/20 velocidades | Regular |
Espaciado y estilos
Safety Center utiliza un conjunto de valores de relleno predeterminados de forma universal para el relleno y los márgenes. Cambie la densidad de información del Centro de seguridad anulando los valores de espaciado.
| Nombre del recurso | Valor por defecto |
|---|---|
@dimen/sc_spacing_xxxsmall | 2 pd |
@dimen/sc_spacing_xxsmall | 4 pd |
@dimen/sc_spacing_xsmall | 8 pd |
@dimen/sc_spacing_small | 12 pd |
@dimen/sc_spacing_medium | 14 dp |
@dimen/sc_spacing_large | 16 dp |
@dimen/sc_spacing_xlarge | 18 pb |
@dimen/sc_spacing_xxlarge | 20 dp |
@dimen/sc_spacing_xxxlarge | 24 dp |
Puede personalizar los radios de las esquinas de las tarjetas del Centro de seguridad. Se utiliza un radio de tamaño de esquina para los botones y tres tamaños de esquina para las tarjetas del Centro de seguridad:
| Nombre del recurso | Valor por defecto |
|---|---|
@dimen/sc_button_corner_radius | 12 pd |
@dimen/sc_card_corner_radius_large | 28 dp |
@dimen/sc_card_corner_radius_medium | 20 dp |
@dimen/sc_card_corner_radius_xsmall | 4 pd |
Mosaico de Configuración rápida
Se puede acceder al Centro de seguridad desde un mosaico de Configuración rápida implementado en el módulo PermissionController. El mosaico de Configuración rápida reutiliza algunos de los componentes de la interfaz de usuario de las pantallas del Centro de seguridad para que las superposiciones puedan funcionar:
- Servicio de mosaicos de configuración rápida:
SafetyCenterQsTileService.kt - Actividad de configuración rápida:
SafetyCenterQsActivity.java