Layouts en Android

10 min

Todos los views que acabamos de ver se estn ubicando en nuestra pantalla principal, en nuestra
interfaz de usuario. Hasta el momento estos views parecen no tener una estructura de interfaz
lgica, es decir, no parecen estar ordenados coherentemente y con la fluidez que necesitan.

Los Layouts nos ayudarn a dar el orden que nuestros view's necesitan. Existen diferentes
formas de ordenamiento, es decir, diferentes tipos de Layouts en Android.

Conforme ha pasado el tiempo han ido y venido diferentes tipos de Layouts, te mostramos los
oficiales que se encuentran actualmente en la documentacin oficial de Android, y te platicamos
otro que podras topar con l en algn momento.

Linear Layout

Relative Layout

List View

Grid View

Frame Layout

Linear Layout

10 min

En este Layout los elementos son acomodados linealmente, siempre uno en seguida de otro.

Puede ser de forma horizontal o vertical.

En cdigo XML se visualiza de la siguiente forma:

Es muy comn ver este tipo de Layout en formularios.

 Relative Layout

10 min

Este Layout nos ayudar a acomodar nuestros views de forma relativa, es decir la posicin de un
view siempre ser relativa a la posicin de otro.

Podemos acomodar los elementos relativamente en los siguientes casos:

Un view con respecto a su etiqueta padre

 Un view con respecto a otro view

Este tipo de Layout se utiliza cuando deseamos crear vistas un poco ms complejas.
List View

10 min

Este aunque podemos seguir usandolo como view dentro de otro layout, ahora se ha convertido en
un Layout, el cul har que los elementos hijos se acomoden en forma de lista automticamente
scrolleable, este Layout utilizar un el patrn adaptador para colocar los elementos rengln a
rengln, dentro de la lista.

Para que este view funcione como un layout, la clase que controla el layout en vez de heredar de la
clase Activitydeber hacerlo de ListActivity como se muestra a continuacin:
El archivo layout se ver de la siguiente forma:

Grid View

10 min

Este Layout nos ayudar a ver todos nuestros elementos en forma de grid, algo as como una tabla.
De la misma forma que List View, este layout tambin utiliza un adaptador ListAdapter para insertar
cada elemento dentro del grid.
A nivel de cdigo nuestra clase que controla el layout, seguir heredando de Activity o similar, y
nuestro GridView lo llamaremos dentro del mtodo onCreate de la siguiente forma:

Tu adaptador ImageAdapter es una clase que debes crear la cual puede heredar
de BaseAdapter como se muestra a continuacin:

Estos primeros mtodos nos ayudarn a tener el control de la lista de elementos que estarn en el
grid, nos ayudarn a obtener datos claves como la cantidad de elementos que existen en la lista, la
posicin de un elemento en particular, y obtener el item a partir de su id.
Los ltimos dos mtodos nos ayudan a setear los datos en cada elemento del grid, y a generar un
array de datos dummy.

Y en el layout tendrs algo as:

Frame Layout

10 min

Este Layout es muy comn verlo implementado cuando creamos interfaces de Material Design,
puesto que en este los elementos siempre estn acomodados uno encima de otro, como si fueran
capas, justo lo que Material Design nos propone como una forma de ver nuestras vistas, en los ejes
x,y,z, como se muestra en la figura:
En este layout todos los elementos estarn uno sobre otro, y para lograr el efecto deseado,
nicamente debemos darle posicin y elevacin a nuestros views dentro del layout.

A continuacin te mostramos el cdigo de una interfaz que contiene un FAB (floating action button)
y una lista para generar una aplicacin toDoList:
El resultado de este cdigo es la siguiente interfaz: