En este tutorial explicaremos como filtrar elementos de un control ListView dependiendo del texto ingresado en un control EditText haciendo uso de la Interfaz TextWatcher.
Proyecto integrador. Las TIC en la sociedad S4.pptx
Tutorial Nro.5 Desarrollo de Aplicaciones Móviles con Android
1. Tutorial 5 de Desarrollo de Aplicaciones Android: Control Listview, Interface TextWatcher
Autor: Ing. Luis Ernesto Castillo Alfaro
En esta oportunidad hablaremos de la forma como se pueden filtrar elementos de una lista según
un texto ingresado, la idea es que conforme se empiece a escribir la lista muestre solamente los
elementos cuyos textos contengan al texto ingresado.
Antes de iniciar el caso práctico hablaremos un poco acerca del control listview de android que es
con el que trabajaremos para nuestro ejemplo a codificar.
ListView: Es un control que permite mostrar elementos en una lista, dichos elementos son
agregados a la lista haciendo uso de un adaptador el cual permite poblar al listview de diferentes
formas como por ejemplo haciendo uso de los elementos pertenecientes a un array o de los
elementos o datos que se obtienen de una consulta a una base de datos.
Como indicamos un control lisview es poblado por medio de un adaptador que es el que provee
acceso a los elementos de la lista a mostrar en el listview.
Bien ahora vamos a empezar el caso práctico, probablemente en Internet hayan visto un ejemplo
parecido sin embargo en este caso hemos decidido cambiar su funcionalidad y el objetivo que
pretende alcanzar.
Caso Práctico: Se tiene una lista de contactos telefónicos y se desea filtrar solo aquellos cuyo
nombre o apellido sea parecido al texto ingresado.
Pasos a seguir:
1- Crear un proyecto con el nombre TextWatcher
2- Agregar al layout principal los controles para nuestra aplicación que en este caso serían: 1
etiqueta, 1 control caja de texto (control EditText en Android) y 1 control listview que
contendrá los elementos de la lista a filtrar, como es sabido la interfaz que será mostrada
de cara al usuario no solo se construye agregando directamente los controles al layout si
2. Tutorial 5 de Desarrollo de Aplicaciones Android: Control Listview, Interface TextWatcher
Autor: Ing. Luis Ernesto Castillo Alfaro
no también definiéndolos en el archivo xml de nuestro layout principal, tal y como se
muestra en la siguiente imagen:
La interfaz que se obtiene luego de definir los controles en el archivo xml del layout
principal es la siguiente:
3- Escribir el código necesario en la actividad principal para que nuestra aplicación cumpla
con su objetivo:
3. Tutorial 5 de Desarrollo de Aplicaciones Android: Control Listview, Interface TextWatcher
Autor: Ing. Luis Ernesto Castillo Alfaro
Bien lo que estamos definiendo en el código son objetos del tipo listview que es el que se
encargará de mostrar la lista de contactos de la agenda a mostrar, de otro lado también
definimos un objeto de tipo EditText en el cual escribiremos el texto que funcionará como
filtro para mostrar solo los elementos de la lista que contengan el texto ingresado en
dicho control EditText. De otro lado también se define en un arreglo de tipo string la lista
de elementos a mostrar en nuestra lista, en este caso hay 10 contactos a mostrar,
finalmente establecemos una variable de tipo string para un arraylist que es donde se irán
agregando los elementos de la lista que cumplan con el requisito de contener el texto
ingresado.
En el evento OnCreate de la actividad escribimos el siguiente código:
En esta porción del código lo que hacemos en primer lugar es enlazar para los objetos
lvcontacto de tipo lisview y para el objeto txtcontacto de tipo EditText con sus respectivos
controles definidos previamente en el archivo xml correspondiente al layout principal. En
segundo lugar lo que hacemos es poblar el objeto lvcontacto con los elementos definidos
en el array de tipo string Contacto_array.
Luego vamos a hacer uso de la interfaz TextWatcher para el control editable txtcontacto, y
por medio de sus métodos podremos establecer que acciones realizar una vez que se
detecte que el texto ingresado en el control txtcontacto ha cambiado.
4. Tutorial 5 de Desarrollo de Aplicaciones Android: Control Listview, Interface TextWatcher
Autor: Ing. Luis Ernesto Castillo Alfaro
En el método OnTextChanged de la interfaz TextWatcher definimos las siguientes líneas
de código:
Lo que definimos en el método OnTextChanged en primer lugar es una variable de tipo
String con el nombre textocontacto que es la que almacenará el texto ingresado en el
control txtcontacto como filtro de los elementos de la lista a mostrar.
Luego establecemos un bucle en el cual participarán cada uno de los elementos del array
Contacto_array desde el primer elemento hasta el último, para cada uno de los elementos
de dicho array se evaluará si cumplen con la condición de contener en su texto el texto
ingresado en el control txtcontacto, el mismo que puede ser parte del nombre o parte
apellido o que también puede ser el nombre o apellido del o los contactos a filtrar y
mostrar, si se cumple dicha condición el elemento del array contacto que está siendo
evaluado será agregado como nuevo elemento al array de tipo lista
array_contactofiltrado. Este proceso se repetirá hasta el último elemento del array
contacto_array.
Finalmente en la siguiente porción de código:
Poblamos el listview lvcontacto con los elementos agregados al array_contactofiltrado
Ahora corremos la aplicación como una aplicación android:
5. Tutorial 5 de Desarrollo de Aplicaciones Android: Control Listview, Interface TextWatcher
Autor: Ing. Luis Ernesto Castillo Alfaro
Como prueba vamos a buscar los contactos que cuyos apellidos o nombres contenga la
letra C:
6. Tutorial 5 de Desarrollo de Aplicaciones Android: Control Listview, Interface TextWatcher
Autor: Ing. Luis Ernesto Castillo Alfaro
Ahora mostraremos los contactos cuyo apellido sea Miranda
y así sucesivamente pueden realizar los filtros que deseen.