SlideShare a Scribd company logo
1 of 6
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
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:
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.
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:
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:
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.

More Related Content

What's hot

Practica multiplicacion de_dos_numeros
Practica multiplicacion de_dos_numerosPractica multiplicacion de_dos_numeros
Practica multiplicacion de_dos_numeros
ANTHONY OCHOA
 
Practica division de_dos_numeros
Practica division de_dos_numerosPractica division de_dos_numeros
Practica division de_dos_numeros
ANTHONY OCHOA
 
1. introduccion al desarrollo web php parte 1
1.  introduccion al desarrollo web php parte 11.  introduccion al desarrollo web php parte 1
1. introduccion al desarrollo web php parte 1
Julio Martinez
 
Primera aplicación de Android
Primera aplicación de AndroidPrimera aplicación de Android
Primera aplicación de Android
spartha187
 
Practica sustraccion-de-dos-numeros(2)
Practica sustraccion-de-dos-numeros(2)Practica sustraccion-de-dos-numeros(2)
Practica sustraccion-de-dos-numeros(2)
Alejandra Rodriguez
 
CONEXION VISUAL STUDIO.NET - SQL SERVER
CONEXION VISUAL STUDIO.NET - SQL SERVERCONEXION VISUAL STUDIO.NET - SQL SERVER
CONEXION VISUAL STUDIO.NET - SQL SERVER
Darwin Durand
 
apps "operaciones aritmeticas usando spinner"
apps "operaciones aritmeticas usando spinner"apps "operaciones aritmeticas usando spinner"
apps "operaciones aritmeticas usando spinner"
ang13gam3r
 

What's hot (19)

Practica multiplicacion de_dos_numeros
Practica multiplicacion de_dos_numerosPractica multiplicacion de_dos_numeros
Practica multiplicacion de_dos_numeros
 
Practica division de_dos_numeros
Practica division de_dos_numerosPractica division de_dos_numeros
Practica division de_dos_numeros
 
APLICACIONES CREADAS PARA ANDROID
APLICACIONES CREADAS PARA ANDROIDAPLICACIONES CREADAS PARA ANDROID
APLICACIONES CREADAS PARA ANDROID
 
Programa 3 Calcular el sueldo
Programa 3 Calcular el sueldoPrograma 3 Calcular el sueldo
Programa 3 Calcular el sueldo
 
1. introduccion al desarrollo web php parte 1
1.  introduccion al desarrollo web php parte 11.  introduccion al desarrollo web php parte 1
1. introduccion al desarrollo web php parte 1
 
Programa para sumar 2 números
Programa para sumar 2 númerosPrograma para sumar 2 números
Programa para sumar 2 números
 
Primera aplicación de Android
Primera aplicación de AndroidPrimera aplicación de Android
Primera aplicación de Android
 
Android
AndroidAndroid
Android
 
5. modificar datos
5.  modificar  datos5.  modificar  datos
5. modificar datos
 
3. consultar datos
3.  consultar datos3.  consultar datos
3. consultar datos
 
Suma de dos_numeros
Suma de dos_numerosSuma de dos_numeros
Suma de dos_numeros
 
Practica sustraccion-de-dos-numeros(2)
Practica sustraccion-de-dos-numeros(2)Practica sustraccion-de-dos-numeros(2)
Practica sustraccion-de-dos-numeros(2)
 
4. insertar datos
4.  insertar datos4.  insertar datos
4. insertar datos
 
2. hoja de estilo
2.  hoja de estilo2.  hoja de estilo
2. hoja de estilo
 
introduccion al desarrollo de aplicaciones en c#
introduccion al desarrollo de aplicaciones en c#introduccion al desarrollo de aplicaciones en c#
introduccion al desarrollo de aplicaciones en c#
 
Lazarus
LazarusLazarus
Lazarus
 
