Stile personalizzato

Personalizzazione visiva dei dettagli del luogo — Esempi di personalizzazione visiva

Puoi personalizzare i colori, la tipografia, la spaziatura, i bordi e gli angoli di questi componenti del kit UI Places:

Places UI Kit offre un approccio di sistema di progettazione alla personalizzazione visiva basato approssimativamente su Material Design (con alcune modifiche specifiche di Google Maps). Consulta il riferimento di Material Design per Colori e Tipografia. Per impostazione predefinita, lo stile rispetta il linguaggio di progettazione visiva di Google Maps.

Opzioni di personalizzazione dei dettagli del luogo

Quando crei un'istanza di un frammento, puoi specificare un tema che sostituisce uno qualsiasi degli attributi di stile predefiniti. Gli attributi del tema non sostituiti utilizzano gli stili predefiniti.

  <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>

Importante: il kit UI Places fornisce un tema scuro per impostazione predefinita, quindi potresti dover personalizzare sia il tema scuro che quello chiaro. Per creare un tema scuro, aggiungi una voce per i colori in values-night/colors.xml

Puoi personalizzare i seguenti stili:

Attributo tema	Utilizzo
Colore
`placesColorSurface`	Sfondo del contenitore e della finestra di dialogo
`placesColorOutlineDecorative`	Bordo del contenitore
`placesColorPrimary`	Link, indicatore di caricamento, icone di panoramica
`placesColorOnSurface`	Intestazioni, contenuti della finestra di dialogo
`placesColorOnSurfaceVariant`	Informazioni sul luogo
`placesColorSecondaryContainer`	Sfondo pulsante
`placesColorOnSecondaryContainer`	Testo e icona del pulsante
`placesColorNeutralContainer`	Esamina il badge della data e le forme segnaposto di caricamento
`placesColorOnNeutralContainer`	Data della recensione, errore di caricamento
`placesColorPositiveContainer`	Badge Stazione di ricarica EV disponibile
`placesColorOnPositiveContainer`	Contenuti del badge per le stazioni di ricarica EV disponibili
`placesColorPositive`	Posiziona l'etichetta "Aperto ora"
`placesColorNegative`	Etichetta "Chiuso" ora
`placesColorInfo`	Icona Ingresso accessibile
`placesColorButtonBorder`	Pulsanti Apri in Maps e OK

Tipografia
`placesTextAppearanceBodySmall`	Informazioni sul luogo
`placesTextAppearanceBodyMedium`	Informazioni sul luogo, contenuti della finestra di dialogo
`placesTextAppearanceLabelMedium`	Contenuti del badge
`placesTextAppearanceLabelLarge`	Contenuto del pulsante
`placesTextAppearanceHeadlineMedium`	Intestazioni delle finestre di dialogo
`placesTextAppearanceDisplaySmall`	Nome del luogo
`placesTextAppearanceTitleSmall`	Nome del luogo

Spaziatura
`placesSpacingExtraSmall`
`placesSpacingSmall`
`placesSpacingMedium`
`placesSpacingLarge`
`placesSpacingExtraLarge`
`placesSpacingTwoExtraLarge`

Misurazione
`placesBorderWidth`	Container
`placesBorderWidthButton`

Forma
`placesCornerRadius`	Container
`placesCornerRadiusButton`	Pulsanti Apri in Maps e OK (escluso il pulsante icona rotondo)
`placesCornerRadiusThumbnail`	Posizionare l'immagine in miniatura
`placesCornerRadiusCollageOuter`	Collage multimediale
`placesCornerRadiusCard`	Scheda luogo, scheda recensione utente
`placesCornerRadiusDialog`	Finestra di dialogo di divulgazione di Google Maps

Attribuzione del brand Google Maps
`placesColorAttributionLightTheme`	Pulsante di attribuzione e informativa di Google Maps con tema chiaro (enumerazioni per bianco, grigio e nero)
`placesColorAttributionDarkTheme`	Pulsante di attribuzione e informativa del tema scuro di Google Maps (enumerazioni per bianco, grigio e nero)

Colori di attribuzione

I Termini di servizio di Google Maps richiedono di utilizzare uno dei tre colori del brand per l'attribuzione di Google Maps. Questa attribuzione deve essere visibile e accessibile quando sono state apportate modifiche alla personalizzazione.

Offriamo tre colori del brand tra cui scegliere, che possono essere impostati in modo indipendente per i temi chiaro e scuro:

Tema chiaro: placesColorAttributionLight con valori enum per bianco, grigio e nero.
Tema scuro: placesColorAttributionDark con valori enum per bianco, grigio e nero.

Esempi

Questo esempio di codice mostra come creare un tema che esegue l'override degli attributi di stile predefiniti. Gli attributi del tema non sostituiti utilizzano gli stili predefiniti.

  <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>

Stile personalizzato

Colori di attribuzione

Esempi

Esempi completi per ogni componente