Componente básico do Place Autocomplete

O componente Basic Place Autocomplete do Kit de Interface do Places permite 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 é mostrada abaixo da barra de pesquisa. Quando o usuário toca em um lugar, um objeto de lugar com apenas o ID do lugar é retornado ao desenvolvedor. Esse componente é personalizável.

O componente básico do Place Autocomplete tem as seguintes opções de personalização: densidade da lista e se os ícones de local devem ser incluídos. Use AutocompleteUICustomization para personalizar o componente.

Você pode usar o componente básico do Place Autocomplete 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 será cobrado novamente por essa sessão, a menos que ela expire ou um lugar seja selecionado na lista.

Adicionar o componente básico de preenchimento automático 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 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 Kit de Interface do Places. Consulte a documentação do Place Autocomplete (New) 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 as personalizações da interface. Consulte as opções e instruções de personalização.

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

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

Confira o exemplo completo.

Personalizar o componente básico de preenchimento automático

Personalize o conteúdo

Densidade da lista

Você pode mostrar uma lista de duas linhas ou uma lista multilinha. 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

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 Place Details. O padrão é PlacesMaterialTheme.

Todos os atributos de tema que não são substituídos usam os estilos padrão.

O Kit de Interface do Places oferece um tema escuro por padrão. Portanto, talvez seja necessário personalizar os temas escuro e claro. 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 personalizações de conteúdo e tema ao componente básico de preenchimento automático

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

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

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

Exemplo

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

  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)

  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

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

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