Herramientas para el desarrollo de interfacesgraficas en Android

Adrian Garcıa Lopez

4 de agosto de 2011

madsa

c©2011 Adrian Garcıa LopezAlgunos derechos reservados. Este artıculo se distribuye bajo la licencia

“Reconocimiento-CompartirIgual 3.0 Espana” 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. Introduccion

Una parte muy interesante del desarrollo de aplicaciones para cualquierplataforma, sea para moviles, tablets o equipos de sobremesa, es la interfazde usuario.

Una interfaz de usuario que permita acceder a las opciones de una apli-cacion de forma sencilla ayudara tanto al desarrollo de la misma como al usoposterior para el resto de usuarios, hacia los cuales ira enfocado en ultimainstancia el desarrollo de la aplicacion.

Ademas, una interfaz cuidada resulta mucho mas llamativa al usuariofinal, lo cual implicara en el mejor de los casos mejores crıticas, y en conse-cuencia un mayor numero de usuarios que empleen dicha aplicacion.

Por todos estos puntos es importante cuidar este aspecto a la hora dehacer nuestras aplicaciones: una interfaz de usuario deficiente o inexistentepodrıa no atraer al target hacia al que vaya destinado el uso de nuestraaplicacion.

En este artıculo nos centraremos en dos herramientas para desarrollarinterfaces 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 elresultado de lo que esperamos crear tal cual lo veremos en nuestro dispositivomovil o tablet, en lugar de tener que bajar el codigo XML que define lainterfaz y verlo en el dispositivo. Estos editores se conocen como editoresWYSIWYG1 (What You See Is What You Get).

Analizaremos cada una de las herramientas por separado, viendo sus prosy sus contras.

2. DroidDraw

DroidDraw2 es un editor escrito en Java para el desarrollo de interfacesde usuario en Android.

1http://es.wikipedia.org/wiki/WYSIWYG2http://www.droiddraw.org/

3

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 nuestrodiseno, pudiendo ajustar el layout3 padre. Tambien se nos da la posibi-lidad de ver como quedara nuestro diseno en distintas resoluciones depantalla, aunque no esta presente la opcion para ver como quedara eldiseno en pantallas de gran resolucion, como pueden ser la de los tablets.

En la parte derecha, se nos presentan una serie de pestanas, cada unacon una funcion concreta. Desde la pestana de Widgets podemos arras-trar y soltar elementos, tales como botones, checkboxes o incluso nuevoslayoutscon sus sub-elementos, si los hubiera. Podemos cambiar entrewidgets y layouts mediante el sistema de pestanas. Ademas, hacien-do doble clic sobre un elemento concreto, se nos muestra una pestanade propiedades, desde la cual podemos hacer un ajuste fino de comoqueremos que el elemento se muestre en pantalla, mediante margenes,ajustes de lınea... Como parte negativa, no nos permite trabajar contamanos relativos para mantener un diseno proporcionado en todo ti-po de resoluciones(dp, sp...), si no que solo se nos permite trabajar enpıxeles.

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

4

Cuando nuestro diseno este completo, simplemente pincharemos en“Generate” y en la parte inferior derecha de la interfaz se nos devuelveel codigo XML generado para la aplicacion.

Hasta aquı podemos llegar con la version web; si descargamos la version deescritorio (disponible para Windows, Mac OS X y Linux), podremos disfrutarde otras funcionalidades, como un sencillo editor de arrays, strings y colorespersonalizados, que pueden ser empleados en nuestro diseno y exportados conlas funciones que ofrece el editor para usarlos en nuestra propia aplicacion.Tambien nos permite exportar el fichero XML para visualizarlo en nuestrodispositivo a traves de la aplicacion AnDroidDraw4.

Desde aquı recomendamos ver la pagina del proyecto en Google Codehttp://code.google.com/p/droiddraw/ para estar al tanto de las ultimasactualizaciones y, por que no, ojear el codigo fuente de esta herramienta, yaque 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 propor-ciona el plug-in ADT de Google5 para trabajar en Eclipse con proyectos deAndroid. En versiones tempranas, la herramienta no llegaba a ser del todoutil, pero en sucesivas versiones este hecho ha ido cambiando, convirtiendoloen una herramienta extremadamente util.

4http://www.droiddraw.org/androiddraw.html5http://tools.android.com/

5

Figura 2: Captura de pantalla del ADT Visual Layout Editor

El plug-in nos ofrece una interfaz parecida a la de DroidDraw, comopodemos ver. El espacio de trabajo se organiza de la siguente manera:

En el lado izquierdo, nos ofrece una paleta en la cual podremos elegir deuna gran cantidad de widgets y layouts, los cuales podemos arrastrar ysoltar sobre el diseno. Mientras que colocamos los elementos se nos ofre-cen ciertas sugerencias, como sobre que elemento se esta situando deforma relativa (en el caso de usar un RelativeLayout como contenedor),margenes... Tambien se nos ofrecen widgets con funcionalidades concre-tas, como TextView especıficos para contrasenas o campos numericos,por ejemplo.

En el lado derecho podemos observar el diseno final de la interfaz. Sipinchamos sobre cualquiera de los elementos, en la parte inferior po-dremos hacer un ajuste mas preciso de todas las propiedades editablesdel widget en cuestion. Ademas, tenemos a nuestra disposicion una vis-ta jerarquica de los elementos que componen la interfaz, en la pestana”Outline”. Esta vista nos permite, por ejemplo, cambiar el tipo del la-yout, pinchando con el boton derecho en el mismo y marcando la opcion”Change Layout”.

6

En la parte superior, podemos seleccionar datos como: resolucion ydensidad de pantalla (en algunos casos, se identifican estos datos conlos dispositivos para desarrolladores oficiales de Google), la orientacionde la pantalla o el tema a emplear para la visualizacion de la inter-faz (por ejemplo, ver como quedarıa la interfaz si la pensamos utilizarcomo un dialogo). Anadido a esto, tambien se nos permite seleccionarsobre que version de Android vamos a trabajar, facilitando la tarea deelegir que widgets pueden emplearse en cada version, ademas de poderseleccionar el idioma de la interfaz, para ver como quedara la mismaen los distintos idiomas que soporte la aplicacion.

Por ultimo, en la parte inferior, podremos cambiar la vista del disenoal documento XML que lo define, que se genera automaticamente.

4. Conclusiones

Por ultimo, os dejamos unas pequenas conclusiones acerca de las herra-mientas 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 vıa web.

• Proporciona widgets genericos sobre los que trabajar, validos paracualquier version de Android.

Inconvenientes :

• No permite trabajar con tamanos dependientes de la resolucionde pantalla (dp,sp...), si no que nos obliga a trabajar con tamanosabsolutos. Esto no pasa al editar el tamano de las fuentes, dondesı 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 refres-car el diseno en la vista previa al modificar propiedades.

7

ADT Visual Layout Editor

Ventajas :

• Nos permite trabajar con todas las posibles alternativas de widgetsy 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 categorıas,haciendo mucho mas sencilla su busqueda.

Inconvenientes :

• No ofrece posibilidad de editar colores, strings, o arrays directa-mente, no es un Todo en Uno; sin embargo, el plug-in ADT nosda otras herramientas igualmente utiles 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 quelleva algun tiempo cargar los elementos para la vista previa.

Desde mi punto de vista, el ADT Visual Layout Editor aporta mu-chas mas ventajas que DroidDraw, ademas de estar integrado completamenteen el entorno Eclipse, el mas utilizado y con mas soporte por parte de la co-munidad 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 buscarotras), y a ver cual de ellas es la que mejor se adapta a vuestro estilo. Una vezencontreis la herramienta, ¡solo quedara echar a volar vuestra imaginacion!

8