Hello Android! (IV)

Hello Android! (IV)

Hola a todos, y bienvenidos a Hello Android! (IV) , la cuarta entrega de la serie. En el presente artículo vamosa crear la interfaz de usuario, escribir el código que necesitamos y publicarlo en nuestro teléfono y/o en Google Play. El objetivo de esta serie es dar una introducción a la tecnología Android para desarrolladores, e incluso personas «curiosas» que quieran saber cómo funcionan estos aparaticos por dentro.

La serie iba a ser de 3 entregas, pero como buen catalán barcelonés y fan de la Sagrada Familia (que nuestros nietos tampoco verán acabada) me encantan las cosas que se alargan eternamente (añadir aquí risa maligna, o ya la pongo yo). A continuación un resumen del contenido, y en negrica lo que vamos a ver hoy.

 

  • Introducción a Android (I)
  • Primera aplicación (II, III y IV)
  • Integración con otras aplicaciones (V)

 

Hello Android! (IV): Creando la interfaz de usuario

 

En Android, las pantallas de pueden diseñar de 2 maneras diferentes:

– A Lo Bruto, definiendo los botones, listados y cualquier elemento por código, directamente en Java.

– De forma gráfica, usando el asistente de Eclipse para modificar el correspondiente XML.

Nosotros lo haremos gráficamente, pero como «apunte» explicar que por código Java nos permitiría modificar en tiempo de ejecución el aspecto de nuestra aplicación. Eso no es demasiado común, y se escapa de las intenciones de esta serie. El editor gráfico tiene este aspecto:

 

Hello Android! (IV)

 

Marcado en rojo tenemos:

  1. El fichero .xml asociado al Activity HelloAndroid. En él definiremos el aspecto de esta pantalla
  2. La pestaña «Graphical Layout», activa por defecto y la que estamos viendo. Nos permite añadir elementos gráficos como botones, listas, cajas de texto, imágenes, checkboxes y demás.
  3. La pestaña «activity_hello_android.xml», en la que veremos el fichero xml como código fuente. Decir en este punto que así es realmente un fichero XML, la pestaña Graphical Layout lo que hace es «representar» este código de una manera gráfica, para facilitarnos la vida… Lo que se agradece enormemente, como podréis comprobar.

 

Vamos ahora a añadir los elementos gráficos de nuestra aplicación. Por cierto, ésta nos permitirá crear una lista de la compra en nuestro teléfono,  que podremos compartir entre diferentes dispositivos,  actualizar y consultar desde todos ellos. La llamaremos «Espai Shop’n Go!» ya sabéis, cuando más sencilla la app más chulazo el nombre! Este será el aspecto de la primera pantalla (podréis descargar el proyecto completo al pie del artículo)

 

Hello Android! (IV)aspecto del editor gráfico del ADT

Marcadas en rojo están las áreas más importantes del editor, que en resumen son éstas:

  1. Paleta de herramientas. Desde aquí podremos añadir Botones, listas y componentes gráficos a nuestra aplicación.
  2. Ventana de diseño. Aquí iremos añadiendo esos elementos gráficos, y podremos cambiar la posición, tamaño… etcétera.
  3. En este panel veremos cómo están organizados estos elementos gráficos. Se pueden agrupar en paneles y sub-paneles, en Android como en Java los objetos se crean en una jerarquía, vamos que todos «pertenecen a alguien» de manera que hay un «ancestro común» que los contiene a todos.
  4. Panel de propiedades. Aquí podemos personalizar características de ese objeto (botón, caja de texto o lo que sea) que acabamos de añadir, y cambiar cosas como el tamaño de la letra, el color, el tamaño o la alineación.

 

Hello Android! (IV)

En Android y Java los elementos se organizan de manera similar.
Uno de ellos es Ministro de Educación y doble de Fétido Adams

De esta manera, vamos añadiendo los componentes uno a uno, y modificándolos desde sus propiedades. Esto va creando el documento XML que es lo que Android necesita realmente:

Hello Android! (IV)

Definir el comportamiento de la interfaz

 

O dicho de otra forma, «meté er código pa que aga argo». Esto lo haremos en el fichero «HelloAndroid.java»:

Hello Android! (IV)

Ya tenemos nuestra aplicación terminada, ahora sólo nos falta probarla en el dispositivo virtual. Para ello, dadle al boton «play» situado en la barra de de iconos superior y esperar unos segundos. Cuando termine de cargar, el resultado es éste:

Hello Android! (IV)

Publicando la app en nuestro teléfono

Publicar (o instalar) la app en nuestro teléfono puede ser fácil o difícil, dependiendo del teléfono que tengamos. Si es de una marca conocida (samsung sobre todo) es tan fácil como conectar el móvil vía USB, ir a configuración – opciones de desarrollador – habilitar depuración USB. Esta ruta puede cambiar dependiendo de la versión de Android que tengáis, pero lo de «depuración USB» seguirá llamándose igual. Después de esto, al ejecutar la app desde Eclipse nos preguntará en qué dispositivo debemos lanzarla, y entre ellos saldrá nuestro teléfono.

Probar la app en un telefono «de verdad» tiene una ventaja, y es que nos da información más fiable que en el emulador. Así lo ideal es probar todo a fondo en dispositivos reales, antes de lanzar nuestra aplicación al mercado. Sería perfecto un teléfono y un tablet, también para ver cómo se desenvuelve en diferentes tamaños de pantalla.

En caso de tener un teléfono de marca desconocida, tampoco debería ser mucho problema. Tendremos que dar un paso intermedio, que es buscar los drivers del mismo en internet (en la página oficial, si la hubiera) e instalarlos en nuestro ordenador. Después, los pasos serían los mismos indicados arriba.

Hello Android! (IV)

En Android 2.3, la opción para activar depuración USB tiene este aspecto

Publicando la app en Google Play

Este apartado será breve:

1. Crear una cuenta de desarrollador. Para ello haz click aquí. Como te puedes imaginar, deberás tener una cuenta de Gmail para completar el registro.

2. Cuando tengas tu app probada y en perfestas condiciones, subir el fichero .APK que se genera en tu proyecto eclipse a la «consola de desarrollador» que tendrás cuando te registres.

Sé que lo explico de manera muy genérica, pero Google lo explica muy bien cuando te registras y además puede cambiar el proceso, por lo que prefiero no dar información que pueda caducar en poco tiempo.

Link de descarga del proyecto

http://www.espailab.com/blog/descargas/HelloAndroid.zip

Como siempre agradeceros vuestro tiempo y que hayáis llegado hasta aquí (que no es poco!)

Y recordar que desconectar de vez en cuando es sano…

Hello Android! (IV)

Adivina quién se va a dormir solo


Hasta el próximo artículo, y saludos!

Escribe un comentario