Benutzerdefinierte Stile

Sie können die Farben, Typografie, Abstände, Ränder und Ecken dieser Komponenten des Places UI-Kits anpassen:

• „Place Details“-Komponente
• „Place Search“-Komponente
• Einfache Place Autocomplete-Komponente
• Place Autocomplete-Widget ohne UI-Kit

Das Places UI Kit bietet einen Designsystemansatz für die visuelle Anpassung, der in etwa auf Material Design basiert (mit einigen Google Maps-spezifischen Änderungen). Weitere Informationen finden Sie in den Material Design-Referenzen zu Farbe und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.

Beim Instanziieren eines Fragments können Sie ein Design angeben, das alle Standardstilattribute überschreibt. Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet.

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

Sie können die folgenden Stile anpassen:

Designattribut	Nutzung
Farbe
placesColorSurface	Container- und Dialoghintergrund
placesColorOutlineDecorative	Containerrahmen
placesColorPrimary	Links, Ladeanzeige, Übersichtssymbole
placesColorOnSurface	Überschriften, Dialoginhalte
placesColorOnSurfaceVariant	Informationen zum Ort
placesColorSecondaryContainer	Schaltflächenhintergrund
placesColorOnSecondaryContainer	Schaltflächentext und ‑symbol
placesColorNeutralContainer	Datumsbadge und Platzhalterformen für das Laden
placesColorOnNeutralContainer	Prüfdatum, Ladefehler
placesColorPositiveContainer	Verfügbares Logo für Ladestationen für Elektrofahrzeuge
placesColorOnPositiveContainer	Verfügbare Inhalte für das Logo „Ladegerät für Elektrofahrzeuge“
placesColorPositive	Label „Jetzt geöffnet“ platzieren
placesColorNegative	Label „Geschlossen“ für Orte
placesColorInfo	Symbol für barrierefreien Eingang
placesColorButtonBorder	Schaltflächen „In Maps öffnen“ und „OK“
Typografie
placesTextAppearanceBodySmall	Informationen zum Ort
placesTextAppearanceBodyMedium	Ortsinformationen, Dialoginhalte
placesTextAppearanceLabelMedium	Inhalt des Logos
placesTextAppearanceLabelLarge	Schaltflächeninhalt
placesTextAppearanceHeadlineMedium	Dialogüberschriften
placesTextAppearanceDisplaySmall	Name
placesTextAppearanceTitleSmall	Name
Abstand
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
Messung
placesBorderWidth	Container
placesBorderWidthButton
Form
placesCornerRadius	Container
placesCornerRadiusButton	Schaltflächen „In Maps öffnen“ und „OK“ (runde Symbolschaltfläche ausgenommen)
placesCornerRadiusThumbnail	Miniaturansicht des Orts
placesCornerRadiusCollageOuter	Mediencollage
placesCornerRadiusCard	Karte für Ort, Karte für Nutzerrezensionen
placesCornerRadiusDialog	Offenlegungsdialogfeld für Google Maps
Markenattribute in Google Maps
placesColorAttributionLightTheme	Schaltfläche für die Quellenangabe und Offenlegung von Google Maps im hellen Design (Enumerationen für Weiß, Grau und Schwarz)
placesColorAttributionDarkTheme	Schaltfläche für Attribution und Offenlegung des dunklen Designs von Google Maps (Enumerationen für Weiß, Grau und Schwarz)

Attributionsfarben

Gemäß den Nutzungsbedingungen von Google Maps müssen Sie für die Quellenangabe von Google Maps eine von drei Markenfarben verwenden. Diese Quellenangabe muss sichtbar und zugänglich sein, wenn Änderungen an der Anpassung vorgenommen wurden.

Sie können aus drei Markenfarben wählen, die unabhängig für helle und dunkle Designs festgelegt werden können:

• Helles Design: placesColorAttributionLight mit Enum-Werten für Weiß, Grau und Schwarz.
• Dunkles Design: placesColorAttributionDark mit Enumerationswerten für Weiß, Grau und Schwarz.

Beispiele

In diesem Codebeispiel wird gezeigt, wie Sie ein Design erstellen, das die Standardstilattribute überschreibt. Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet.

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

Vollständige Beispiele für jede Komponente

• Beispiel für das Styling der „Place Details“-Komponente
• Beispiel für das Styling der „Place Search“-Komponente
• Beispiel für das grundlegende Styling der Place Autocomplete-Komponente