Componente básico do Place Autocomplete

O componente básico do 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. Conforme 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 de lugar é retornado ao desenvolvedor. Esse componente é personalizável.

O componente Basic Place Autocomplete 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 Place Autocomplete básico 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 outra cobrança por essa sessão, a menos que ela expire ou que um lugar seja selecionado na lista.

Adicionar o componente Basic Autocomplete ao app

Defina os parâmetros de filtro do 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 exibir informações de distância, se disponíveis) como você faria para usar o Place Autocomplete (novo) sem o kit de interface do Places. Consulte a documentação do Place Autocomplete (novo) para ver 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. Confira 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 de preenchimento automático básico

Personalize o conteúdo

Densidade da lista

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

É possível especificar um tema que substitua 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.

Os atributos de tema que não forem substituídos vão usar os estilos padrão.

O Kit de Interface do Places oferece um tema escuro por padrão, então 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 personalizações de conteúdo e tema ao componente de preenchimento automático básico

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

.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

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

  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 Places UI Kit oferece um tema escuro por padrão, então 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.

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