Aprendiendo Android: Creando Layouts, Parte 1

9 noviembre 2010
El Androide Libre

9 comentarios

Este artculo se public en mi blog hace ya algunos das. Como uno de los cuatro gatos
que me leen es Adrian de El Androide Libre y parece que le gust, me propuso muy
amablemente publicarlo tambin en EAL (minolles y minolles de gracias). Mira mam!
Salgo en el androide libre!

Trata sobre los layouts de Meneadroid, ya que mucha gente me ha preguntado al

respecto. Meneadroid es una aplicacin Android cliente del sitio Meneame.net
(disclosure: yo no tengo nada que ver con Meneame.net ni con sus miembros). Aun est
pendiente de ciertas funcionalidades (escribir comentarios, menear, categoras, etc.),
pero parece que las primeras versiones han gustado y sigo trabajando en ello. Sin ms,
os dejo con el artculo.

I. Introduccin
Hola!

Varias personas me han preguntado sobre el layout de Meneadroid. Que si cmo 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 peazo, no se puede
hacer nada bien, etc. Pero poco a poco, los fui entendiendo, hasta que se produjo la
singularidad, es decir, vi como tenan que usarse. Y oiga, desde entonces, como dice
el anuncio hago lo que quiero, con mi layout. Y estoy encantado. Ojal los hubiese
conocido antes.

Por eso mismo, he decidido empezar una serie de posts explicando cmo he hecho el
layout de Meneadroid. Empezar por el men principal, y luego ir explicando otras
cosas, incluso, cmo he hecho los iconos tirando de Photoshop. Si esperis que os diga
qu posts voy a escribir y de qu ir cada uno, ya os digo que le estis 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 cmo funcionan
los Layouts y sus componentes y propiedades ms importantes a travs de esta
interfaz.

Estos artculos van dirigidos a gente que ha empezado a pelearse con los Layouts y
todava est en la fase odio los layouts (s, yo tambin pas por ah), pero si
empezis de cero, os recomiendo leer algo de documentacin bsica 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 cre la interfaz de Meneadroid tena claro que
mi patrn de diseo iba a ser la aplicacin de Twitter (aqu un poco ms en
profundidad). Por lo tanto, tena claro cmo quera que fuese el men principal, y el
resultado final fue ste:
Bonico, eh?
Por supuesto, hice infinidad de pruebas, prototipos y variaciones. Os pondra 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 segn 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 cmo 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 cmo se va a
alinear el contenido del View, mientras que el segundo, Layout gravity, nos indica cmo
se va a alinear el View dentro de su contenedor padre. Pongo un par de ejemplos y fijaos
en elrecuadro 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).
Adems, como su Gravity es center, el texto 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.

Ms manzanas

Es fundamental saber cundo utilizar Gravity y cuando utilizar Layout gravity, y

eso slo se obtiene a golpe de experiencia. Haced pruebas con TextView multilneas
para ver cmo 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 ttulo de la aplicacin y las
opciones.

Por motivos estticos, decid que las tres filas deban respetar la misma proporcin, es
decir, un tercio del espacio sobrante sera para el ttulo, 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.
Como sabis, hay tres opciones: fill_parent, wrap_content y tamao fijo. Las dos
ltimas las descartamos, ya que queremos que ocupen todo el espacio sea cual sea el
tamao de pantalla. Entonces, utilizaremos fill_parent.

Peroqu sucede si establezco la propiedad Layout height como fill_parent en ambos

casos? Pues que tendr un bonito Layout que tan slo 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 solucin. 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 proporcin
en tercios que quera, 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 travs de la propiedad Layout
weight.

Weight Watchers

La propiedad Layout weight es un entero que especifica la proporcin 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 tamao:

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

Si no especificamos ningn 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. Bsicamente, 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 repartindose el espacio
sobrante.
Pero cmo hacemos que ocupen un espacio diferente? Pues asignndoles pesos
diferentes. Recordad que el valor que asignemos es la inversa del espacio que ocupar.
As, si damos a View2 un peso de 1 y a View3 se los damos de 2, View3 ocupar la
mitad de espacio que View1. Si utilizamos la combinacin 1 y 3, pues un tercio, etc. Os
recomiendo que juguis con estos nmeros para ver cmo se comportan.

Entonces, como os comentaba, el LinearLayout que contiene el ttulo 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.
Como siempre digo, ahora a practicar, practicar y practicar. He comentado dos
conceptos muy importantes en este artculo, la gravedad y el peso de un widget.
Conocerlos y aprender a usarlos es clave.

En el prximo artculo acabaremos de crear el men, aunque una vez entendido esto, el
resto es un paseo.

Hasta la prxima!

Sergi Martnez (y mi blog)

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