Este documento presenta un ejemplo de desarrollo de una aplicación simple en Android llamada SobreTeleco. Explica los pasos para crear una actividad y vincularla a un diseño de interfaz de usuario, añadir funcionalidad a botones y manejar eventos, y depurar la aplicación revisando los registros. El objetivo es entender los conceptos básicos de desarrollo de interfaces de usuario en Android como actividades, diseños, referencias a recursos y depuración mediante registros.

1. Análisis y Diseño
de Software
Departamento de Ingeniería de Sistemas Telemáticos
http://moodle.dit.upm.es
Ejemplo Desarrollo y Depuración
Ejemplo SobreTeleco
Carlos A. Iglesias <cif@gsi.dit.upm.es>
1.0 18/04/13

2. Desarrollo con Android 2
Teoría
Ejercicio práctico en el ordenador
Ampliación de conocimientos
Lectura / Vídeo / Podcast
Práctica libre / Experimentación
Leyenda

3. Ejemplo SobreTeleco 3
Temario
● 4.1 Introducción a Android
● 4.2 Introducción Desarrollo con Android
● 4.3 Ejemplo Desarrollo y Depuración
● 4.4 Actividades
● 4.5 Interfaces de Usuario
● 4.6 Intenciones
● 4.7 Acceso a Datos
● 4.8 Preferencias
● 4.9 Hebras e internacionalización

4. Ejemplo SobreTeleco 4
Bibliografía
● Libro de texto:
– [Gar10] Learning Android, Marko Gargenta,
O'Reilly, 2010. Disponible en
http://ofps.oreilly.com/titles/9781449390501/
– Capítulos 4-5
– http://www.youtube.com/watch?v=SW82-YOOMIs
● Android Developers
– http://developer.android.com/guide/topics/fundamentals.html
– http://developer.android.com/guide/topics/ui/index.html

5. Ejemplo SobreTeleco 5
Bibliografía complementaria
●
Tutorial Android UI
– http://mobile.tutsplus.com/series/android-user-interface-design/
– http://developer.android.com/resources/tutorials/views/index.html
– http://www.droiddraw.org/widgetguide.html
● Ejemplos
– http://apcmag.com/building-a-simple-android-app.htm
– http://www.maestrosdelweb.com/editorial/curso-android-construir-lector-de-feeds/

6. Ejemplo SobreTeleco 6
Objetivos
● Entender los conceptos básicos para
desarrollar una interfaz de usuario en
Android
● Entender la estructura de un proyecto
Android
● Aprender a desarrollar un proyecto
Android: programar, ejecutar, y depurar
● Aprender vista depuración: LogCat

7. Ejemplo SobreTeleco 7
Interfaces en Android
● “Separation of
concerns”
– Funcionalidad
(Java)
– Disposición (XML)
● Podemos definir
diferentes layouts
para diferentes
dispositivos

8. Ejemplo SobreTeleco 8
UI en Android
● En Android podemos definir de dos
formas las interfaces:
– Declarativa:
• En XML
• Parecido a crear una página web en HTML
– Programática:
• En Java
• Parecido a interfaces en Java (Swing / AWT)

9. Ejemplo SobreTeleco 9
UIs: Visión general:
Views y Layout
● Vista (View): componente
● Disposición (Layout): contenedor

10. Ejemplo SobreTeleco 10
El lenguaje XML (eXtensible
Markup Language)
● Repasar FTEL
– http://www.gsi.dit.upm.es/~gfer/ftel/Procesadores.pdf
● XML está diseñado para la
representación de datos a efectos de
almacenamiento y comunicación<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE asignaturas2010 SYSTEM "asignaturas.dtd">
<asignaturas2010>
<asignatura codigo="95000024" acronimo="ADSW">
<nombre>Análisis y Diseño del Software</nombre>
<creditos>4.5</creditos>
<semestre S="2" />
<tipo T="obligatoria" />
<guia>
<url href="http//www.lab.dit.upm.es/adsw" />
</guia>
</asignatura>
<!--otras asignaturas-->
</asignaturas2010>

11. Ejemplo SobreTeleco 11
Ejercicio: SobreTeleco
● Vamos a seguir el ejemplo un poco
modificado para la asignatura
– http://apcmag.com/building-a-simple-android-app.htm
● Pasos:
– Crear un proyecto Android en Eclipse:
SobreTeleco

12. Ejemplo SobreTeleco 12
Explorar proyecto Android
CÓDIGO FUENTE
CÓDIGO GENERADO
BIBLIOTECAS
CÓDIGO COMPILADO DEVX, FICHERO APK
RECURSOS
CONFIGURACIÓN
ASSET

13. Ejemplo SobreTeleco 13
Ejercicio
● Explora la estructura del proyecto
HolaMundo que hicimos en el capítulo
anterior.
– ¿Qué hay en bin?
– Pincha en main.xml, y selecciona la pestaña
graphicalLayout ¿qué ves?

14. Ejemplo SobreTeleco 14
Explorando un proyecto...
● source: fuentes java del proyecto
● gen: ficheros generados del proyecto. Android
genera R.java que 'mapea' los recursos UI XML a
Java
● library: framework Android
● assets: ficheros de cualquier formato, que
podemos tratar como InputStream (veremos)
● res: recursos, organizados en una estructura fija
en imágenes, layout y texto. Se referenciarán con
R: R.layout (veremos)

15. Ejemplo SobreTeleco 15
Recursos
● Como hay gran variedad de resoluciones
y tamaños de pantallas (teléfono, tableta,
TV), podemos ofrecer gráficos alternativos
con diferente resolución / tamaño.
● Ver
http://developer.android.com/guide/topics/resources/providing-resources.html
● Ej. Recurso por defecto
Recurso alta densidad
(high dpi, dots per inch,
aprox. 240 dpi)

16. Ejemplo SobreTeleco 16
Recursos
http://coding.smashingmagazine.com/2011/06/30/designing-for-android/
http://androideity.com/2011/08/04/disenando-para-android/

17. Ejemplo SobreTeleco 17
Crear una actividad
Fija como contenido el fichero
res/layout/main.xml. Se genera una
referencia en R este fichero:
R.layout.main

18. Ejemplo SobreTeleco 18
Referencias a imágenes
R.drawable.ic_launcher
R.layout.main
R.values.strings
Se selecciona la
imagen según la
resolución del
dispositivo

19. Ejemplo SobreTeleco 19
Modificando el layout
(main.xml)
Doble click

20. Ejemplo SobreTeleco 20
Cambiamos la interfaz

21. Ejemplo SobreTeleco 21
Refactorización
● Técnica de software que consiste en
modificar el código para que tenga “más
calidad”
● Ej. extraer una interfaz de una clase
pasar unas líneas de código a método
privado, renombrar una clase o método, …
● Eclipse y muchos IDEs dan soporte a la
refactorización: Menú->Refactor

22. Ejemplo SobreTeleco 22
Refactorización
● Pasamos el string a
res/values/strings.xml

23. Ejemplo SobreTeleco 23
Añadir botón

24. Ejemplo SobreTeleco 24
Botón
Llevamos este strings.xml

25. Ejemplo SobreTeleco 25
Cambiamos el botón

26. Ejemplo SobreTeleco 26
Y desplegamos
El botón no hace nada en el terminal

27. Ejemplo SobreTeleco 27
Añadir funcionalidad botón
(I)
main.xml

28. Ejemplo SobreTeleco 28
Añadir funcionalidad botón
(II)
Toast es un tipo de notificación en pantalla

29. Ejemplo SobreTeleco 29
Añadir funcionalidad botón
(III)

30. Ejemplo SobreTeleco 30
Refactorizar String

31. Ejemplo SobreTeleco 31
¡Probar!

32. Ejemplo SobreTeleco 32
Copiamos imágenes
● Vamos a copiar las imágenes que vamos
a usar (están en moodle en un zip)
● Las copiamos en res/drawable-hdpi

33. Ejemplo SobreTeleco 33
Añadiendo una imagen

34. Ejemplo SobreTeleco 34
Añadiendo una imagen

35. Ejemplo SobreTeleco 35
Modificando tamaño

36. Ejemplo SobreTeleco 36
● contentDescription: mensaje sobre qué
representa la imagen, por accesibilidad
● match_parent: tan grande como el padre
● wrap_content: tan grande como para
que quepa el texto
● weight: escalado
● 0dp: el que fije weight
ImageView

37. Ejemplo SobreTeleco 37
Cambiando la imagen (I)

38. Ejemplo SobreTeleco 38
Cambiando la imagen (II)

39. Ejemplo SobreTeleco 39
¡Lo probamos!

40. Ejemplo SobreTeleco 40
Recapitulando (I)
● Hemos hecho una aplicación
con 1 Actividad
● Las actividades las creamos
en Java extendiendo Activity
– Cuando se lance la actividad se
invocará el método onCreate,
que tiene que la vista
(setContentView(R.layout.main)

41. Ejemplo SobreTeleco 41
R y setContentView
● R es una clase Java que se genera
automáticamente a partir de un 'layout' XML
● setContentView(R.layout.main) – usado en
onCreate() - el proceso se llama 'insuflar'
(inflate)
– Lee el XML, crea objetos java por cada vista
(componente: botón, texto, imagen, …)
– Fija atributos de cada objeto por cada propiedad
XML

42. Ejemplo SobreTeleco 42
Recapitulando (II)
● En el layout XML
hemos definido
– un layout (LinearLayout)
que contiene
– Vistas (TextView,
ImageView, Button)
● Los textos los
ponemos en
res/values/strings.xml

43. Ejemplo SobreTeleco 43
Hierarchy Viewer
● Lanza la aplicación (Run-as) en el
emulador (no vale en dispositivo real!)
● Abre la jerarquía
– Window->Open Perspective-> Hierarchy
viewer

44. Ejemplo SobreTeleco 44
Hierarchy Viewer
● Pincha en Windows en la aplicación que
quieres depurar, y ya lo ves :)

45. Ejemplo SobreTeleco 45
Perspectiva Hierarchy Viewer
Recuerda que sólo funciona con el emulador lanzado

46. Ejemplo SobreTeleco 46
Ej. FrameLayout

47. Ejemplo SobreTeleco 47
Ej. TextView

48. Ejemplo SobreTeleco 48
Ej. TextView

49. Ejemplo SobreTeleco 49
Los tres puntos
(curiosidad)
●Los tres puntos indican las prestaciones, miden de izda a
derecha los tiempos del proceso de visualización (render)
– Measure time: calcular alto/ancho
– Layout time: dice a las vistas las posiciones dentro de las medidas
– Draw time: pinta los componentes
●Verde: más rápido que el 50% de las otras vistas
●Amarillo: más lento que el 50% de las otras vistas
●Rojo: el más lento del árbol

50. Interfaces de Usuario 50
Trazas - Depuración
● Según va ejecutando el programa
– estoy aquí ...
– esta variable vale tanto ...
●De formas que podemos ir “siguiendo la
ejecución”
– con diferentes niveles de detalle

51. Interfaces de Usuario 51
Trazas – System.out.println
● Se pueden meter sentencias explícitas
– System.out.println(“estoy aquí ...”);
– System.out.println(“variable= “ + valor);
● Problemas
– hay que editar el programa
– cada vez que queremos cambiar una traza
– cuando se entrega el programa
– hay que editarlo y quitar las trazas
– si el programa está compilado y algo falla,
– hay que editarlo para ver qué pasa

52. Interfaces de Usuario 52
Puesta a punto
¿dónde falla qué?
•Trazas / Depurador paso a paso
fallo serio
detalle
falla
pasa
falla
pasa
pruebas
desarrollo
pruebas
pruebas de
aceptación

53. Interfaces de Usuario 53
Logging en Android
● Al poner un mensaje de traza, indicamos
“su relevancia”:
– Argumentos TAG, msg. Se recomienda que
TAG sea una constante privada de la clase
– Log.wtf (no debería suceder, What a Terrible
Failure, Log.e(), Log.w(), Log,i(), Log.d(),
Log.v()
VERBOSE
DEBUG
INFO
WARN
ERROR

54. Interfaces de Usuario 54

55. Interfaces de Usuario 55
Ver trazas y depurar
● Perspectiva DDMS
(Dalvik Debug Monitor Server)
– View LogCat

56. Interfaces de Usuario 56
Filtrar trazas
● Podemos filtrar para ver menos trazas
(por log, etc.)

57. Interfaces de Usuario 57
Loggers
● Poner loggers (en vez de
System.err.println o System.out.println)
– Permite analizar qué ha pasado
– Hay otros programas (de gestión del servicio)
que pueden analizar estos logs para generar
alarmas si hay errores, y que se arregle

58. Interfaces de Usuario 58
Loggers en Java
● En Java tenemos el paquete estándar java.util.logging
● La clase que nos 'da un logger' es java.util.logging.Logger
● Para que una clase 'tenga logger', se declara un campo static
– private static final Logger log =
Logger.getLogger(“nombre.de.la.clase”);
● Niveles: FINEST, FINER, FINE, CONFIG, INFO, WARNING, SEVERE
● En la clase, generamos las trazas:
– log.info(msg), log.warning(msg), log.severe(msg), log.finer(msg), …
● El nivel de trazas se define en un fichero, java.logger, con sintaxis propia

59. Ejemplo SobreTeleco 59
Resumen
● Hemos visto cómo realizar una aplicación
sencilla en Android, SobreTeleco
● Para desarrollar una aplicación debemos
crear la actividad, el layout, enlazarlos, y
definir la conducta de los componentes
● Si algo no funciona, debemos depurar. Lo
primero es 'mirar los logs'.

60. Ejemplo SobreTeleco 60
¿Preguntas?