Android

Ejemplos y comentarios del Barcelona Startup Weekend Bootcamp

El pasado sábado tuve la suerte de poder impartir el Bootcamp del Barcelona Startup Wekeend. Durante esta sesión, vimos una introducción al servicio de GAE para montar un servidor rest y como utilizar la libreria AndroidAnnotations para hacer aplicaciones Android de forma rápida.

Por razones que no acababa de entender, no conseguimos hacer funcionar la libreria AndroidAnnotations como cliente rest, y como sospechaba que era un tema de librerias, prometí mirarlo con calma y postear un proyecto que funcionase.

Después de mucho investigar he encontrado la causa de los problemas y he podido solucionarlos.

Usar Maven con Android

La idea de este artículo es presentar los pasos necesarios para configurar Eclipse para utilizarlo con Maven en proyectos Android. Estos pasos son:

Descargar herramientas

Descargamos Eclipse si no lo tuviesemos (en mi caso utilizo Eclipse Classic 3.7.2) desde http://www.eclipse.org/downloads/.

Configuramos el sdk de Android i el ADT (http://android.com)

Descargamos Maven desde http://maven.apache.org/download.html (para el ejemplo usamos 3.0.4)

Asumimos que instalamos las herramientas en D:eclipse, D:android-sdk-windows y en D:maven si tu ruta es diferente, cambialo donde toque.

Instalar plugin de Eclipse para Maven (m2Eclipse)

Desde http://www.eclipse.org/m2e/download/ podemos ver las diferentes rutas de descarga.

En nuestro caso, en Eclipse, vamos a Help, Install New Software… e introducimos http://download.eclipse.org/technology/m2e/releases como url.

Configurar el plugin de Maven

En mi caso configuro siempre lo siguiente:

En la venta de preferencias (Window, Preferences) seleccionamos MavenInstallations. Allí podemos añadir el ejecutable de Maven. Así nos aseguramos que el plugin y la linea de comandos utilizan la misma versión.

Instalar el conector de Android para Maven

Ahora hay que decirle al plugin que “entienda” los proyectos de Android. Para eso tenemos que instalar el conector de Android. Dentro de la pantalla de preferencias, en MavenDiscovery, hacemos clic en Open Catalog. Se nos abrirá el listado de conectores.

Buscamos ‘Maven Integration for Android Development Tools’ (escribe Android y acabarás antes) y lo instalamos.

Ya estamos listos para trabajar con Maven para Android.

Configurar un proyecto para usar Maven

Nunca he conseguido que creando un proyecto nuevo de Maven directamente funcione. Lo que hago es crear un proyecto normal, y luego, podemos hacer clic con el botón derecho sobre la raiz del proyecto, y seleccionar Configure, Convert to Maven Project.

Así se nos transformará en un proyecto de Maven, pero nos toca configurar el POM. Básicamente, utilizo la siguiente plantilla:

Y aquí algunos de los valores a configurar:

  • GROUP_ID_DEL_PROYECTO: la ruta canónica del paquete (p.ej.: com.sergiandreplace)
  • NOMBRE_DEL_PROYECTO: el identificador del paquete que completa la ruta canónica.
  • VERSION_DE_ANDROID: la versión de Android que utilizamos en la app. Ojo que no valen todas, sólo aquellas que estén en el repositorio. Podemos consultar la lista aquí: http://mvnrepository.com/artifact/com.google.android/android
  • NOMBRE_FINAL_APK: pues eso, el nombre que tendrá el fichero final cuando compilemos.
  • VERSION_DE_API: versión de api utilizada para compilar en formato numérico. P.ej: 7 para 2.1

Si ahora ejecutamos desde la linea de comandos en la carpeta del proyecto

Se nos instalaran las dependencias necesarias
Ahora si ejecutamos

Se nos compilará e instalará en los moviles disponibles desde adt.

También podemos hacer un compilado/ejecución de toda la vida en Eclipse.

Quedan cosas por configurar (donde hacer deploy, certificados, etc) pero esto ya depende de cada proyecto, aquí sólo he mostrado lo mínimo para empezar.

Jugando con Unity

Llevo unos dias jugueteando con Unity (no, el infecto escritorio de Ubuntu no, me refiero a la herramienta de creación de aplicaciones 3d).

La verdad, es indecentemente fácil hacer cosas con ella. Subo un ejemplillo para que veais que se hace en un par de horitas con algo de scripting.

Appunta: demo disponible!

Hola

He subido una demo de funcionalidades de Appunta al Market.

Podéis encontrarla en el Market de Android

Si alguien se la baja y me comenta si funciona o no funciona, si da problemas o no va bien, lo agradecería enormemente (cervezas gratis para el mejor bughunter!!!)

También he subido el código al repositorio por si queréis ojearlo. Ah! y he comprado el dominio appunta.com. Algún dia pondré cosas en el, de momento hay un bonito wordpress dedicado al LoremIpsumismo, pero necesito dormir más de 5 horas por lo menos un día.

Ah, y si tenéis ideas para crear nuevos sistemas de visualización de geodatos, pues estaré encantado de oirlas, que ahora toca engordar la librería con widgets. Así a bote pronto se me ocurre, por ejemplo, un visor de rutas de senderismo donde el azimuth no señale al norte geográfico, si no al último punto de la ruta, así vemos el camino “delante nuestro”. Igual luego implementado es una castaña muy gordo. Igual no.

¿Y algún conejillo de indias con ganas de implementar en su app una librería que cambia casi cada día? ¿Algún amante del riesgo?

Gracias y buenas noches

P.D.: mañana toca catbeer, así que a los androideros tímidos os invito a venir a conocer a la gente de Catdroid, son todos muy majos, bueno, bastante majos, bueno, casi todos 😛

P.P.D: el icono/logotipo es horrendo, lo se, pero de momento no he podido hacer más, está en la lista de cosas “que son importantes, pero no urgentes y no tengo ni idea de cuando las haré”. Se aceptan ayudas y los autores mantienen la autoría, of course 🙂

 

Appunta saca la otra patita, y oiga, es una pata muy gorda

Hola!

Segundo dia del cuaderno de bitácora de Appunta. Y francamente, estoy pletórico. He conseguido armar algo muy potente con una arquitectura muy, muy sencilla (todavía no he llegado a la docena de clases), y por una vez me quedo lejos de la sobreingeniería.

¡¡¡Y tengo una captura de pantalla!!!

En las últimas 48h he implementado un montón de cosas:

  • Generada la clase abstracta AppuntaView. Esta se encarga de dibujar la vista utilizando tres métodos. Esta es la explicación extraida del Javadoc

This is the base class in order to create Views using the Appunta system. The class has all needed calculations and values to retrieve info from points.

It’s important to understand how this will work. All the stuff happens in the onDraw Method.

The onDraw method has three phases: preRender, pointRendering & postRender.

  • The preRender phase triggers the method preRender, used to draw all needed elements used in the background.
  • In the pointRendering phase, the method calculatePointCoordinates(Point) is invoked per each on of the points, in order to calculate the screen coordinates for each one of them. Then, they are painted by calling their PaintRenderer.
  • In the Post render phase, the postRender(Canvas) method is invoked in order to paint the latest layer
  • Este sistema permite implementar nuevas formas de mostrar “geodatos” de forma rápida y sencilla. Pintamos un fondo, decidimos las coordenadas de cada punto dentro del canvas, y barnizamos. Y arreando.
  • A partir de esta implementación, RadarView es como 10 veces más pequeño.
  • Implementada nueva view (también hereda de AppuntaView) que muestra un panorama donde la distancia se coloca con la altura. Esto con una cámara detras a toda pantalla es una AR de las de diploma.
  • Con el objetivo de montarlo bien, he creado una clase que hereda de SurfaceView para mostrar la cámara.
  • Tengo que mirar la diferencia entre View y SurfaceView, que me da en la nariz que la segunda me va a venir bien para estas cosas.
  • También he documentado más
  • ¡Y he subido un bonito sample! muestra algunas ciudades alrededor de Barcelona. Ojo que el punto central no se mueve y constantemente cree que estás en Barcelona. Los LocationServices para otro día. El sample está aquí: http://code.google.com/p/appunta/downloads/detail?name=appunta-sample-20120117.apk

De momento eso es todo (que no es poco). Ahora toca hacer un poco de limpieza y documentación, pero en general estoy muy satisfecho con el trabajo conseguido.

Supongo que huelga decir lo de que se agradecen comentarios, vivas, bravos, bughunters,  donaciones, cheques sopresa, corticoles y cualquier aportación que se desee dar al autor.

Appunta – un motor de AR

Hola

Estoy haciendo un motor de Realidad Aumentada GeoLocalizada. Tengo el proyecto al 40%, pero ya se puede enseñar.

Al contrario de otros como Mixare que funcionan como una caja negra, este funciona con un conjunto de pequeños componentes que se comunican entre ellos, permitiendo un alto nivel de personalización, aunque funciona out-of-the-box

De momento el único componente publicado es un View que permite mostrar puntos en una brújula.

El código es OS con licencia Apache 2.0. Así que, comparte y disfruta, pero menciona y agradece.

Encontrareis el proyecto en http://code.google.com/p/appunta/

Espero tener el módulo de AR “enseñable” en los próximos días. Os mantendré informados.

En el apartado de wiki hay algo de documentación, no mucha, pero habrá más en los próximos días.

Si os bajáis el source, es una app de prueba que muestra el radar con 4 puntos (Madrid, Zaragoza, Toulousse y París). El centro está fijo en BCN, así que estés donde estés ves los mismos puntos. El módulo de posicionamiento está a medias y no lo he publicado. Ojo, que la parte de la activity es sólo para pruebas, con lo que la calidad del código de esa parte deja mucho que desear, ya que es mi pequeño campo de pruebas.

Se aceptan sugerencias, bug-hunting, bug-fixing, groupies y jamones a la dirección de siempre.

Saludos!

 

Imágenes con esquinas redondeadas

Hola

A partir del video del otro día de Erik Burke, Taming Android UI (http://www.youtube.com/watch?v=jF6Ad4GYjRU ¿no lo has visto? flagélate pues!!!) he hecho una pequeña clase que es una vista para mostrar imágenes con esquinas redondeadas.

La gracia estriba en que no sólo hace eso, si no que mantiene el ratio que especifiquemos. Por defecto usa el ratio de las cartas de Magic 🙂 pero podemos establecer uno nuevo con setImageHeightRatio y setImageWidthRatio. También podemos hacerlas cuadradas con setImageSquareRatio

Una vez establecido el ratio, cada vez que cambiemos el tamaño, el control se ajustará al ratio establecido.

Se aceptan comentarios, sugerencias y bug-hunting.

Lo tenéis en mi repositorio de BitBucket

La licencia es Apache, ergo, haced lo que os de la gana con el mientras mencioneis de donde sale.

Saludos!

HierarchyViewer a lo loco

HierarchyViewer a lo loco

Gracias a Fernando Cejas (@fernando_cejas, un gran tipo) de Android 10, llego a un pequeño módulo escrito por Romain Guy que sirve para utilitzar Activites en un dispositivo Android real como servidor de vistas para HierarchyViewer.

¿Lo que de lo cualo? Calma, que ahora me explico. Ya sabes…. “leer más”….
Gracias a Fernando Cejas (@fernando_cejas, un gran tipo) de Android 10, llego a un pequeño módulo escrito por Romain Guy que sirve para utilitzar Activites en un dispositivo Android real como servidor de vistas para HierarchyViewer.

¿Lo que de lo cualo? Calma, que ahora me explico. Ya sabes…. “leer más”….

Fragmentación de Android (pero la buena)

Vamos a ver cómo empezar a trabajar con los Fragments de Android.

¿Pero no se suponía que la fragmentación de Android era algo malo?

Sí, pero no hablo de esa fragmentación.

Cuando hablamos de Fragments hablamos de un nuevo elemento añadido a la API a partir de HoneyComb. Los fragments son “pedazos” de la interfaz que colocamos en nuestros layouts.

Y direis “pues eso es un View”. Y yo os diré “pues no”. Y si no le dais al botón de leer más, os quedareis con el misterio.

Vamos a ver cómo empezar a trabajar con los Fragments de Android.

¿Pero no se suponía que la fragmentación de Android era algo malo?

Sí, pero no hablo de esa fragmentación.

Cuando hablamos de Fragments hablamos de un nuevo elemento añadido a la API a partir de HoneyComb. Los fragments son “pedazos” de la interfaz que colocamos en nuestros layouts.

Y direis “pues eso es un View”. Y yo os diré “pues no”. Y si no le dais al botón de leer más, os quedareis con el misterio.

Creando los layouts de Meneadroid. Parte I

¡Hola!

Varias personas me han preguntado sobre el layout de Meneadroid. Que si como lo he hecho, que si he utilizado otra cosa, que si con layouts no se puede, etc. Y es que parece que los layouts se le atragantan a mucha gente que empieza con el mundo Android.

La verdad, yo al principio pensaba igual. Esto de los layouts es un peñazo, no se puede hacer nada bien, etc. Pero poco a poco, los fui entendiendo, hasta que se produjo la “singularidad”, es decir, vi como tenían que usarse. Y oiga, desde entonces, como dice el anuncio “hago lo que quiero, con mí… layout”. Y estoy encantado. Ojalá los hubiese conocido antes.

Por eso mismo, he decidido empezar una serie de posts explicando como he hecho el layout de Meneadroid. Empezaré por el menú principal, y luego iré explicando otras cosas, incluso, como he hecho los iconos tirando de Photoshop. Si esperáis que os diga que posts voy a escribir y de que irá cada uno, ya os digo que le estáis pidiendo a la persona equivocada que se organice y tenga capacidad de preparar cosas de antemano (madredelamorhermoso, pedirme eso a mí). Lo que intento es explicar cómo funcionan los Layouts y sus componentes y propiedades más importantes a través de esta interfaz.

Estos artículos van dirigidos a gente que ha empezado a pelearse con los Layouts y todavía está en la fase “odio los layouts” (sí, yo también pasé por ahí), pero si empezáis de cero, os recomiendo leer algo de documentación básica sobre layouts, ya que hay una serie de cosas que doy por supuestas. Y si no, pues preguntad, que responderé a gusto.

A lo que iba. Cuando cree la interfaz de Meneadroid tenía claro que mi patrón de diseño iba a ser la aplicación de Twitter (ver: http://android-developers.blogspot.com/2010/05/twitter-for-android-closer-look-at.html). Por lo tanto, tenía claro como quería que fuese el menú principal, y el resultado final fue este:

Bonico ¿eh?

Por supuesto hice infinidad de pruebas, prototipos y variaciones. Os pondría los prototipos que hice en papel, pero mi hija decidió que ganaban mucho siendo cortados en trocitos.

El contenedor principal

El contenedor principal es un LinearLayout con las siguientes propiedades destacables:

  • Orientation: vertical
  • Layout height: fill_parent
  • Vertical height: fill_parent

Nada del otro mundo. Simplemente, llenamos toda la pantalla con este View.

Dos de un tipo y dos del otro

Ahora agregamos dos LinearLayout y dos TextView según la imagen:

Vamos a hablar primero de los TextView, que son sencillitos, y así nos los quitamos de encima.

La manzana de Newton

En principio, no tienen nada especial, son dos TextViews con las siguientes propiedades:

  • Layout height: wrap_content
  • Layout width: fill_parent
  • Gravity: center

Hablemos sobre la gravedad de los View. La gravedad define cómo se va a alinear un objeto tanto vertical como horizontalmente. Existen dos propiedades que afectan a la gravedad: Gravity y Layout gravity. La primera, Gravity, nos indica cómo se va a alinear el contenido del View, mientras que el segundo, Layout gravity, nos indica cómo se va a alinear el View dentro de su contenedor padre. Pongo un par de ejemplos, fijaos en el recuadro rojo, que es el que me marca exactamente los bordes del View.

Ejemplo 1

  • Layout height: wrap_content
  • Layout width: fill_parent
  • Layout gravity:
  • Gravity: center

Este es el resultado actual. El View ocupa todo el ancho de su contenedor padre (en este caso el root View, por lo que ocupa toda la pantalla).

Además, como su Gravity es center, el testo sale centrado.

Layout gravity está en blanco ya que como ocupa todo el ancho, nos da igual centrar el View o no centrarlo.

Ejemplo 2

  • Layout height: wrap_content
  • Layout width: wrap_content
  • Layout gravity: center
  • Gravity:

Aquí hay una diferencia sutil. En este caso tenemos el width a wrap_content, por lo que el View ocupa el espacio exacto que necesita para mostrar el texto. Y al poner Layout gravity a center el widget queda centrado.

Resultado: tenemos la misma interfaz de cara al usuario, pero en realidad se comporta diferente.

Más manzanas

Es fundamental saber cuándo utilizar Gravity y cuando utilizar Layout gravity, y eso solo se obtiene a golpe de experiencia. Haced pruebas con TextView multilíneas para ver cómo se comportan las diferentes combinaciones. Algunos controles no disponen de Gravity (por ejemplo el ImageView). En ese caso, lo que suelo hacer es envolverlo con un Linear Layout y posicionar la imagen en él.

Los dos grandotes

Bien, vamos a hablar sobre los dos Layout que contienen el título de la aplicación y las opciones.

Por motivos estéticos, decidí que las tres filas debían respetar la misma proporción, es decir, un tercio del espacio sobrante sería para el título, otro tercio para las dos primeras opciones (Portada y Pendientes) y el último tercio para las otras dos (Buscar y Opciones).

De Layout width no nos vamos a preocupar, que está como wrap_content en el primer Layout y como fill_parent en el segundo. Pero del Layout height sí que vamos a hablar. Cómo sabéis, hay tres opciones: fill_parent, wrap_content y tamaño fijo. Las dos últimas las descartamos, ya que queremos que ocupen todo el espacio sea cual el tamaño de pantalla. Entonces, utilizaremos fill_parent.

Pero ¿qué sucede si establezco la propiedad Layout height como fill_parent en ambos casos? Pues que tendré un bonito Layout que tan solo muestra el logotipo. Tened en cuenta que fill_parent significa exactamente eso, llenar el padre, por lo tanto, el primer control con fill_parent llena toda la pantalla.

Busquemos otra solución. ¿Qué tal si ponemos el primer Layout como wrap_content y el segundo como fill_parent? Pues pasan dos cosas. Una, que no consigo la proporción en tercios que quería, y dos, que los dos TextView del final son expulsados fuera de la pantalla.

Es ahora cuando entra en juego el peso de los elementos a través de la propiedad Layout weight.

Weight Watchers

La propiedad Layout weight es un entero que especifica la proporción del espacio disponible que nuestro View va a ocupar. Bueno, en realidad especificamos el valor inverso. Imaginemos que tengo los siguientes Views con unos valores para tamaño:

  • View 1: wrap_content
  • View 2: fill_parent
  • View 3: fill_parent
  • View 4: wrap_content

Si no especificamos ningún peso para ninguno de ellos, veremos View1 en la parte superior ajustado a su contenido y debajo View2 ocupando todo el espacio restante.

Si le damos un peso de 1 a View2, entonces View3 ocupa todo el espacio libre debajo de View1. Básicamente, no es buena idea dentro de un mismo layout mezclar Views con el valor fill_parent con y sin peso.

Si establecemos un peso de 1 para View2 y View3, entonces veremos todos los elementos. View1 en la parte superior ajustado a su contenido, View4 en la parte inferior ajustado a su contenido, y en medio, View2 y View3 repartiéndose el espacio sobrante.

Pero ¿cómo hacemos que ocupen un espacio diferente? Pues asignándoles pesos diferentes. Recordad que el valor que asignemos es la inversa del espacio que ocupará. Así, si damos a View2 le damos un peso de 1 y a View3 se los damos de 2, View3 ocupará la mitad de espacio que View1. Si utilizamos la combinación 1 y 3, pues un tercio, etc. Os recomiendo que juguéis con estos números para ver cómo se comportan.

Entonces, como os comentaba, el LinearLayout que contiene el título tiene un valor de Layout weight de 2, y el TableLayout tiene un peso de 1, así, Android divide el espacio que queda entre estos dos componentes, y le da al primero la mitad que al segundo, lo que viene siendo 1/3 y 2/3 respectivamente.

Cómo siempre digo, ahora a practicar, practicar y practicar. He comentado dos conceptos muy importantes en este artículo, la gravedad y el peso de un widget. Conocerlos y aprender a usarlos es clave.

En el próximo artículo acabaremos de crear el menú, aunque una vez entendido esto, el resto es un paseo.

¡Hasta la próxima!

P.D.: ¿Qué no tienes Meneadroid? pues nada, aquí tienes el enlace:

Discover more Android apps

3 of 4
1234