You are on page 1of 38

Ing.

Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 1










Facultad: Ingeniería


Escuela: Informática y de Sistemas


Docente: Ing. Edwin Cieza Mostacero


Tema: Adaptadores en Android


Curso: Aplicaciones Móviles


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

Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 2

Breve introducción:

La herramienta a utilizar para el desarrollo de este tema es Eclipse, que es
propicio para la elaboración de Aplicaciones Móviles en Android.
Para ser más específicos 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 App’s:
El adaptador actúa como un puente, permite el acceso a elementos.
Se puede decir que los adaptadores son colección de datos, es decir, mediante
el uso de adapters definimos una forma común de acceder a colecciones de
datos.














Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 4


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























Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 5



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





















Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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 aplicación pueda funcionar desde versiones antiguas como
el froyo, hasta las más actuales como KitKat. Luego de todo, damos en “Next”

Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 7


6.- Obtenemos la siguiente pantalla. En la cual desactivamos los “vistos buenos” o en la
informática 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 continuación 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 8


8.- A partir de esta parte, centraremos nuestra atención a la parte izquierda de nuestro
proyecto. Si nos fijamos en la imagen (también está encerrado para señalarlo), 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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
reposarán nuestras vistas que conformarán nuestro diseño. Nos ubicamos en la carpeta
“layout”.




Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 11


14.- Colocamos el nombre de nuestra actividad, la cual llamaremos justamente “actividad”,
procurando estar señalando en la parte inferior (Root Elemento) “LinearLayout” , para verificar
la alineación de nuestra layout. Y finalemte damos en Finish.












15.- Obtenemos la siguiente pantalla, teniendo en la parte inferior (la hemos señalado) dos
partes que son “Graphical Layout” donde nos mostrará gráficamente el diseño de nuestra
actividad y “actividad.xml” que nos mostrará código XML donde podemos diseñar también
pero a través de dicho código.

Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 12


16.- Antes de proceder a trabajar en nuestro diseño, registraremos nuestra actividad
ubicándonos 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 código del Manifest.
















Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 13

18.- Obtenemos lo siguiente:












19.- Antes de añadir el código 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 15

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











23.- Visualizaremos ya el paquete creado.














Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 16



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











25.- Saldrá la siguiente pantalla.



Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 17


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











27.- Obtenemos lo siguiente:

Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 20

32.- Continuamos registrando nuestra actividad yendo a nuestro AndroidManifest, añadiendo
el siguiente código señalado.














33.- Ahora sí, continuamos con el diseño 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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 21

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



35.- Luego de haber “arrastrado”, se verá así.











Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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 botón Clear.











Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 23


38.- Nos queda de la siguiente manera.












39.- Nos ubicamos en nuestra clase.












Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 24

40.- Estando ubicados en nuestra clase, añadiremos el siguiente código señalado. Dicho código
servirá para el contenido de nuestro Spinner o Lista Desplegable:










41.- Descargamos unas imágenes que tengan que ver con las facultades que están
mencionadas en el código: Ingenieria, Ciencias de la Salud, Educacion, Ciencias Contables.

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












Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 25

43.- Arrastramos nuestras imágenes (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. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 26

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















46.- Volvemos a nuestra clase Java, y continuamos colocando código. El cual sirve para llamar
las imágenes desde Java.









Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 27

47.- Colocamos esta línea de código para establecer o llamar a nuestra actividad (referenciarla
desde Java y luego se muestre).












47.- Declaramos variables según su procedencia o vista a la que pertenecen.












Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 28

48.- En la siguiente línea de código, para adaptar a nuestra vista la colección 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 métodos.
Esto se resuelve ubicando el puntero del mouse donde está el error y empezamos a importar y
elaborar métodos. Aquí les mostramos. En este caso hace falta una importación. Damos click
en v“Import ArrayAdapter”, y se solucionará.










Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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 enseñamos
enteriormente) vemos como los errores desaparecieron.













Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 30

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












Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 31

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











54.- Damos click en el botón “Add” y se obtiene lo siguiente:





Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 32

55.- En la ventana que nos apareció, nos ubicamos en la opción “String”, luego OK.











56.- Aparecerá la siguiente pantalla.













Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 33

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











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













Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 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 botón, finalmente presionamos Ok.


60.- Si nos fijamos, el valor de texto de nuestro botón (que anteriormente era “Button”),
ahora tenemos lo siguiente:













Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 35

61.- Damos doble click a nuestro botón y nos llevará a esta parte.











62.- Añadimos el siguiente código, con la finalidad que este botón realice la función del
método “showElemento” que creamos en nuestra clase Java.














Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 36


63.- Vamos a cambiar el tamaño de nuestra ImagView (que es la vista que contiene a
las imágenes) para que tengan todas un mismo tamaño.













64.-- Y queda todo listo para compilar o ejecutar nuestro código. Sin antes hacer un
paréntesis 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 máquina
virtual, la cual mostrará los resultados de toda nuestra tarea desarrollada.








Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 37



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


Luego de cargar el AVD, ejecutamos nuestro proyecto.













Ing. Informática y de Sistemas Aplicaciones Móviles Adaptadores
Ing. Edwin Cieza Página 38



Aquí el resultado: Cuando elegimos alguna facultad es nuestro Spinner, dependiendo lo que
elegimos, la imagen cambiará. Y el botón mostrará información básica como el nombre de la
facultad seleccionada, su id y su posición.















Al presionar el botón brinda la información