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 and non-UI kit features:

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

Important:When making visual modifications, you must adhere to the Google Maps attribution requirements. Place details customization options

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.

<stylename="CustomizedPlaceDetailsTheme"parent="PlacesMaterialTheme"><itemname="placesColorPrimary">@color/app_primary_color</item><itemname="placesColorOnSurface">@color/app_color_on_surface</item><itemname="placesColorOnSurfaceVariant">@color/app_color_on_surface</item><itemname="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item><itemname="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 invalues-night/colors.xml

Customization tool

Use this tool to visualize custom configurations in a Places UI Kit element. TheCode tab provides configurations in HTML/CSS, Kotlin/XML, and Swift.

Style properties

You can customize the following styles:

Theme attribute	Usage

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


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


`placesBorderWidth`	Container
`placesBorderWidthButton`


`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


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

<stylename="CustomizedPlaceDetailsTheme"parent="PlacesMaterialTheme"><itemname="placesColorPrimary">@color/app_primary_color</item><itemname="placesColorOnSurface">@color/app_color_on_surface</item><itemname="placesColorOnSurfaceVariant">@color/app_color_on_surface</item><itemname="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item><itemname="placesCornerRadius">20dp</item></style>

Full examples for each component

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.