Sesuaikan UI Pusat Keamanan

Kode untuk UI Pusat Keamanan terletak di direktori safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/. Menyesuaikan UI Pusat Keamanan menggunakan Runtime Resource Overlays (RRO) di Folder overlay OEM. Untuk informasi tentang RRO, lihat Mengubah nilai resource pada runtime.

Tema dan warna Pusat Keamanan

Pusat Keamanan memiliki empat tema prinsip yang memiliki atribut UI yang sama:

  • Lampu Pusat Keamanan
  • Pusat Keamanan gelap
  • Lampu Setelan Cepat Pusat Keamanan
  • Setelan Cepat Pusat Keamanan gelap

Tema Pusat Keamanan berisi warna default. Prinsip warna UI digambar dari warna sistem Android dan dapat beradaptasi secara otomatis dengan penyesuaian warna Android. Secara {i>default<i}, warna-warna ini beradaptasi sebagai bagian dari Gaya Material You di Android.

Anda dapat mengubah warna Pusat Keamanan dengan mengganti nilainya.

Warna UI Pusat Keamanan Nama atribut Resource
Latar belakang android:colorBackground @android:color/background_device_default_light
@android:color/primary_dark_device_default_settings
Platform colorSurface @color/sc_surface_light @color/sc_surface_dark
Varian permukaan colorSurfaceVariant @color/sc_surface_variant_light
@color/sc_surface_variant_dark
Teks utama android:textColorPrimary @android:color/text_color_primary
Teks sekunder android:textColorSecondary @android:color/text_color_secondary
Ikon android:textColorSecondary @android:color/text_color_secondary
Resource Nilai default
@color/sc_surface_light @android:color/system_neutral1_500 dengan nilai bintang L dari 98 (luminans persepsi)
@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

Warna tingkat keparahan masalah

Pusat Keamanan mengomunikasikan tingkat keparahan masalah dengan sistem warna lampu lalu lintas:

  • Hijau untuk masalah informasi dan status Oke
  • Kuning untuk rekomendasi
  • Warna merah untuk masalah serius
  • Abu-abu karena tidak adanya informasi

Secara default, warna-warna ini digambar dari palet warna Material Google. Rab sebaiknya tetap gunakan warna dasar ini, tetapi Anda dapat menggunakan berbagai nuansa palet hijau, kuning, dan merah.

Atribut warna ini digunakan untuk mengaitkan item berwarna tingkat keparahan di UI Pusat Keamanan termasuk ikon, tombol, serta pemindaian dan perubahan status animasi. Memodifikasi warna ini akan mewarnai ulang semua elemen. Misalnya, memodifikasi @color/sc_status_info_{light,dark} mengubah warna latar belakang pada gambar status statis dan animasi latar belakang selama pemindaian.

Tema Setelan Cepat Pusat Keamanan menggunakan warna mode gelap, terlepas dari perangkat disetel dalam mode gelap.

Keparahan Elemen UI Nama atribut atau resource Warna default
Info (Hijau) Perisai status ?attr/colorScStatusInfo Terang: Hijau 600 (#1e8e3e)
Gelap: Hijau 500 (#34a853)
Penampung perisai status ?attr/colorScStatusBackgroundInfo Terang: Hijau 100 (#ceead6)
colorSurfaceVariant
Ikon ?attr/colorScIconInfo Hijau 500 (#34a853)
Tombol tindakan utama @color/safety_center_button_info Hijau 400 (#5bb974)
Tombol tindakan sekunder @color/safety_center_outline_button_info Hijau 300 (#81c995)
Rekomendasi (Kuning) Perisai status ?attr/colorScStatusRecommend Terang: Kuning 600 (#f9ab00)
Gelap: Kuning 500 (#fbbc04)
Penampung perisai status ?attr/colorScStatusBackgroundRecommend Terang: Kuning 100 (#feefc3)
Gelap: colorSurfaceVariant
Ikon ?attr/colorScIconRecommend Kuning 500 (#fbbc04)
Tombol tindakan utama @color/safety_center_button_recommend Kuning 400 (#fcc934)
Tombol tindakan sekunder @color/safety_center_outline_button_recommend Kuning 300 (#fdd663)
Peringatan (Merah) Perisai status ?attr/colorScStatusWarn Terang: Merah 600 (#d93025)
Gelap: Merah 500 (#ea4335)
Penampung perisai status ?attr/colorScStatusBackgroundWarn Terang: Merah 100 (#fad2cf)
Gelap: colorSurfaceVariant
Ikon ?attr/colorScIconWarn Merah 500 (#ea4335)
Tombol tindakan utama @color/safety_center_button_warn Merah 400 (#ee675c)
Tombol tindakan sekunder @color/safety_center_outline_button_warn Merah 300 (#f28b82)
Tidak ada rekomendasi (Abu-abu) Ikon ?attr/colorScIconNull Abu-abu 600 (#80868b)

Di Android 14, resource warna yang dapat overlay telah ditambahkan untuk setiap properti warna tema, dan beberapa warna default telah diubah:

Nama resource Warna pendukung Android 13 Warna pendukung Android 14 Kode hex Android 14
@color/sc_status_info_light Hijau 600 Hijau Semantik #0E8435
@color/sc_status_recommend_light Kuning 600 Tidak berubah
@color/sc_status_warn_light Merah 600 Tidak berubah
@color/sc_status_info_dark Hijau 500 Hijau 400 #5BB974
@color/sc_status_recommend_dark Kuning 500 Kuning 400 #FCC934
@color/sc_status_warn_dark Merah 500 Merah 400 #EE675C
@color/sc_status_background_info_light Hijau 100 Tidak berubah
@color/sc_status_background_recommend_light 100 Kuning Tidak berubah
@color/sc_status_background_warn_light 100 Merah Tidak berubah
@color/sc_status_background_info_dark {i>sc_surface_variant_dark<i} Tidak berubah
@color/sc_status_background_recommend_dark {i>sc_surface_variant_dark<i} Tidak berubah
@color/sc_status_background_warn_dark {i>sc_surface_variant_dark<i} Tidak berubah
@color/sc_icon_info_light Hijau 500 Tidak berubah
@color/sc_icon_recommend_light Kuning 500 Tidak berubah
@color/sc_icon_warn_light Merah 500 Tidak berubah
@color/sc_icon_null_light Abu-abu 600 Tidak berubah
@color/sc_icon_info_dark Hijau 500 Hijau 400
@color/sc_icon_recommend_dark Kuning 500 Kuning 400
@color/sc_icon_warn_dark Merah 500 Merah 400
@color/sc_icon_null_dark Abu-abu 600 Abu-abu 400 #BDC1C6
@color/sc_shield_accent_dark Tidak tersedia Abu-abu 900 #202124

Warna UI

Status hijau

Perisai Hijau

#1E8E3E (hijau/600)
Tema gelap
#34A853 (hijau/500)
Penampung hijau

#CEEAD6 (hijau/100)
Tema gelap
#474741
Ikon setelan hijau

#34A853 (hijau/500)
Tema gelap
#34A853 (hijau/500)
Tombol pindai

Tombol hijau
#5BB974 (hijau/400)
Judul Subjudul

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

Negara bagian kuning

Perisai Kuning

#F9AB00 (Kuning/600)
Tema gelap
#FBBC04 (kuning/500)
Penampung kuning

#FEEFC3 (kuning/100)
Tema gelap
#474741 (kuning/500)
Ikon setelan kuning

#FBBC04 (kuning/500)
Tema gelap
#FBBC04 (kuning/500)
Tombol pindai

Tombol kuning
#5BB974 (Kuning/400)
Judul Subjudul

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

Status merah

Perisai Merah

#D93025 (Merah/600)
Tema gelap
#EA4335 (merah/500)
Penampung merah

#FAD2CF (merah/100)
Tema gelap
#474741
Ikon setelan merah

#EA4335 (merah/500)
Tema gelap
#EA4335 (merah/500)
Tombol uninstal

Tombol merah
#EE675C (merah/400)
Judul Subjudul

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

Font dan tampilan teks

Tampilan teks dan font Pusat Keamanan didasarkan pada teks default Android tampilan dan harus mewarisi setiap perubahan pada jenis {i>font<i}, ketebalan, dan properti yang sudah dikonfigurasi oleh OEM ke gaya seluruh perangkatnya. Pusat Keamanan tampilan teks dapat diganti secara langsung menggunakan RRO.

Tampilan Teks Pusat Keamanan Dasar DeviceDefault Warna Ukuran Berat
TextAppearance.SafetyCenter.Headline TextAppearance.DeviceDefault.Headline android:textColorPrimary Bervariasi Rutin
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 Bervariasi 14 sp/20 sp atau
16 sp/24 sp		 Sedang
TextAppearance.SafetyCenter.Body TextAppearance.DeviceDefault.Small android:textColorSecondary 14 sp/20 sp Rutin

Spasi dan gaya

Pusat Keamanan menggunakan serangkaian nilai padding default secara universal untuk padding dan margin yang berbeda. Mengubah kepadatan informasi Pusat Keamanan dengan mengganti spasi masing-masing.

Nama sumber daya Nilai default
@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

Anda dapat menyesuaikan radius sudut kartu Pusat Keamanan. Ukuran satu sudut radius digunakan untuk tombol dan tiga ukuran sudut digunakan untuk Pusat Keamanan kartu:

Nama sumber daya Nilai default
@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

Kartu Setelan Cepat

Pusat Keamanan dapat diakses dari kartu Setelan Cepat yang diterapkan di Modul PermissionController. Kartu Setelan Cepat menggunakan kembali beberapa UI komponen dari layar Pusat Keamanan sehingga overlay dapat berfungsi: