«

»

mar 11 2014

Mirror: La mejor herramienta para probar diseños en vivo

androcode_mirror

Mi proceso para diseñar interfaces en Android suele ser el siguiente: primero hago bocetos en papel para definir la estructura y la navegabilidad (viene genial POP); luego, si no lo tengo muy claro aún, hago algún boceto de mejor definición en Photoshop o Illustrator, cuidando los colores, tamaños de letra y demás detalles; y por último abro Android Studio y empiezo a crear los XML, estáticos, de cómo quiero que se vea la interfaz para probarlo en el teléfono. En este último paso puedo tirarme horas y horas simplemente ajustando y cambiando valores como tamaños de letra, niveles de opacidad, padding, márgenes, ejecutando la aplicación una y otra vez hasta dar con una combinación con la que esté satisfecho. Si sois como yo, hoy os voy a presentar la herramienta que os cambiará la vida.

Hay muchas formas de previsualizar un diseño de interfaz. Si éste está hecho en una imagen hay muchas herramientas como Android Design Preview de Roman Nurik para mostrar una porción de la pantalla del PC en el móvil. Si la interfaz está hecha en código hay dos posibilidades: la vista previa del IDE, o ejecutar la aplicación y probar la interfaz en vivo. Lo primero dista de ser una experiencia real, y lo segundo es muy lento (compilar, instalar, ejecutar).

Desde hace pocos meses tenemos una nueva posibilidad, que cae entre medio de las anteriores. Se trata de Mirror, una herramienta para previsualizar de forma instantánea los layouts en un dispositivo real. Pero tiene una particularidad: los layouts se muestran de forma nativa. Es decir, la aplicación Mirror lee todos los archivos de recursos de tu proyecto, los procesa y te muestra la interfaz generada por el dispositivo.

mirror

El resultado es muy cercano al de ejecutar la aplicación, pero como digo es instantáneo. La aplicación en el PC monitoriza el proyecto y cada vez que detecte cambios actualizará los recursos en el dispositivo y en un pestañeo aparecerá la interfaz actualizada. Es francamente impresionante lo bien que funciona, os recomiendo que lo probéis por vosotros mismos. De todos modos, os quedará mucho más claro viendo el vídeo de demostración que ellos mismos han preparado:

Como veis, Mirror está compuesto por una aplicación de escritorio (Windows, Mac y Linux) y una app móvil que se conectan a través de ADB. No importa con qué IDE desarrolles, Mirror monitoriza el sistema de archivos directamente. La aplicación es gratuita con las funciones básicas, y tiene una versión premium (pago in-app) que permite previsualizar vistas propias, Action Bar personalizado y usar datos de prueba.

Personalmente la empecé a usar recientemente, y me tiene enamorado. Me va a ahorrar muchas horas de ejecutar-cambiar-ejecutar-cambiar. Y a vosotros, ¿qué os parece?

Más información y descarga: http://jimulabs.com/

Acerca del autor

Rafa Vázquez

Estudio Ingeniería Informática del Software en Sevilla. Me considero geek sin dinero, amante y desarrollador novato de Android. He creado algunas aplicaciones como SeviBus, TicTacDroide, Kill Bieber y Traductor Hoygan, si es que se puede llamar aplicaciones a estas dos últimas ;) Ganas de aprender más y más no me faltan, e intentaré compartir mis experiencias con vosotros en la medida de lo posible.

  • http://www.forgottenprojects.com/ Fernando F. Gallego

    En la misma línea pero para diseñadores, ayer salió Pixl Preview que permite a los diseñadores conectar Photoshop con un dispositivo real corriendo la app y previsualizar los cambios, ojo, en Photoshop, antes de empezar a implementar el diseño https://play.google.com/store/apps/details?id=at.markushi.pixl

    • http://about.me/sloy Rafa Vázquez

      Sí, son varias las herramientas que hay para eso. Y están bien. Pero personalmente paso más tiempo ajustando el XML. Y el tiempo perdido compilando y ejecutando cada vez que haga un cambio es tremendo. Por eso esta herramienta me parece tan útil.

  • http://gravatar.com/alexrs95 alexrs95

    El mayor problema que veo es que muchas veces usamos vistas personalizadas y la versión gratuita no permite su visualización. Por cierto, las Views que están en la librería de soporte, ¿las puedes ver o entiende que son personalizadas?

    • http://about.me/sloy Rafa Vázquez

      Claro, para las personalizadas hay que pagar, aunque hay un “workaround”. En el proyecto que estoy haciendo construyo la vista de la pantalla con varios layouts en tiempo de ejecución. Lo que hago para previsualizar la pantalla en Mirror es crear un layout “demo” que a base de construya una versión estática de cómo se verá la interfaz. Lo mismo se puede hacer con las vistas personalizadas, aunque tiene sus limitaciones claro.

      Lo de la librería de soporte no te puedo decir porque no he probado (FSM bendiga el minSdkVersion=14) Pero yo creo que no tardaré en comprar la versión de pago, aunque sea por darles soporte y que sigan mejorando :D

  • https://plus.google.com/+LintonYe Linton Ye

    Hey Rafa,

    Thanks a lot for writing about Mirror. I’m glad that you find it useful!

    We are about to launch a campaign to thank our users. If you write a post to let more people know about Mirror, you’ll get a license for free. So, please feel free to get the paid version, send us your order number (support@jimulabs.com), and we’ll get you a refund.

    Thanks again!
    Linton, Co-founder of jimu Labs

    • http://about.me/sloy Rafa Vázquez

      Thanks! I was going to buy the premium version anyways. Mirror is probably the most useful tool (apart from the IDE) that I’ve seen for Android Development, so it’s my pleasure to let people know about it :)

  • https://twitter.com/mgarridoES Manuel G.

    Hola Rafa!

    Muy buen post! Por cierto, yo también estudio Informática en la Universidad de Sevilla. Ahora estoy poniendo todo mi empeño en pulir bien el tema de desarrollo de aplicaciones Android, pero tengo algunas dudillas. Agrégame y hablamos!
    Saludos.

    manuga93 (skype)

  • edwin

    amigo disculpa pero a que te refieres donde comentas que muestra los layouts de forma nativa?