Customize Safety Center UI

The code for the Safety Center UI is located in the safetycenter directory packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/. Customize the Safety Center UI using the Runtime Resource Overlays (RROs) in the OEM overlay folder. For information on RROs, see Change the value of an app's resources at runtime.

Safety Center themes and colors

Safety Center has four principle themes that share the same UI attributes:

  • Safety Center light
  • Safety Center dark
  • Safety Center Quick Settings light
  • Safety Center Quick Settings dark

Safety Center themes contain default colors. The principle UI colors are drawn from Android system colors and can adapt automatically with OEM's general customization of Android color. By default, these colors adapt as part of Material You styling in Android.

You can change Safety Center colors by overriding their values.

Safety Center UI color Attribute name Resource
Background 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
Surface variant colorSurfaceVariant @color/sc_surface_variant_light
@color/sc_surface_variant_dark
Primary text android:textColorPrimary @android:color/text_color_primary
Secondary text android:textColorSecondary @android:color/text_color_secondary
Icons android:textColorSecondary @android:color/text_color_secondary
Resource Default value
@color/sc_surface_light @android:color/system_neutral1_500 with an L star value of 98 (perceptual luminance)
@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

Issue severity colors

Safety Center communicates issue severity with a traffic light color system:

  • Green for informational issues and OK status
  • Yellow for recommendations
  • Red for serious issues
  • Gray for an absence of information

By default, these colors are drawn from the Google Material color palette. We recommend that you keep these base colors, but you can use different shades of the green, yellow, and red palette.

These color attributes are used for associating severity-colored items in the Safety Center UI including icons, buttons, and scanning and status change animations. Modifying these colors recolors all elements. For example, modifying @color/sc_status_info_{light,dark} changes the background color in both the static status image and the animation of the background during a scan.

The Safety Center Quick Settings theme uses dark mode colors, whether or not the device is set in dark mode.

Severity UI Element Attribute or resource name Default color
Info (Green) Status shield ?attr/colorScStatusInfo Light: Green 600 (#1e8e3e)
Dark: Green 500 (#34a853)
Status shield container ?attr/colorScStatusBackgroundInfo Light: Green 100 (#ceead6)
colorSurfaceVariant
Icon ?attr/colorScIconInfo Green 500 (#34a853)
Primary action button @color/safety_center_button_info Green 400 (#5bb974)
Secondary action button @color/safety_center_outline_button_info Green 300 (#81c995)
Recommendation (Yellow) Status shield ?attr/colorScStatusRecommend Light: Yellow 600 (#f9ab00)
Dark: Yellow 500 (#fbbc04)
Status shield container ?attr/colorScStatusBackgroundRecommend Light: Yellow 100 (#feefc3)
Dark: colorSurfaceVariant
Icon ?attr/colorScIconRecommend Yellow 500 (#fbbc04)
Primary action button @color/safety_center_button_recommend Yellow 400 (#fcc934)
Secondary action button @color/safety_center_outline_button_recommend Yellow 300 (#fdd663)
Warning (Red) Status shield ?attr/colorScStatusWarn Light: Red 600 (#d93025)
Dark: Red 500 (#ea4335)
Status shield container ?attr/colorScStatusBackgroundWarn Light: Red 100 (#fad2cf)
Dark: colorSurfaceVariant
Icon ?attr/colorScIconWarn Red 500 (#ea4335)
Primary action button @color/safety_center_button_warn Red 400 (#ee675c)
Secondary action button @color/safety_center_outline_button_warn Red 300 (#f28b82)
No recommendation (Gray) Icon ?attr/colorScIconNull Gray 600 (#80868b)

In Android 14, overlayable color resources have been added for each theme color property, and some default colors have been modified:

Resource name Android 13 backing color Android 14 backing color Android 14 hex code
@color/sc_status_info_light Green 600 Semantic Green #0E8435
@color/sc_status_recommend_light Yellow 600 Unchanged
@color/sc_status_warn_light Red 600 Unchanged
@color/sc_status_info_dark Green 500 Green 400 #5BB974
@color/sc_status_recommend_dark Yellow 500 Yellow 400 #FCC934
@color/sc_status_warn_dark Red 500 Red 400 #EE675C
@color/sc_status_background_info_light Green 100 Unchanged
@color/sc_status_background_recommend_light Yellow 100 Unchanged
@color/sc_status_background_warn_light Red 100 Unchanged
@color/sc_status_background_info_dark sc_surface_variant_dark Unchanged
@color/sc_status_background_recommend_dark sc_surface_variant_dark Unchanged
@color/sc_status_background_warn_dark sc_surface_variant_dark Unchanged
@color/sc_icon_info_light Green 500 Unchanged
@color/sc_icon_recommend_light Yellow 500 Unchanged
@color/sc_icon_warn_light Red 500 Unchanged
@color/sc_icon_null_light Grey 600 Unchanged
@color/sc_icon_info_dark Green 500 Green 400
@color/sc_icon_recommend_dark Yellow 500 Yellow 400
@color/sc_icon_warn_dark Red 500 Red 400
@color/sc_icon_null_dark Grey 600 Grey 400 #BDC1C6
@color/sc_shield_accent_dark Not available Grey 900 #202124

UI colors

Green state

Green Shield

#1E8E3E (green/600)
Dark theme
#34A853 (green/500)
Green container

#CEEAD6 (green/100)
Dark theme
#474741
Green settings icon

#34A853 (green/500)
Dark theme
#34A853 (green/500)
Scan button

Green button
#5BB974 (green/400)
Title Subtitle

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

Yellow state

Yellow Shield

#F9AB00 (Yellow/600)
Dark theme
#FBBC04 (yellow/500)
Yellow container

#FEEFC3 (yellow/100)
Dark theme
#474741 (yellow/500)
Yellow settings icon

#FBBC04 (yellow/500)
Dark theme
#FBBC04 (yellow/500)
Scan button

Yellow button
#5BB974 (Yellow/400)
Title Subtitle

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

Red state

Red Shield

#D93025 (Red/600)
Dark theme
#EA4335 (red/500)
Red container

#FAD2CF (red/100)
Dark theme
#474741
Red settings icon

#EA4335 (red/500)
Dark theme
#EA4335 (red/500)
Uninstall button

Red button
#EE675C (red/400)
Title Subtitle

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

Fonts and text appearance

Safety Center fonts and text appearance are based on the Android default text appearance and should inherit any changes to a font family, weight, and other properties already configured by OEMs to their device-wide styles. Safety Center text appearance can be overridden directly using RROs.

Safety Center Text appearance DeviceDefault base Color Size Weight
TextAppearance.SafetyCenter.Headline TextAppearance.DeviceDefault.Headline android:textColorPrimary Varies Regular
TextAppearance.SafetyCenter.Headline.Status TextAppearance.DeviceDefault.Headline android:textColorPrimary 22 sp/28 sp "
TextAppearance.SafetyCenter.Headline.Issue TextAppearance.DeviceDefault.Headline android:textColorPrimary 18 sp/24 sp "
TextAppearance.SafetyCenter.Headline.Entry TextAppearance.DeviceDefault.Headline android:textColorPrimary 20 sp/24 sp "
TextAppearance.SafetyCenter.Medium TextAppearance.DeviceDefault.Medium Varies 14 sp/20 sp or
16 sp/24 sp		 Medium
TextAppearance.SafetyCenter.Body TextAppearance.DeviceDefault.Small android:textColorSecondary 14 sp/20 sp Regular

Spacing and styles

Safety Center uses a set of default padding values universally for padding and margins. Change the Safety Center information density by overriding the spacing values.

Resource name Default value
@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

You can customize corner radiuses of the Safety Center cards. One corner size radius is used for buttons and three corner sizes are used for Safety Center cards:

Resource name Default value
@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

Quick Settings tile

Safety Center is accessible from a Quick Settings tile implemented in the PermissionController module. The Quick Settings tile reuses some of the UI components from the Safety Center screens so overlayables could work: