Está en la página 1de 38

Ing.

Informtica y de Sistemas Aplicaciones Mviles Adaptadores


Ing. Edwin Cieza Pgina 1










Facultad: Ingeniera


Escuela: Informtica y de Sistemas


Docente: Ing. Edwin Cieza Mostacero


Tema: Adaptadores en Android


Curso: Aplicaciones Mviles


Integrantes de nuestro Grupo N 4:
Shirley Agurto Vichez
Joseph Saldarriaga

Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 2

Breve introduccin:

La herramienta a utilizar para el desarrollo de este tema es Eclipse, que es
propicio para la elaboracin de Aplicaciones Mviles en Android.
Para ser ms especficos e ir al punto que nos toca mostrar, Adaptadores en
Android, queremos brindar unos cortos conceptos de los Adapters para
entender su utilidad en las Apps:
El adaptador acta como un puente, permite el acceso a elementos.
Se puede decir que los adaptadores son coleccin de datos, es decir, mediante
el uso de adapters definimos una forma comn de acceder a colecciones de
datos.














Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 3


Pasaremos a ver el uso de los Adapters al trabajar con
Spinner o Listas Desplegables





1.- Abrimos nuestro Eclipse dando doble click en el cono.













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 4


2.- Despus de cargar el eclipse, nos mostrar la siguiente pantalla. Estando ya listo para
empezar a desarrollar nuestro Proyecto.























Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 5



3.- Nos ubicamos en el Men, siguiendo lo siguiente File -> New -> Android Application
Project, tal como se muestra en la imagen.





















Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 6


4.- Obtendremos la siguiente pantalla.












5.- Escribimos el nombre de nuestro proyecto: MySpinner, en el lugar que se le requiere, es
decir en Application Name. Y quitando los temas, modificando el combo de Theme, y
seleccionando None. Dejamos los Api que salen tal como se muestra en la imagen, por
motivos de versiones, para que la aplicacin pueda funcionar desde versiones antiguas como
el froyo, hasta las ms actuales como KitKat. Luego de todo, damos en Next

Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 7


6.- Obtenemos la siguiente pantalla. En la cual desactivamos los vistos buenos o en la
informtica llamados checks, de las propiedades Create custom launcher icon, y Create
activity. Dando Finish, luego de ello. Esperamos que cargue hasta que lance la pantalla del
paso que a continuacin sigue.










7.- Podemos apreciar (lo hemos encerrado para que usted se d cuenta) en la parte izquierda,
que se muestra el proyecto creado con el nombre que le dimos en los pasos anteriores.












Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 8


8.- A partir de esta parte, centraremos nuestra atencin a la parte izquierda de nuestro
proyecto. Si nos fijamos en la imagen (tambin est encerrado para sealarlo), hay una
flechita, la cual indica que podemos desplegar para visualizar todo lo que trae el proyecto.
Hagamos click en esta flechita desplegable.










9.- Luego de desplegar obtendremos lo siguiente:













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 9

10.- Ya sabiendo previamente lo que es desplegar, nos ubicamos en la carpeta res y
desplegamos. Y obtendremos lo siguiente:












11.- Ahora s, entramos al proceso de desarrollar nuestra Actividad, la cual es donde
reposarn nuestras vistas que conformarn nuestro diseo. Nos ubicamos en la carpeta
layout.




Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 10


12.- Ubicados en la carpeta layoutu, damos click derecho, vamos a New -> Android XML File.












13.- Acto seguido nos aparecer la siguiente pantalla.

Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 11


14.- Colocamos el nombre de nuestra actividad, la cual llamaremos justamente actividad,
procurando estar sealando en la parte inferior (Root Elemento) LinearLayout , para verificar
la alineacin de nuestra layout. Y finalemte damos en Finish.












