Herramientas para el desarrollo de interfaces

graficas en Android
Adrian Garca Lopez
4 de agosto de 2011

madsa

c
2011
Adrian Garca Lopez
Algunos derechos reservados. Este artculo se distribuye bajo la licencia
Reconocimiento-CompartirIgual 3.0 Espa
na de Creative Commons.
http://creativecommons.org/licenses/by-sa/3.0/es/deed.es
Una copia del presente documento puede encontrarse en http://www.madsa.es

1.

Introducci
on

Una parte muy interesante del desarrollo de aplicaciones para cualquier

plataforma, sea para moviles, tablets o equipos de sobremesa, es la interfaz
de usuario.
Una interfaz de usuario que permita acceder a las opciones de una aplicacion de forma sencilla ayudara tanto al desarrollo de la misma como al uso
posterior para el resto de usuarios, hacia los cuales ira enfocado en u
ltima
instancia el desarrollo de la aplicacion.
Ademas, una interfaz cuidada resulta mucho mas llamativa al usuario
final, lo cual implicara en el mejor de los casos mejores crticas, y en consecuencia un mayor n
umero de usuarios que empleen dicha aplicacion.
Por todos estos puntos es importante cuidar este aspecto a la hora de
hacer nuestras aplicaciones: una interfaz de usuario deficiente o inexistente
podra no atraer al target hacia al que vaya destinado el uso de nuestra
aplicacion.
En este artculo nos centraremos en dos herramientas para desarrollar
interfaces en Android de forma sencilla y en pocos pasos. Son las siguientes:
ADT Visual Layout Editor, version 12.0.0.
DroidDraw, version R1B20 (binario) y R1B19(on-line).
La ventaja que nos ofrecen estas dos utilidades es que podemos ver el
resultado de lo que esperamos crear tal cual lo veremos en nuestro dispositivo
movil o tablet, en lugar de tener que bajar el codigo XML que define la
interfaz y verlo en el dispositivo. Estos editores se conocen como editores
WYSIWYG1 (What You See Is What You Get).
Analizaremos cada una de las herramientas por separado, viendo sus pros
y sus contras.

2.

DroidDraw

DroidDraw2 es un editor escrito en Java para el desarrollo de interfaces

de usuario en Android.
1
2

http://es.wikipedia.org/wiki/WYSIWYG
http://www.droiddraw.org/

Figura 1: Captura de pantalla de DroidDraw (version ejecutable)

El funcionamiento de la herramienta es extremadamente sencillo:
En la parte izquierda de la interfaz podemos ver como quedara nuestro
dise
no, pudiendo ajustar el layout 3 padre. Tambien se nos da la posibilidad de ver como quedara nuestro dise
no en distintas resoluciones de
pantalla, aunque no esta presente la opcion para ver como quedara el
dise
no en pantallas de gran resolucion, como pueden ser la de los tablets.
En la parte derecha, se nos presentan una serie de pesta
nas, cada una
con una funcion concreta. Desde la pesta
na de Widgets podemos arrastrar y soltar elementos, tales como botones, checkboxes o incluso nuevos
layoutscon sus sub-elementos, si los hubiera. Podemos cambiar entre
widgets y layouts mediante el sistema de pesta
nas. Ademas, haciendo doble clic sobre un elemento concreto, se nos muestra una pesta
na
de propiedades, desde la cual podemos hacer un ajuste fino de como
queremos que el elemento se muestre en pantalla, mediante margenes,
ajustes de lnea... Como parte negativa, no nos permite trabajar con
tama
nos relativos para mantener un dise
no proporcionado en todo tipo de resoluciones(dp, sp...), si no que solo se nos permite trabajar en
pxeles.
3

Layout: contenedor de los elementos (widgets) de una interfaz

Cuando nuestro dise

no este completo, simplemente pincharemos en
Generate y en la parte inferior derecha de la interfaz se nos devuelve
el codigo XML generado para la aplicacion.
Hasta aqu podemos llegar con la version web; si descargamos la version de
escritorio (disponible para Windows, Mac OS X y Linux), podremos disfrutar
de otras funcionalidades, como un sencillo editor de arrays, strings y colores
personalizados, que pueden ser empleados en nuestro dise
no y exportados con
las funciones que ofrece el editor para usarlos en nuestra propia aplicacion.
Tambien nos permite exportar el fichero XML para visualizarlo en nuestro
dispositivo a traves de la aplicacion AnDroidDraw4 .
Desde aqu recomendamos ver la pagina del proyecto en Google Code
http://code.google.com/p/droiddraw/ para estar al tanto de las u
ltimas
actualizaciones y, por que no, ojear el codigo fuente de esta herramienta, ya
que es open-source, con licencia GNU GPL v2.

3.

ADT Visual Layout Editor

