Selecciona la plataforma: Android iOS JavaScript

Diseño personalizado

Personalización visual de los detalles del lugar
Ejemplos de personalización visual

Puedes personalizar los colores, la tipografía, el espaciado, los bordes y las esquinas de los siguientes componentes del kit de IU de Places:

El kit de IU de Places ofrece un enfoque de sistema de diseño para la personalización visual basado aproximadamente en Material Design (con algunas modificaciones específicas de Google Maps). Consulta la referencia de Color y Tipografía de Material Design. De forma predeterminada, el diseño se ajusta al lenguaje de diseño visual de Google Maps.

Opciones de personalización de Place Details

Cuando creas una instancia de un fragmento, puedes especificar un tema que anule cualquiera de los atributos de diseño predeterminados. Los atributos de tema que no se anulan usan los diseños predeterminados. 

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

Puedes personalizar los siguientes estilos:

Atributo de tema Uso
Color
placesColorSurface Fondo del contenedor y del diálogo
placesColorOutlineDecorative Borde del contenedor
placesColorPrimary Vínculos, indicador de carga, íconos de descripción general
placesColorOnSurface Encabezados y contenido de diálogos
placesColorOnSurfaceVariant Información del lugar
placesColorSecondaryContainer Fondo del botón
placesColorOnSecondaryContainer Ícono y texto del botón
placesColorNeutralContainer Insignia de revisión de fecha, formas de marcador de posición de carga
placesColorOnNeutralContainer Fecha de revisión, error de carga
placesColorPositiveContainer Insignia de cargador para VE disponible
placesColorOnPositiveContainer Contenido de la insignia de cargador de VE disponible
placesColorPositive Etiqueta de lugar "Abierto ahora"
placesColorNegative Etiqueta de lugar "Cerrado"
placesColorInfo Ícono de entrada accesible
placesColorButtonBorder Botones Abrir en Maps y Aceptar
   
Tipografía
placesTextAppearanceBodySmall Información del lugar
placesTextAppearanceBodyMedium Información del lugar, contenido del diálogo
placesTextAppearanceLabelMedium Contenido de la insignia
placesTextAppearanceLabelLarge Contenido del botón
placesTextAppearanceHeadlineMedium Encabezados de diálogo
placesTextAppearanceDisplaySmall Nombre del lugar
placesTextAppearanceTitleSmall Nombre del lugar
   
Espacios
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
Medición
placesBorderWidth Contenedor
placesBorderWidthButton
   
Forma
placesCornerRadius Contenedor
placesCornerRadiusButton Botones Abrir en Maps y Aceptar (no incluye el botón de ícono redondo)
placesCornerRadiusThumbnail Imagen en miniatura del lugar
placesCornerRadiusCollageOuter Collage de medios
placesCornerRadiusCard Tarjeta de lugar, tarjeta de opinión del usuario
placesCornerRadiusDialog Diálogo de divulgación de Google Maps
   
Atribución de marca de Google Maps
placesColorAttributionLightTheme Botón de divulgación y atribución de Google Maps con tema claro (enums para blanco, gris y negro)
placesColorAttributionDarkTheme Botón de atribución y divulgación de Google Maps con tema oscuro (enums para blanco, gris y negro)

Colores de atribución

atribución
Attribution

Las condiciones del servicio de Google Maps requieren que uses uno de los tres colores de la marca para la atribución de Google Maps. Esta atribución debe ser visible y accesible cuando se realicen cambios de personalización.

Ofrecemos 3 colores de la marca para elegir que se pueden configurar de forma independiente para los temas claros y oscuros:

  • Tema claro: placesColorAttributionLight con valores de enumeración para blanco, gris y negro.
  • Tema oscuro: placesColorAttributionDark con valores de enumeración para blanco, gris y negro.

Ejemplos

En este ejemplo de código, se muestra cómo crear un tema que anule los atributos de diseño predeterminados. Los atributos de tema que no se anulan usan los diseños predeterminados. 
  <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>

Ejemplos completos para cada componente