Elemento AutoCompleteTextView en Android

En esta entrada de Android vamos a aprender a usar el elemento AutoCompleteTextView en Android.

---

Es un tutorial básico, en el que veremos como funciona este elemento en Android. Lo habremos visto en diferentes aplicaciones, en la cual escribimos algo en un TextView, y a continuación se nos despliega una lista debajo con sugerencias de elementos que contienen el mismo texto que hemos introducido en el TextView.

Dicho esto vamos a ponernos manos a la obra:

• Creación del Proyecto Android

  Para crear nuestro proyecto nos vamos a dirigir a File -> New -> Android Application Project. En el caso de que esta última opción no esté disponible, iremos a “Other”, en la cual nos aparecerá una lista de todos los tipos de proyecto que podemos crear, y buscaremos “Android Application Project”, o podemos poner Android en la caja de texto y se nos filtrará la lista.

  Una vez hecho esto, vamos a establecer un nombre a nuestro proyecto, en mi caso lo he llamado EjemploAutoCompleteTextView, aunque podeis darle el nombre que deseeis. Las demás opciones podemos dejarlas como están.

  Cuando mediante el asistente se nos dé a elegir el nombre de nuestra primera Activity, le pondremos de nombre AutoComplete, aunque podeis poner el que querais, al igual que darle nombre a su archivo layout, el cual el mío se llama activity_auto_complete.xml.

  Cuando hayamos terminado todos los pasos del asistente, estaremos preparados para crear nuestra aplicación.

• AutoComplete

  Una vez tenemos nuestro proyecto creado, tendremos nuestra clase principal que será la Activity que tendrá la carga del proceso, y su layout el cual contendrá el aspecto que mostrará nuestra aplicación. A continuación vemos el código de neustro layout, que se encuentra en la carpeta res/layout/activity_auto_complete.xml:

  		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  		    xmlns:tools="http://schemas.android.com/tools"
  		    android:layout_width="match_parent"
  		    android:layout_height="match_parent"
  		    android:orientation="vertical"
  		    tools:context=".AutoComplete" >
  		
  		    <TextView
  		        android:layout_width="fill_parent"
  		        android:layout_height="wrap_content"
  		        android:text="Nombre de SO" />
  		
  		    <AutoCompleteTextView
  		        android:id="@+id/txtOS"
  		        android:layout_width="fill_parent"
  		        android:layout_height="wrap_content" />
  		
  		</LinearLayout>
  		

  Como vemos, tenemos un TextView cuya funcionalización es meramente descriptiva. A continuación tenemos el elemento AutoCompleteTextView, el cual será en el que escribamos y en el que nos aparecerá la sugerencia.

  Nuestra GUI es muy básica, pero para aprender la funcionalidad de este elemento no necesitamos mas.

  Lo siguiente será añadir la funcionalidad a nuestra clase, para que nuestro elemento funcione en la aplicación:

  		package sekth.droid.autocompletetext;
  
  		import android.app.Activity;
  		import android.os.Bundle;
  		import android.widget.ArrayAdapter;
  		import android.widget.AutoCompleteTextView;
  		
  		public class AutoComplete extends Activity {
  		
  			// Array de String con los datos que usaremos para poder filtrar
  		
  			private String[] os = { "Android", "Windows Vista", "Windows 7",
  					"Windows 8", "Ubuntu 12.04", "Ubuntu 12.10", "Mac OSX", "iOS 5",
  					"iOS 6", "Solaris", "Kubuntu", "Suse" };
  		
  			@Override
  			protected void onCreate(Bundle savedInstanceState) {
  				super.onCreate(savedInstanceState);
  				setContentView(R.layout.activity_auto_complete);
  		
  				ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
  						android.R.layout.simple_dropdown_item_1line, os);
  		
  				AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.txtOS);
  		
  				// Numero de caracteres necesarios para que se empiece
  				// a mostrar la lista
  				textView.setThreshold(3);
  		
  				// Se establece el Adapter
  				textView.setAdapter(adapter);
  			}
  		
  		}
  		

  Como variable de instancia hemos creado un array de String con varios Sistemas Operativos, hemos agregado varios Windows XXXX para que podamos ver el funcionamiento del View en cuestión, y es el que usaremos para probarlo.

  Luego, en el método onCreate hemos creado un ArrayAdapter, el cual será el adaptador que adaptará los datos del array al AutoCompleteTextView, el cual le pasamos como argumento en el constructor, además del Context de la Activity y el tipo de elemento que se va a mostrar, en este caso una lista dropdown.

  		ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
  				android.R.layout.simple_dropdown_item_1line, os);
  		

  A continuación, inicializamos el AutoCompleteTextView con el que tenemos en el xml y llamamos a 2 métodos:

  		AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.txtOS);
  		

  • setThreshold(3): Este método recoge un int como argumento, el cual especifica la cantidad de letras que tenemos que escribir para que empiecen a mostrarse sugerencias. Al poner 3 nosotros, comprobaremos que hasta que no escribamos la 3ª letra, no empezarán a salir sugerencias.
  • setAdapter(adapter): Le pasamos el adapter que instanciamos con anterioridad, por tanto nuestro AutocompleteTextView tendrá ya cargados todos los elementos de nuestro array.

Con esto nuestra aplicación ya es funcional, y podemos probarla en nuestro emulador. A continuación vemos unas capturas de pantalla con el resultado:

Un vídeo sobre nuestra aplicación en ejecución para ver su comportamiento:

---

Con esta entrada hemos visto este elemento, que nos puede ser muy útil en ocasiones en las que tengamos que filtrar datos mediante un texto, lo cuál en cualquier aplicación con algún elemento de búsqueda nos podría ser útil.

El código del ejemplo podeis descargarlo de aquí.

Sin mas, cualquier corrección o aporte son bienvenidos.

Saludos!!!