15.- Obtenemos la siguiente pantalla, teniendo en la parte inferior (la hemos sealado) dos
partes que son Graphical Layout donde nos mostrar grficamente el diseo de nuestra
actividad y actividad.xml que nos mostrar cdigo XML donde podemos disear tambin
pero a travs de dicho cdigo.

Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 12


16.- Antes de proceder a trabajar en nuestro diseo, registraremos nuestra actividad
ubicndonos en Android Manifest, haciendo doble click sobre l.







17.- Obtenemos la siguiente pantalla, damos click en el lugar donde indica la imagen. La cual
contiene el cdigo del Manifest.
















Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 13

18.- Obtenemos lo siguiente:












19.- Antes de aadir el cdigo necesario para el registro de nuestra actividad, vamos a crear su
clase respectiva, ya que la necesitaremos como referencia al momento del registro. Nos
ubicamos en la carpeta src.



Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 14

20.- Luego de habernos ubicado en la carpeta src, damos click derecho sobre ella, y nos
ubicamos en New, luego en Package, para crear antes que nada el paquete donde se ubicar
nuestra clase. De la siguiente forma:









21.- Obtenemos la siguiente pantalla:


Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 15

22.- Colocamos el nombre de nuestro paquete, seguido de Finish:











23.- Visualizaremos ya el paquete creado.














Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 16



24.- Con un click nos ubicamos en este paquete recin creado, dando click derecho, seguido de
New, finalmente en Class.











25.- Saldr la siguiente pantalla.



Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 17


26.- Colocamos los siguientes datos, seguido de presionar Finish:











27.- Obtenemos lo siguiente:

Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 18

28.- Ubicamos el puntero en un lugar blanco del cuerpo de la clase:












29.- Nos ubicamos en Source, luego en Override/Implement Methods.













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 19

30.- Obtenemos la siguiente pantalla, la cual ubicamos el onCreate(Bundle), seguido de
Ok.











31.- Se obtiene lo siguiente dentro de nuestra clase creada.



Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 20

32.- Continuamos registrando nuestra actividad yendo a nuestro AndroidManifest, aadiendo
el siguiente cdigo sealado.














33.- Ahora s, continuamos con el diseo en nuestra actividad. Nos ubicamos nuevamente en la
carpteta layout, y dentro de ella se encuentra nuestra actividad la cual denominamos
actividad.xml, le damos doble click.

Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 21

34.- Empezamos a arrastrar hasta nuestra actividad una vista llamada Spinner.



35.- Luego de haber arrastrado, se ver as.











Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 22


36.- Arrastrando de la misma manera, jalamos una vista llamada ImageView, ubicada en la
carpeta de vistas llamada Images & Media:



37.- Al arrastrar la vista mencionada anteriormente, aparecer la siguiente ventana, en la cual
daremos click en botn Clear.











Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 23


38.- Nos queda de la siguiente manera.












39.- Nos ubicamos en nuestra clase.












Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 24

40.- Estando ubicados en nuestra clase, aadiremos el siguiente cdigo sealado. Dicho cdigo
servir para el contenido de nuestro Spinner o Lista Desplegable:










41.- Descargamos unas imgenes que tengan que ver con las facultades que estn
mencionadas en el cdigo: Ingenieria, Ciencias de la Salud, Educacion, Ciencias Contables.

42.- No ubicamos en la tarjeta dragable-mdpi, ya que es donde guardaremos nuestras
imgenes que usaremos en nuestro proyecto.












Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 25

43.- Arrastramos nuestras imgenes (una por una) a esta carpeta, de la siguiente manera:













44.- Luego de haber arrastrado nuestra imagen a la carpeta drawable mdpi, nos aparecer
la siguiente ventana, a la cual daremos OK.











Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 26

45.- Nos damos cuenta que la imagen ya aparece en dicha carpeta. Hacemos de la misma
forma con las otras tres imgenes. Y nos quedar de la siguiente manera.















46.- Volvemos a nuestra clase Java, y continuamos colocando cdigo. El cual sirve para llamar
las imgenes desde Java.









Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 27

