Style personnalisé

Vous pouvez personnaliser les couleurs, la typographie, l'espacement, les bordures et les coins des composants suivants du kit d'UI Places :

• Composant Place Details
• Composant Place Search
• Composant Place Autocomplete de base
• Widget Place Autocomplete sans kit UI

Le kit UI Places offre une approche de système de conception pour la personnalisation visuelle, basée en grande partie sur Material Design (avec quelques modifications spécifiques à Google Maps). Consultez la référence Couleur et Typographie de Material Design. Par défaut, le style respecte le langage de conception visuelle de Google Maps.

Lorsque vous instanciez un fragment, vous pouvez spécifier un thème qui remplace l'un des attributs de style par défaut. Tous les attributs de thème qui ne sont pas remplacés utilisent les styles par défaut.

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

Vous pouvez personnaliser les styles suivants :

Attribut de thème	Utilisation
Couleur
placesColorSurface	Arrière-plan du conteneur et de la boîte de dialogue
placesColorOutlineDecorative	Bordure du conteneur
placesColorPrimary	Liens, indicateur de chargement, icônes de présentation
placesColorOnSurface	Titres, contenu de la boîte de dialogue
placesColorOnSurfaceVariant	Informations sur le lieu
placesColorSecondaryContainer	Arrière-plan du bouton
placesColorOnSecondaryContainer	Texte et icône du bouton
placesColorNeutralContainer	Formes de l'espace réservé de chargement et du badge de date d'avis
placesColorOnNeutralContainer	Date de l'avis, erreur de chargement
placesColorPositiveContainer	Badge "Borne de recharge pour VE disponible"
placesColorOnPositiveContainer	Contenu du badge de borne de recharge pour VE disponible
placesColorPositive	Libellé "Ouvert" pour les lieux
placesColorNegative	Libellé "Fermé" pour les lieux
placesColorInfo	Icône d'entrée accessible
placesColorButtonBorder	Boutons "Ouvrir dans Maps" et "OK"
Typographie
placesTextAppearanceBodySmall	Informations sur le lieu
placesTextAppearanceBodyMedium	Informations sur le lieu, contenu de la boîte de dialogue
placesTextAppearanceLabelMedium	Contenu des badges
placesTextAppearanceLabelLarge	Contenu du bouton
placesTextAppearanceHeadlineMedium	Titres de boîte de dialogue
placesTextAppearanceDisplaySmall	Nom de lieu
placesTextAppearanceTitleSmall	Nom de lieu
Espacement
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
Mesures
placesBorderWidth	Conteneur
placesBorderWidthButton
Forme
placesCornerRadius	Conteneur
placesCornerRadiusButton	Boutons "Ouvrir dans Maps" et "OK" (à l'exclusion du bouton en forme d'icône ronde)
placesCornerRadiusThumbnail	Placer une vignette
placesCornerRadiusCollageOuter	Montage multimédia
placesCornerRadiusCard	Fiche d'établissement, fiche d'avis d'utilisateur
placesCornerRadiusDialog	Boîte de dialogue d'informations Google Maps
Attribution de la marque Google Maps
placesColorAttributionLightTheme	Bouton d'attribution et de divulgation Google Maps avec thème clair (énumérations pour le blanc, le gris et le noir)
placesColorAttributionDarkTheme	Bouton d'attribution et de divulgation du thème sombre Google Maps (énumérations pour le blanc, le gris et le noir)

Couleurs d'attribution

Les Conditions d'utilisation de Google Maps vous obligent à utiliser l'une des trois couleurs de la marque pour l'attribution Google Maps. Cette attribution doit être visible et accessible lorsque des modifications de personnalisation ont été apportées.

Vous pouvez choisir parmi trois couleurs de marque, qui peuvent être définies indépendamment pour les thèmes clair et sombre :

• Thème clair : placesColorAttributionLight avec des valeurs d'énumération pour le blanc, le gris et le noir.
• Thème sombre : placesColorAttributionDark avec des valeurs d'énumération pour le blanc, le gris et le noir.

Exemples

Cet exemple de code montre comment créer un thème qui remplace les attributs de style par défaut. Tous les attributs de thème qui ne sont pas remplacés utilisent les styles par défaut.

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

Exemples complets pour chaque composant

• Exemple de stylisation du composant Place Details.
• Exemple de style du composant Place Search.
• Exemple de style de base du composant Place Autocomplete.