CONEXION VISUAL STUDIO.NET - SQL SERVER
CONEXION VISUAL STUDIO.NET - SQL SERVERCONEXION VISUAL STUDIO.NET - SQL SERVER
CONEXION VISUAL STUDIO.NET - SQL SERVER
 
apps "operaciones aritmeticas usando spinner"
apps "operaciones aritmeticas usando spinner"apps "operaciones aritmeticas usando spinner"
apps "operaciones aritmeticas usando spinner"
 
Programa 6 presentacion
Programa 6 presentacionPrograma 6 presentacion
Programa 6 presentacion
 

Similar to Tutorial Nro.5 Desarrollo de Aplicaciones Móviles con Android

Controles basicos final
Controles basicos finalControles basicos final
Controles basicos final
profesorpfpd
 
Aplica los fundamentos de programacion web
Aplica los fundamentos de programacion webAplica los fundamentos de programacion web
Aplica los fundamentos de programacion web
miguel9728
 
Integracion i reports_con_netbeans
Integracion i reports_con_netbeansIntegracion i reports_con_netbeans
Integracion i reports_con_netbeans
Dada3311
 
Fundamentosbasicosdevisualbasic
FundamentosbasicosdevisualbasicFundamentosbasicosdevisualbasic
Fundamentosbasicosdevisualbasic
unachi
 

Similar to Tutorial Nro.5 Desarrollo de Aplicaciones Móviles con Android (20)

Controles básicos y controles de selección
Controles básicos y controles de selecciónControles básicos y controles de selección
Controles básicos y controles de selección
 
Controles basicos final
Controles basicos finalControles basicos final
Controles basicos final
 
Controles y Tipos de datos
Controles y Tipos de datosControles y Tipos de datos
Controles y Tipos de datos
 
Aplica los fundamentos de programacion web
Aplica los fundamentos de programacion webAplica los fundamentos de programacion web
Aplica los fundamentos de programacion web
 
Visual basic 1º Año
Visual basic  1º AñoVisual basic  1º Año
Visual basic 1º Año
 
Manual visual studio 2010
Manual visual studio 2010Manual visual studio 2010
Manual visual studio 2010
 
Integracion i reports_con_netbeans
Integracion i reports_con_netbeansIntegracion i reports_con_netbeans
Integracion i reports_con_netbeans
 
Manual android
Manual androidManual android
Manual android
 
Programar aplicaciones windows forms
Programar aplicaciones windows formsProgramar aplicaciones windows forms
Programar aplicaciones windows forms
 
Linq to sql 5
Linq to sql 5Linq to sql 5
Linq to sql 5
 
Fundamentosbasicosdevisualbasic
FundamentosbasicosdevisualbasicFundamentosbasicosdevisualbasic
Fundamentosbasicosdevisualbasic
 
Fundamentos basicos de visual basic
Fundamentos basicos de visual basicFundamentos basicos de visual basic
Fundamentos basicos de visual basic
 
Controles y tipos de datos
Controles y tipos de datosControles y tipos de datos
Controles y tipos de datos
 
manual visual_studio_2010_
manual visual_studio_2010_manual visual_studio_2010_
manual visual_studio_2010_
 
Cuadro lista
Cuadro listaCuadro lista
Cuadro lista
 
Presentación de visual studio (1)
Presentación de visual studio (1)Presentación de visual studio (1)
Presentación de visual studio (1)
 
Tutorial visual basic 6
Tutorial visual basic 6Tutorial visual basic 6
Tutorial visual basic 6
 
Funciones con vectores c++
Funciones con vectores c++Funciones con vectores c++
Funciones con vectores c++
 
TEMAS DE JAVA DEL 11 AL 23
TEMAS DE JAVA DEL 11 AL 23TEMAS DE JAVA DEL 11 AL 23
TEMAS DE JAVA DEL 11 AL 23
 
Controles swing listas
Controles swing listasControles swing listas
Controles swing listas
 

Recently uploaded

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Recently uploaded (10)

Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 

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.