Personalizar interface do usuário da Central de segurança

O código da UI do Safety Center está localizado no diretório safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/ . Personalize a UI do Safety Center usando Runtime Resource Overlays (RROs) na pasta de sobreposição OEM. Para obter informações sobre RROs, consulte Alterar o valor dos recursos de um aplicativo em tempo de execução .

Temas e cores da Central de Segurança

O Safety Center tem quatro temas principais que compartilham os mesmos atributos da IU:

  • Luz da Central de Segurança
  • Central de segurança escura
  • Luz de configurações rápidas da Central de segurança
  • Configurações rápidas da Central de segurança escuras

Os temas do Safety Center contêm cores padrão. As principais cores da IU são extraídas das cores do sistema Android e podem se adaptar automaticamente com a personalização geral das cores do Android pelo OEM. Por padrão, essas cores se adaptam como parte do estilo do Material You no Android.

Você pode alterar as cores do Safety Center substituindo seus valores.

Cor da interface do usuário da Central de Segurança Nome do Atributo Recurso
Fundo android:colorBackground @android:color/background_device_default_light
@android:color/primary_dark_device_default_settings
Superfície colorSurface @color/sc_surface_light @color/sc_surface_dark
Variante de superfície colorSurfaceVariant @color/sc_surface_variant_light
@color/sc_surface_variant_dark
Texto principal android:textColorPrimary @android:color/text_color_primary
Texto secundário android:textColorSecondary @android:color/text_color_secondary
Ícones android:textColorSecondary @android:color/text_color_secondary
Recurso Valor padrão
@color/sc_surface_light @android:color/system_neutral1_500 com um valor de estrela L de 98 (luminância 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

Cores de gravidade do problema

O Safety Center comunica a gravidade do problema com um sistema de cores de semáforo:

  • Verde para questões informativas e status OK
  • Amarelo para recomendações
  • Vermelho para problemas sérios
  • Cinza por falta de informação

Por padrão, essas cores são extraídas da paleta de cores do Google Material. Recomendamos que você mantenha essas cores básicas, mas você pode usar diferentes tons da paleta verde, amarelo e vermelho.

Esses atributos de cores são usados ​​para associar itens com cores de gravidade na interface do Safety Center, incluindo ícones, botões e animações de verificação e alteração de status. Modificar essas cores recolorirá todos os elementos. Por exemplo, modificar @color/sc_status_info_{light,dark} altera a cor de fundo na imagem de status estática e na animação do fundo durante uma varredura.

O tema Configurações rápidas do Safety Center usa cores do modo escuro, esteja o dispositivo configurado ou não no modo escuro.

Gravidade Elemento da IU Atributo ou nome do recurso Cor padrão
Informações (Verde) Escudo de status ?attr/colorScStatusInfo Luz: Verde 600 (#1e8e3e)
Escuro: Verde 500 (#34a853)
Contêiner de escudo de status ?attr/colorScStatusBackgroundInfo Luz: Verde 100 (# ceead6)
colorSurfaceVariant
Ícone ?attr/colorScIconInfo Verde 500 (#34a853)
Botão de ação principal @color/safety_center_button_info Verde 400 (#5bb974)
Botão de ação secundária @color/safety_center_outline_button_info Verde 300 (#81c995)
Recomendação (Amarelo) Escudo de status ?attr/colorScStatusRecommend Luz: Amarelo 600 (#f9ab00)
Escuro: Amarelo 500 (#fbbc04)
Contêiner de escudo de status ?attr/colorScStatusBackgroundRecommend Claro: Amarelo 100 (#feefc3)
Escuro: colorSurfaceVariant
Ícone ?attr/colorScIconRecommend Amarelo 500 (#fbbc04)
Botão de ação principal @color/safety_center_button_recommend Amarelo 400 (#fcc934)
Botão de ação secundária @color/safety_center_outline_button_recommend Amarelo 300 (#fdd663)
Aviso (vermelho) Escudo de status ?attr/colorScStatusWarn Luz: Vermelho 600 (#d93025)
Escuro: Vermelho 500 (#ea4335)
Contêiner de proteção de status ?attr/colorScStatusBackgroundWarn Luz: Vermelho 100 (#fad2cf)
Escuro: colorSurfaceVariant
Ícone ?attr/colorScIconWarn Vermelho 500 (#ea4335)
Botão de ação principal @color/safety_center_button_warn Vermelho 400 (#ee675c)
Botão de ação secundária @color/safety_center_outline_button_warn Vermelho 300 (#f28b82)
Nenhuma recomendação (cinza) Ícone ?attr/colorScIconNull Cinza 600 (#80868b)

No Android 14, recursos de cores sobrepostos foram adicionados para cada propriedade de cor do tema, e algumas cores padrão foram modificadas:

Nome do recurso Cor de fundo do Android 13 Cor de fundo do Android 14 Código hexadecimal do Android 14
@color/sc_status_info_light Verde 600 Verde Semântico #0E8435
@color/sc_status_recommend_light Amarelo 600 Inalterado
@color/sc_status_warn_light Vermelho 600 Inalterado
@color/sc_status_info_dark Verde 500 Verde 400 #5BB974
@color/sc_status_recommend_dark Amarelo 500 Amarelo 400 #FCC934
@color/sc_status_warn_dark Vermelho 500 Vermelho 400 #EE675C
@color/sc_status_background_info_light Verde 100 Inalterado
@color/sc_status_background_recommend_light Amarelo 100 Inalterado
@color/sc_status_background_warn_light Vermelho 100 Inalterado
@color/sc_status_background_info_dark sc_surface_variant_dark Inalterado
@color/sc_status_background_recommend_dark sc_surface_variant_dark Inalterado
@color/sc_status_background_warn_dark sc_surface_variant_dark Inalterado
@color/sc_icon_info_light Verde 500 Inalterado
@color/sc_icon_recommend_light Amarelo 500 Inalterado
@color/sc_icon_warn_light Vermelho 500 Inalterado
@color/sc_icon_null_light Cinza 600 Inalterado
@color/sc_icon_info_dark Verde 500 Verde 400
@color/sc_icon_recommend_dark Amarelo 500 Amarelo 400
@color/sc_icon_warn_dark Vermelho 500 Vermelho 400
@color/sc_icon_null_dark Cinza 600 Cinza 400 #BDC1C6
@color/sc_shield_accent_dark Não disponível Cinza 900 #202124

Cores da IU

Estado verde

Escudo Verde

#1E8E3E (verde/600)
Tema escuro
#34A853 (verde/500)
Recipiente verde

#CEEAD6 (verde/100)
Tema escuro
#474741
Ícone verde de configurações

#34A853 (verde/500)
Tema escuro
#34A853 (verde/500)
Botão de digitalização

Botão verde
#5BB974 (verde/400)
Título Legenda

#1B1C17 (TextColorPrimary) #46483B (TextColorSecondary)

Estado amarelo

Escudo Amarelo

#F9AB00 (Amarelo/600)
Tema escuro
#FBBC04 (amarelo/500)
Recipiente amarelo

#FEEFC3 (amarelo/100)
Tema escuro
#474741 (amarelo/500)
Ícone amarelo de configurações

#FBBC04 (amarelo/500)
Tema escuro
#FBBC04 (amarelo/500)
Botão de digitalização

Botão amarelo
#5BB974 (Amarelo/400)
Título Legenda

#1B1C17 (TextColorPrimary) #46483B (TextColorSecondary)

Estado vermelho

Escudo Vermelho

#D93025 (Vermelho/600)
Tema escuro
#EA4335 (vermelho/500)
Recipiente vermelho

#FAD2CF (vermelho/100)
Tema escuro
#474741
Ícone vermelho de configurações

#EA4335 (vermelho/500)
Tema escuro
#EA4335 (vermelho/500)
Botão desinstalar

botão vermelho
#EE675C (vermelho/400)
Título Legenda

#1B1C17 (TextColorPrimary) #46483B (TextColorSecondary)

Fontes e aparência do texto

As fontes e a aparência do texto do Safety Center são baseadas na aparência de texto padrão do Android e devem herdar quaisquer alterações em uma família de fontes, peso e outras propriedades já configuradas pelos OEMs para seus estilos em todo o dispositivo. A aparência do texto do Safety Center pode ser substituída diretamente usando RROs.

Aparência do texto da Central de Segurança Base DeviceDefault Cor Tamanho Peso
TextAppearance.SafetyCenter.Headline TextAppearance.DeviceDefault.Headline android:textColorPrimary Varia Regular
TextAppearance.SafetyCenter.Headline.Status TextAppearance.DeviceDefault.Headline android:textColorPrimary 22 vel/28 vel "
TextAppearance.SafetyCenter.Headline.Issue TextAppearance.DeviceDefault.Headline android:textColorPrimary 18 vel/24 vel "
TextAppearance.SafetyCenter.Headline.Entry TextAppearance.DeviceDefault.Headline android:textColorPrimary 20 vel/24 vel "
TextAppearance.SafetyCenter.Medium TextAppearance.DeviceDefault.Medium Varia 14 vel/20 vel ou
16 vel/24 vel
Médio
TextAppearance.SafetyCenter.Body TextAppearance.DeviceDefault.Small android:textColorSecondary 14 vel/20 vel Regular

Espaçamento e estilos

O Safety Center usa um conjunto de valores de preenchimento padrão universalmente para preenchimento e margens. Altere a densidade das informações do Safety Center substituindo os valores de espaçamento.

Nome do recurso Valor padrão
@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

Você pode personalizar os raios dos cantos dos cartões do Safety Center. Um raio de tamanho de canto é usado para botões e três tamanhos de canto são usados ​​para cartões do Safety Center:

Nome do recurso Valor padrão
@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

Bloco Configurações rápidas

O Safety Center pode ser acessado a partir de um bloco Configurações rápidas implementado no módulo PermissionController. O bloco Configurações rápidas reutiliza alguns dos componentes da IU das telas do Safety Center para que as sobreposições possam funcionar: