Componente básico de Place Autocomplete

El componente Basic Place Autocomplete del kit de IU de Places te permite agregar un componente de IU individual que devuelve un ID de lugar cuando un usuario selecciona un lugar. El componente es una pantalla completa que proporciona una barra de búsqueda para que los usuarios ingresen una consulta. A medida que el usuario escribe, aparecerá una lista de resultados de autocompletado debajo de la barra de búsqueda. Cuando el usuario presiona un lugar, se devuelve al desarrollador un objeto de lugar que solo contiene el ID del lugar. Este componente se puede personalizar.

El componente Basic Place Autocomplete tiene las siguientes opciones de personalización: densidad de la lista y si se deben incluir íconos de ubicación. Usa AutocompleteUICustomization para personalizar el componente.

Puedes usar el componente Basic Place Autocomplete de forma independiente o en conjunto con otras APIs y servicios de Google Maps Platform.

Facturación

Se te factura cada vez que se abre el componente y se realiza una búsqueda. No se te volverá a facturar por esa sesión, a menos que venza o se seleccione un lugar de la lista.

Agrega el componente Basic Autocomplete a tu app

Configura los parámetros del filtro de autocompletado (por ejemplo, los tipos que se devolverán, el país al que se limitarán los resultados, las coordenadas de la región para los resultados, el origen de la solicitud para mostrar información de distancia, si está disponible) como lo harías para usar Place Autocomplete (nuevo) sin el kit de IU de Places. Consulta la documentación de Place Autocomplete (nuevo) para obtener instrucciones completas y un ejemplo del código para crear un filtro de autocompletado.

Una vez que hayas creado tu filtro de autocompletado, agrega tus personalizaciones de la IU. Consulta las opciones y las instrucciones de personalización.

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

Consulta el ejemplo completo.

Personaliza el componente Autocompletar básico

Personalice el contenido

Densidad de la lista

Puedes elegir mostrar una lista de dos líneas o una lista de varias líneas. Usa las opciones en AutocompleteListDensity (TWO_LINE o MULTI_LINE) en la clase AutocompleteUICustomization. Si no especificas la densidad de la lista, el componente mostrará una lista de dos líneas.

Ícono de ubicación

Puedes elegir si quieres mostrar un ícono de lugar predeterminado en la lista de resultados. Usa las opciones en AutocompleteUIIcon (listItemDefaultIcon o noIcon) en la clase AutocompleteUICustomization.

Cómo personalizar el tema

Cuando creas una instancia de un fragmento, puedes especificar un tema que anule cualquiera de los atributos de diseño predeterminados. Puedes personalizar los colores, la tipografía, el espaciado, los bordes y las esquinas del componente Place Details. El valor predeterminado es PlacesMaterialTheme.

Los atributos de tema que no se anulan usan los diseños predeterminados.

El kit de IU de Places proporciona un tema oscuro de forma predeterminada, por lo que es posible que debas personalizar los temas claro y oscuro. Para personalizar el tema oscuro, agrega una entrada para el color en values-night/colors.xml.

Consulta la sección Personalización del diseño para obtener más información sobre la aplicación de temas.

Agrega personalizaciones de contenido y temas al componente Basic Autocomplete

Usa la clase AutocompleteUICustomization para personalizar el componente Autocompletar 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()
)

Ejemplo

Agrega un componente de Autocomplete 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);

Cómo personalizar el 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>