Componente básico do Place Autocomplete

Com o componente Basic Place Autocomplete do Places UI Kit, é possível adicionar um componente de interface individual que retorna um ID de lugar quando um usuário seleciona um lugar. O componente é uma cobertura de tela cheia que oferece uma barra de pesquisa para os usuários inserirem uma consulta. À medida que o usuário digita, uma lista de resultados de preenchimento automático aparece abaixo da barra de pesquisa. Quando o usuário toca em um lugar, um objeto com apenas o ID do lugar é retornado ao desenvolvedor. Esse componente é personalizável.

O componente de preenchimento automático básico de lugares tem as seguintes opções de personalização: densidade da lista e inclusão de ícones de local. Use AutocompleteUICustomization para personalizar o componente.

Você pode usar o componente de preenchimento automático básico de lugares de forma independente ou em conjunto com outras APIs e serviços da Plataforma Google Maps.

Faturamento

A cobrança é feita sempre que o componente é aberto e uma consulta é feita. Você não vai receber cobranças novamente por essa sessão, a menos que ela expire ou um lugar seja selecionado na lista.

Adicionar o componente de preenchimento automático básico ao app

Defina os parâmetros de filtro de preenchimento automático (por exemplo, os tipos a serem retornados, o país para limitar os resultados, as coordenadas da região para os resultados, a origem da solicitação para mostrar informações de distância, se disponíveis) como faria para usar o Place Autocomplete (New) sem o Places UI Kit. Consulte a documentação do Place Autocomplete (novo) para instruções completas e um exemplo do código para criar um filtro de preenchimento automático.

Depois de criar o filtro de preenchimento automático, adicione suas personalizações de interface. Confira as opções e instruções de personalização.

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

Confira o exemplo completo.

Personalizar o componente de preenchimento automático básico

Personalize o conteúdo

Densidade da lista

Você pode escolher exibir uma lista de duas linhas ou uma lista de várias linhas. Use as opções em AutocompleteListDensity (TWO_LINE ou MULTI_LINE) na classe AutocompleteUICustomization. Se você não especificar a densidade da lista, o componente vai mostrar uma lista de duas linhas.

Ícone de local

Você pode escolher se quer mostrar um ícone de lugar padrão na lista de resultados. Use as opções em AutocompleteUIIcon (listItemDefaultIcon ou noIcon) na classe AutocompleteUICustomization.

Personalizar o tema

Ao instanciar um fragmento, você pode especificar um tema que substitui qualquer um dos atributos de estilo padrão. É possível personalizar as cores, a tipografia, o espaçamento, as bordas e os cantos do componente "Detalhes do lugar". O padrão é PlacesMaterialTheme.

Todos os atributos do tema que não forem substituídos usarão os estilos padrão.

O Places UI Kit oferece um tema escuro por padrão. Por isso, talvez seja necessário personalizar os temas claro e escuro. Para personalizar o tema escuro, adicione uma entrada para a cor em values-night/colors.xml.

Consulte a seção Estilo personalizado para mais informações sobre temas.

Adicionar conteúdo e personalizações de tema ao componente de preenchimento automático básico

Use a classe AutocompleteUICustomization para personalizar o componente de preenchimento automático básico.

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

Exemplo

Adicione um componente de preenchimento automático básico personalizado.

Kotlin

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

Java

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

Personalizar o tema

 <style name="CustomizedTheme" 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>