Estilo personalizado

Personalização visual dos detalhes do lugar — Exemplos de personalização visual

É possível personalizar as cores, a tipografia, o espaçamento, as bordas e os cantos destes componentes do kit de interface do Places:

O kit de interface do Places oferece uma abordagem de sistema de design para personalização visual baseada aproximadamente no Material Design (com algumas modificações específicas do Google Maps). Consulte a referência do Material Design para Cor e Tipografia. Por padrão, o estilo segue a linguagem de design visual do Google Maps.

Opções de personalização de detalhes do lugar

Ao instanciar um fragmento, você pode especificar um tema que substitui qualquer um dos atributos de estilo padrão. Todos os atributos do tema que não forem substituídos usarão os estilos padrão.

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

Importante:o kit de interface do Places oferece um tema escuro por padrão. Por isso, talvez seja necessário personalizar os temas escuro e claro. Para criar um tema escuro, adicione uma entrada para as cores em values-night/colors.xml

É possível personalizar os seguintes estilos:

Atributo do tema	Uso
Cor
`placesColorSurface`	Segundo plano do contêiner e da caixa de diálogo
`placesColorOutlineDecorative`	Borda do contêiner
`placesColorPrimary`	Links, indicador de carregamento, ícones de visão geral
`placesColorOnSurface`	Títulos, conteúdo da caixa de diálogo
`placesColorOnSurfaceVariant`	Informações sobre o lugar
`placesColorSecondaryContainer`	Plano de fundo do botão
`placesColorOnSecondaryContainer`	Texto e ícone do botão
`placesColorNeutralContainer`	Revisar o selo de data, carregar formas de marcador de posição
`placesColorOnNeutralContainer`	Data da avaliação, erro ao carregar
`placesColorPositiveContainer`	Selo de carregador de VE disponível
`placesColorOnPositiveContainer`	Conteúdo disponível do selo de carregador de VE
`placesColorPositive`	Colocar o marcador "Aberto agora"
`placesColorNegative`	O rótulo "Fechado" agora é "Fechado"
`placesColorInfo`	Ícone de entrada acessível
`placesColorButtonBorder`	Botões "Abrir no Maps" e "OK"

Tipografia
`placesTextAppearanceBodySmall`	Informações sobre o lugar
`placesTextAppearanceBodyMedium`	Informações do lugar, conteúdo da caixa de diálogo
`placesTextAppearanceLabelMedium`	Conteúdo do selo
`placesTextAppearanceLabelLarge`	Conteúdo do botão
`placesTextAppearanceHeadlineMedium`	Títulos de caixa de diálogo
`placesTextAppearanceDisplaySmall`	Nome do lugar
`placesTextAppearanceTitleSmall`	Nome do lugar

Espaçamento
`placesSpacingExtraSmall`
`placesSpacingSmall`
`placesSpacingMedium`
`placesSpacingLarge`
`placesSpacingExtraLarge`
`placesSpacingTwoExtraLarge`

Medição
`placesBorderWidth`	Contêiner
`placesBorderWidthButton`

Forma
`placesCornerRadius`	Contêiner
`placesCornerRadiusButton`	Botões "Abrir no Maps" e "OK" (exclui o botão de ícone redondo)
`placesCornerRadiusThumbnail`	Colocar imagem em miniatura
`placesCornerRadiusCollageOuter`	Colagem de mídia
`placesCornerRadiusCard`	Card de lugar, card de avaliação do usuário
`placesCornerRadiusDialog`	Caixa de diálogo de divulgação do Google Maps

Atribuição de marca do Google Maps
`placesColorAttributionLightTheme`	Botão de atribuição e divulgação do Google Maps no tema claro (enums para branco, cinza e preto)
`placesColorAttributionDarkTheme`	Botão de atribuição e divulgação do Google Maps no tema escuro (enums para branco, cinza e preto)

Cores de atribuição

Os Termos de Serviço do Google Maps exigem que você use uma das três cores da marca para a atribuição do Google Maps. Essa atribuição precisa estar visível e acessível quando as mudanças de personalização forem feitas.

Oferecemos três cores de marca para escolher, que podem ser definidas de forma independente para temas claros e escuros:

Tema claro: placesColorAttributionLight com valores de enumeração para branco, cinza e preto.
Tema escuro: placesColorAttributionDark com valores de enumeração para branco, cinza e preto.

Exemplos

Este exemplo de código mostra como criar um tema que substitui os atributos de estilo padrão. Todos os atributos do tema que não forem substituídos usarão os estilos padrão.

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

Estilo personalizado

Cores de atribuição

Exemplos

Exemplos completos para cada componente