El ADT Visual Layout Editor es el editor por defecto que nos proporciona el plug-in ADT de Google5 para trabajar en Eclipse con proyectos de
Android. En versiones tempranas, la herramienta no llegaba a ser del todo
u
til, pero en sucesivas versiones este hecho ha ido cambiando, convirtiendolo
en una herramienta extremadamente u
til.
4
5

http://www.droiddraw.org/androiddraw.html
http://tools.android.com/

Figura 2: Captura de pantalla del ADT Visual Layout Editor

El plug-in nos ofrece una interfaz parecida a la de DroidDraw, como
podemos ver. El espacio de trabajo se organiza de la siguente manera:
En el lado izquierdo, nos ofrece una paleta en la cual podremos elegir de
una gran cantidad de widgets y layouts, los cuales podemos arrastrar y
soltar sobre el dise
no. Mientras que colocamos los elementos se nos ofrecen ciertas sugerencias, como sobre que elemento se esta situando de
forma relativa (en el caso de usar un RelativeLayout como contenedor),
margenes... Tambien se nos ofrecen widgets con funcionalidades concretas, como TextView especficos para contrase
nas o campos numericos,
por ejemplo.
En el lado derecho podemos observar el dise
no final de la interfaz. Si
pinchamos sobre cualquiera de los elementos, en la parte inferior podremos hacer un ajuste mas preciso de todas las propiedades editables
del widget en cuestion. Ademas, tenemos a nuestra disposicion una vista jerarquica de los elementos que componen la interfaz, en la pesta
na
Outline. Esta vista nos permite, por ejemplo, cambiar el tipo del layout, pinchando con el boton derecho en el mismo y marcando la opcion
Change Layout.
6

En la parte superior, podemos seleccionar datos como: resolucion y

densidad de pantalla (en algunos casos, se identifican estos datos con
los dispositivos para desarrolladores oficiales de Google), la orientacion
de la pantalla o el tema a emplear para la visualizacion de la interfaz (por ejemplo, ver como quedara la interfaz si la pensamos utilizar
como un dialogo). A
nadido a esto, tambien se nos permite seleccionar
sobre que version de Android vamos a trabajar, facilitando la tarea de
elegir que widgets pueden emplearse en cada version, ademas de poder
seleccionar el idioma de la interfaz, para ver como quedara la misma
en los distintos idiomas que soporte la aplicacion.
Por u
ltimo, en la parte inferior, podremos cambiar la vista del dise
no
al documento XML que lo define, que se genera automaticamente.

4.

Conclusiones

Por u
ltimo, os dejamos unas peque
nas conclusiones acerca de las herramientas analizadas:
DroidDraw
Ventajas:
Ofrece una interfaz relativamente intuitiva para definir colores,
listas y cadenas de texto personalizadas.
Permite trabajar de forma independiente del IDE que utilicemos,
ya que puede descargarse en forma de binario o utilizarse va web.
Proporciona widgets genericos sobre los que trabajar, validos para
cualquier version de Android.
Inconvenientes:
No permite trabajar con tama
nos dependientes de la resolucion
de pantalla (dp,sp...), si no que nos obliga a trabajar con tama
nos
absolutos. Esto no pasa al editar el tama
no de las fuentes, donde
s deja trabajar con sp.
No esta preparado para trabajar de forma optima con tablets.
Faltan algunos widgets y a veces da problemas a la hora de refrescar el dise
no en la vista previa al modificar propiedades.
7

ADT Visual Layout Editor

Ventajas:
Nos permite trabajar con todas las posibles alternativas de widgets
y layouts soportados por la version del SDK que especifiquemos.
Permite una correcta visualizacion de valores relativos (dp, sp...)
en la vista previa de la interfaz.
Los widgets se clasifican de forma mas intuitiva por categoras,
haciendo mucho mas sencilla su b
usqueda.
Inconvenientes:
No ofrece posibilidad de editar colores, strings, o arrays directamente, no es un Todo en Uno; sin embargo, el plug-in ADT nos
da otras herramientas igualmente u
tiles para editar estos ficheros,
dando una interfaz sencilla como la que proporciona DroidDraw.
El plug-in ADT solo esta pensado para trabajar en en IDE Eclipse.
Puede resultar pesado cambiar entre versiones del SDK, ya que
lleva alg
un tiempo cargar los elementos para la vista previa.
Desde mi punto de vista, el ADT Visual Layout Editor aporta muchas mas ventajas que DroidDraw, ademas de estar integrado completamente
en el entorno Eclipse, el mas utilizado y con mas soporte por parte de la comunidad de desarrolladores para el desarrollo de aplicaciones para Android,
con lo cual es la herramienta que recomiendo usar.
Sin embargo, os animo a probar estas dos alternativas (o incluso buscar
otras), y a ver cual de ellas es la que mejor se adapta a vuestro estilo. Una vez
encontreis la herramienta, solo quedara echar a volar vuestra imaginacion!