Pilih platform: Android iOS JavaScript

Gaya visual kustom

Penyesuaian visual detail tempat
Contoh penyesuaian visual

Anda dapat menyesuaikan warna, tipografi, jarak, batas, dan sudut komponen kit UI Places ini:

Kit UI Places menawarkan pendekatan sistem desain untuk penyesuaian visual yang kurang lebih didasarkan pada Desain Material (dengan beberapa modifikasi khusus Google Maps). Lihat referensi Desain Material untuk Warna dan Tipografi. Secara default, gaya ini mematuhi bahasa desain visual Google Maps.

Opsi penyesuaian detail tempat

Saat membuat instance fragmen, Anda dapat menentukan tema yang menggantikan atribut gaya default. Atribut tema yang tidak diganti akan menggunakan gaya default. 

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Anda dapat menyesuaikan gaya berikut:

Atribut tema Penggunaan
Warna
placesColorSurface Latar belakang penampung dan dialog
placesColorOutlineDecorative Batas container
placesColorPrimary Link, indikator pemuatan, ikon ringkasan
placesColorOnSurface Judul, konten dialog
placesColorOnSurfaceVariant Informasi tempat
placesColorSecondaryContainer Latar tombol
placesColorOnSecondaryContainer Teks dan ikon tombol
placesColorNeutralContainer Meninjau badge tanggal, memuat bentuk placeholder
placesColorOnNeutralContainer Tanggal ulasan, error saat memuat
placesColorPositiveContainer Badge pengisi daya EV yang tersedia
placesColorOnPositiveContainer Konten badge pengisi daya EV yang tersedia
placesColorPositive Label "Buka" untuk tempat
placesColorNegative Label "Tutup" untuk tempat
placesColorInfo Ikon pintu masuk khusus difabel
placesColorButtonBorder Tombol Buka di peta dan Oke
   
Tipografi
placesTextAppearanceBodySmall Informasi tempat
placesTextAppearanceBodyMedium Informasi tempat, konten dialog
placesTextAppearanceLabelMedium Konten badge
placesTextAppearanceLabelLarge Konten tombol
placesTextAppearanceHeadlineMedium Judul dialog
placesTextAppearanceDisplaySmall Nama tempat
placesTextAppearanceTitleSmall Nama tempat
   
Spasi
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
Pengukuran
placesBorderWidth Penampung
placesBorderWidthButton
   
Bentuk
placesCornerRadius Penampung
placesCornerRadiusButton Tombol Buka di Maps dan Oke (tidak termasuk tombol ikon bulat)
placesCornerRadiusThumbnail Tempatkan gambar thumbnail
placesCornerRadiusCollageOuter Kolase media
placesCornerRadiusCard Kartu tempat, Kartu ulasan pengguna
placesCornerRadiusDialog Dialog pengungkapan Google Maps
   
Atribusi Merek Google Maps
placesColorAttributionLightTheme Tombol atribusi dan pengungkapan Google Maps tema terang (enum untuk putih, abu-abu, dan hitam)
placesColorAttributionDarkTheme Tombol atribusi dan pengungkapan Google Maps dengan tema gelap (enum untuk warna putih, abu-abu, dan hitam)

Warna atribusi

atribusi
Atribusi

Persyaratan layanan Google Maps mengharuskan Anda menggunakan salah satu dari tiga warna merek untuk atribusi Google Maps. Atribusi ini harus terlihat dan dapat diakses saat perubahan penyesuaian telah dilakukan.

Kami menawarkan 3 warna merek yang dapat dipilih dan ditetapkan secara terpisah untuk tema terang dan gelap:

  • Tema terang: placesColorAttributionLight dengan nilai enum untuk putih, abu-abu, dan hitam.
  • Tema gelap: placesColorAttributionDark dengan nilai enum untuk putih, abu-abu, dan hitam.

Contoh

Contoh kode ini menunjukkan cara membuat tema yang menggantikan atribut gaya default. Atribut tema yang tidak diganti akan menggunakan gaya default. 
  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Contoh lengkap untuk setiap komponen