47.- Colocamos esta lnea de cdigo para establecer o llamar a nuestra actividad (referenciarla
desde Java y luego se muestre).












47.- Declaramos variables segn su procedencia o vista a la que pertenecen.












Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 28

48.- En la siguiente lnea de cdigo, para adaptar a nuestra vista la coleccin de datos que se
mostrar en la lista desplegable o Spinner.













49.- No nos asustemos por los errores, es porque hace falta algunas importaciones y mtodos.
Esto se resuelve ubicando el puntero del mouse donde est el error y empezamos a importar y
elaborar mtodos. Aqu les mostramos. En este caso hace falta una importacin. Damos click
en vImport ArrayAdapter, y se solucionar.










Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 29


50.- Vemos que el error en esta fila ya desapareci.







51.- Luego de haber dado click e implementado lo que se solicitaba (como lo enseamos
enteriormente) vemos como los errores desaparecieron.













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 30

52.- Nuevamente vamos a nuestra actividad para arrastrar un Botn (se encuentra en la
carpeta de vistas llamado Form Widgets) a nuestra vista (como ya lo hemos mostrado en pasos
anteriores). Quedando as.












Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 31

53.- Vamos a la carpeta value, que se encuentra debajo de la carpeta layout. Y a
continuacin damos doble click sobre string. Y obtenemos lo siguiente:











54.- Damos click en el botn Add y se obtiene lo siguiente:





Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 32

55.- En la ventana que nos apareci, nos ubicamos en la opcin String, luego OK.











56.- Aparecer la siguiente pantalla.













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 33

57.- Lo que aqu colocaremos nos servir para darle un contenido de texto a alguna vista. En
este caso, a nuestro botn. Colocamos lo siguiente: Name: btninformacion y de Value:
INFORMACION Y guardamos con Crt+S.











58.- Volvemos a nuestra actividad, y sealando a nuestro Button, vamos a sus propiedades, y
damos click en el lugar donde muestra la siguiente imagen.













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 34

59.- Nos arrojar la siguiente pantalla, en la cual elegimos btninformacion, ya que es el
nombre de nuestro String que contiene el valor Informacion, que es lo que queremos que
aparezca en nuestro botn, finalmente presionamos Ok.


60.- Si nos fijamos, el valor de texto de nuestro botn (que anteriormente era Button),
ahora tenemos lo siguiente:













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 35

61.- Damos doble click a nuestro botn y nos llevar a esta parte.











62.- Aadimos el siguiente cdigo, con la finalidad que este botn realice la funcin del
mtodo showElemento que creamos en nuestra clase Java.














Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 36


63.- Vamos a cambiar el tamao de nuestra ImagView (que es la vista que contiene a
las imgenes) para que tengan todas un mismo tamao.













64.-- Y queda todo listo para compilar o ejecutar nuestro cdigo. Sin antes hacer un
parntesis y recordar que ante todo lo que hagamos no olvidemos GUARDAR CAMBIOS con
Crt+S. Antes de compilar debemos de cargar nuestro AVD, que ya anteriormente se ense a
crear dicho AVD. Ahora solamente ejecutaremos para que empiece a cargar nuestra mquina
virtual, la cual mostrar los resultados de toda nuestra tarea desarrollada.








Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 37



Presionamos en Launch, como ya sabemos. Y esperamos que cargue.


Luego de cargar el AVD, ejecutamos nuestro proyecto.













Ing. Informtica y de Sistemas Aplicaciones Mviles Adaptadores
Ing. Edwin Cieza Pgina 38



Aqu el resultado: Cuando elegimos alguna facultad es nuestro Spinner, dependiendo lo que
elegimos, la imagen cambiar. Y el botn mostrar informacin bsica como el nombre de la
facultad seleccionada, su id y su posicin.















Al presionar el botn brinda la informacin