Select platform: Android iOS JavaScript

Custom styling

Place details visual customization — Visual customization examples

You can customize the colors, typography, spacing, borders, and corners of these Places UI kit components:

Places UI kit offers a design system approach to visual customization roughly based on Material Design (with some Google-Maps-specific modifications). See Material Design's reference for Color and Typography. By default, the style adheres to the Google Maps visual design language.

When instantiating a fragment, you can specify a theme that overrides any of the default style attributes. Any theme attributes that are not overridden use the default styles.

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

Important: The Places UI Kit provides a dark theme by default, so you may need to customize both dark and light themes. To create a dark theme, add an entry for the colors in values-night/colors.xml

You can customize the following styles:

Theme attribute	Usage
Color
`placesColorSurface`	Container and dialog background
`placesColorOutlineDecorative`	Container border
`placesColorPrimary`	Links, loading indicator, overview icons
`placesColorOnSurface`	Headings, dialog content
`placesColorOnSurfaceVariant`	Place information
`placesColorSecondaryContainer`	Button background
`placesColorOnSecondaryContainer`	Button text and icon
`placesColorNeutralContainer`	Review date badge, loading placeholder shapes
`placesColorOnNeutralContainer`	Review date, loading error
`placesColorPositiveContainer`	Available EV charger badge
`placesColorOnPositiveContainer`	Available EV charger badge content
`placesColorPositive`	Place "Open" now label
`placesColorNegative`	Place "Closed" now label
`placesColorInfo`	Accessible entrance icon
`placesColorButtonBorder`	Open in maps and OK buttons

Typography
`placesTextAppearanceBodySmall`	Place information
`placesTextAppearanceBodyMedium`	Place information, dialog content
`placesTextAppearanceLabelMedium`	Badge content
`placesTextAppearanceLabelLarge`	Button content
`placesTextAppearanceHeadlineMedium`	Dialog headings
`placesTextAppearanceDisplaySmall`	Place name
`placesTextAppearanceTitleSmall`	Place name

Spacing
`placesSpacingExtraSmall`
`placesSpacingSmall`
`placesSpacingMedium`
`placesSpacingLarge`
`placesSpacingExtraLarge`
`placesSpacingTwoExtraLarge`

Measurement
`placesBorderWidth`	Container
`placesBorderWidthButton`

Shape
`placesCornerRadius`	Container
`placesCornerRadiusButton`	Open in Maps and OK buttons (excludes round icon button)
`placesCornerRadiusThumbnail`	Place thumbnail image
`placesCornerRadiusCollageOuter`	Media collage
`placesCornerRadiusCard`	Place card, User review card
`placesCornerRadiusDialog`	Google Maps disclosure dialog

Google Maps Brand Attribution
`placesColorAttributionLightTheme`	Light theme Google Maps attribution and disclosure button (enums for white, gray, and black)
`placesColorAttributionDarkTheme`	Dark theme Google Maps attribution and disclosure button (enums for white, gray, and black)

Attribution colors

Google Maps' terms of service require you to use one of three brand colors for the Google Maps attribution. This attribution must be visible and accessible when customization changes have been made.

We offer 3 brand colors to choose from that can be independently set for light and dark themes:

Light theme: placesColorAttributionLight with enum values for white, gray, and black.
Dark theme: placesColorAttributionDark with enum valuesfor white, gray, and black.

Examples

This code sample shows how to create a theme that overrides the default style attributes. Any theme attributes that are not overridden use the default styles.

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

Custom styling

Attribution colors

Examples

Full examples for each component