¿Cómo implementar la barra de autocompletado de lugares de Google en Android?

Si alguna vez usó Google Maps en un dispositivo móvil o accedió desde una computadora de escritorio, definitivamente debe haber escrito alguna ubicación en la barra de búsqueda y seleccionado uno de sus resultados. El resultado podría haber tenido campos como una dirección, números de teléfono, calificaciones, horarios, etc. Además, si alguna vez buscó un lugar en google.com desde una computadora de escritorio, debe haber obtenido muchos resultados de búsqueda junto con una tarjeta de lugar con los parámetros antes mencionados alineados desde la derecha.

Ambas aplicaciones implementan una sola API, que se conoce públicamente como la API de lugares. La barra de autocompletar es una característica de Places API, que recomienda una lista de ubicaciones en función de las palabras escritas por el usuario en la barra de búsqueda. Con la ayuda de Places API, implementaremos AutocompleteBar y obtendremos información de la ubicación.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin, así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: obtenga y oculte la clave API

Nuestra aplicación utiliza la API de lugares de Google para implementar la barra de autocompletar, por lo que necesitamos obtener la clave de la API de lugares de Google. Para obtener una clave de API, consulte Generación de claves de API para usar cualquier API de Google . Ocultar una clave API es esencial y para hacerlo, consulte ¿Cómo ocultar API y claves secretas en Android Studio? .

Paso 3: agregar la dependencia en el archivo build.gradle

Necesitamos importar bibliotecas que admitan la implementación de nuestra barra de Autocompletar. Como la barra de autocompletar es una función de la API de Places, debemos agregar su última dependencia en el archivo build.gradle . La siguiente es la dependencia que se debe agregar.

implementación ‘com.google.android.libraries.places:places:2.4.0’

Paso 4: agregue permiso de Internet en su archivo de manifiesto

Navegue a la aplicación > carpeta de manifiesto y anote los siguientes permisos. 

<!–Permiso de Internet y permiso de acceso a la red–>

<usos-permiso android:name=”android.permission.INTERNET”/>

Paso 5: Implementación del fragmento de barra de Autocompletar en el archivo activity_main.xml (front-end)

aplicación > res > diseño > actividad_principal.xml actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="40sp"
        android:layout_marginLeft="10sp"
        android:layout_marginRight="10sp"
        android:background="@android:color/white">
        <fragment
            android:id="@+id/autocomplete_fragment1"
            android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
  
    <TextView
        android:id="@+id/tv1"
        android:layout_below="@id/ll1"
        android:layout_marginTop="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        />
  
</RelativeLayout>

Paso 6: Trabajar con MainActivity.kt (back-end)

Lo que hicimos en resumen es:

1. Obtuve la clave API que almacenamos en el paso 2 .
2. Inicializó la API de Places con el uso de la clave API.
3. Inicializó el fragmento de Autocompletar en el diseño (actividad_principal.xml).
4. Declaró los parámetros de ubicación que deseamos obtener de la API.
5. Declarado en el evento de escucha seleccionado, que publica los parámetros en la vista de texto en el diseño cuando se hace clic en la ubicación desde los resultados de la barra de autocompletar.

La función onError es una función miembro del oyente seleccionado, que arrojará un mensaje de brindis «Ocurrió algún error» en caso de falla. Una causa general podría ser la falta de disponibilidad de Internet. MainActivity.kt

package org.geeksforgeeks.myapplication
  
import android.content.pm.ApplicationInfo
import android.content.pm.PackageManager
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import android.widget.Toast
import com.google.android.gms.common.api.Status
import com.google.android.libraries.places.api.Places
import com.google.android.libraries.places.api.model.Place
import com.google.android.libraries.places.widget.AutocompleteSupportFragment
import com.google.android.libraries.places.widget.listener.PlaceSelectionListener
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Fetching API_KEY which we wrapped
        val ai: ApplicationInfo = applicationContext.packageManager
            .getApplicationInfo(applicationContext.packageName, PackageManager.GET_META_DATA)
        val value = ai.metaData["api_key"]
        val apiKey = value.toString()
  
        // Initializing the Places API 
          // with the help of our API_KEY
        if (!Places.isInitialized()) {
            Places.initialize(applicationContext, apiKey)
        }
  
        // Initialize Autocomplete Fragments 
          // from the main activity layout file
        val autocompleteSupportFragment1 = supportFragmentManager.findFragmentById(R.id.autocomplete_fragment1) as AutocompleteSupportFragment?
  
        // Information that we wish to fetch after typing 
          // the location and clicking on one of the options
        autocompleteSupportFragment1!!.setPlaceFields(
            listOf(
  
                Place.Field.NAME,
                Place.Field.ADDRESS,
                Place.Field.PHONE_NUMBER,
                Place.Field.LAT_LNG,
                Place.Field.OPENING_HOURS,
                Place.Field.RATING,
                Place.Field.USER_RATINGS_TOTAL
  
            )
        )
  
        // Display the fetched information after clicking on one of the options
        autocompleteSupportFragment1.setOnPlaceSelectedListener(object : PlaceSelectionListener {
            override fun onPlaceSelected(place: Place) {
  
                // Text view where we will
                  // append the information that we fetch
                val textView = findViewById<TextView>(R.id.tv1)
  
                // Information about the place
                val name = place.name
                val address = place.address
                val phone = place.phoneNumber.toString()
                val latlng = place.latLng
                val latitude = latlng?.latitude
                val longitude = latlng?.longitude
  
                val isOpenStatus : String = if(place.isOpen == true){
                    "Open"
                } else {
                    "Closed"
                }
  
                val rating = place.rating
                val userRatings = place.userRatingsTotal
  
                textView.text = "Name: $name \nAddress: $address \nPhone Number: $phone \n" +
                        "Latitude, Longitude: $latitude , $longitude \nIs open: $isOpenStatus \n" +
                        "Rating: $rating \nUser ratings: $userRatings"
            }
  
            override fun onError(status: Status) {
                Toast.makeText(applicationContext,"Some error occurred", Toast.LENGTH_SHORT).show()
            }
        })
  
    }
}

Producción:

Nota: Active Internet (Wifi/Datos móviles) antes de iniciar la aplicación.