Escolar Documentos
Profissional Documentos
Cultura Documentos
NET
Curso Programacin Android
Proyectos
Foro
43 Comentarios
En el artculo anterior del curso, donde desarrollamos una sencilla aplicacin Android desde
cero, ya hicimos algunos comentarios sobre los layouts. Como ya indicamos, los layouts son
elementos no visuales destinados a controlar la distribucin, posicin y dimensiones de los
controles que se insertan en su interior. Estos componentes extienden a la clase base
ViewGroup, como muchos otros componentes contenedores, es decir, capaces de contener
a otros controles. En el post anterior conocimos la existencia de un tipo concreto de layout,
LinearLayout, aunque Android nos proporciona algunos otros. Vemos cuntos y cules.
open in browser PRO version
pdfcrowd.com
FrameLayout
ste es el ms simple de todos los layouts de Android. Un FrameLayout coloca todos sus
controles hijos alineados con su esquina superior izquierda, de forma que cada control
quedar oculto por el control siguiente (a menos que ste ltimo tenga transparencia). Por
ello, suele utilizarse para mostrar un nico control en su interior, a modo de contenedor
(placeholder) sencillo para un slo elemento sustituible, por ejemplo una imagen.
Los componentes incluidos en un FrameLayout podrn establecer sus propiedades
android:layout_width y android:layout_height, que podrn tomar los valores
match_parent (para que el control hijo tome la dimensin de su layout contenedor) o
wrap_content (para que el control hijo tome la dimensin de su contenido). Veamos un
ejemplo:
Ejemplo:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
open in browser PRO version
pdfcrowd.com
android:layout_height="match_parent">
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="text" />
</FrameLayout>
Con el cdigo anterior conseguimos un layout tan sencillo como el siguiente:
pdfcrowd.com
LinearLayout
El siguiente tipo de layout en cuanto a nivel de complejidad es el LinearLayout. Este
layout apila uno tras otro todos sus elementos hijos en sentido horizontal o vertical segn se
establezca su propiedad android:orientation.
Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout
pueden establecer sus propiedades android:layout_width y
android:layout_height para determinar sus dimensiones dentro del layout.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="match_parent" />
open in browser PRO version
pdfcrowd.com
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
Pero en el caso de un LinearLayout, tendremos otro parmetro con el que jugar, la
propiedad android:layout_weight. Esta propiedad nos va a permitir dar a los
elementos contenidos en el layout unas dimensiones proporcionales entre ellas. Esto es ms
dificil de explicar que de comprender con un ejemplo. Si incluimos en un LinearLayout
vertical dos cuadros de texto (EditText) y a uno de ellos le establecemos un
layout_weight=1 y al otro un layout_weight=2 conseguiremos como efecto
que toda la superficie del layout quede ocupada por los dos cuadros de texto y que adems el
segundo sea el doble (relacin entre sus propiedades weight) de alto que el primero.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
open in browser PRO version
pdfcrowd.com
android:layout_height="match_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtDato1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="text"
android:layout_weight="1" />
<EditText android:id="@+id/TxtDato2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="text"
android:layout_weight="2" />
</LinearLayout>
Con el cdigo anterior conseguiramos un layout como el siguiente:
pdfcrowd.com
As pues, a pesar de la simplicidad aparente de este layout resulta ser lo suficiente verstil
como para sernos de utilidad en muchas ocasiones.
TableLayout
Un TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo las
filas y columnas necesarias, y la posicin de cada componente dentro de la tabla.
La estructura de la tabla se define de forma similar a como se hace en HTML, es decir,
indicando las filas que compondrn la tabla (objetos TableRow), y dentro de cada fila las
open in browser PRO version
pdfcrowd.com
columnas necesarias, con la salvedad de que no existe ningn objeto especial para definir una
columna (algo as como un TableColumn) sino que directamente insertaremos los controles
necesarios dentro del TableRow y cada componente insertado (que puede ser un control
sencillo o incluso otro ViewGroup) corresponder a una columna de la tabla. De esta forma,
el nmero final de filas de la tabla se corresponder con el nmero de elementos TableRow
insertados, y el nmero total de columnas quedar determinado por el nmero de
componentes de la fila que ms componentes contenga.
Por norma general, el ancho de cada columna se corresponder con el ancho del mayor
componente de dicha columna, pero existen una serie de propiedades que nos ayudarn a
modificar este comportamiento:
android:stretchColumns. Indicar las columnas que pueden expandir para
absorver el espacio libre dejado por las dems columnas a la derecha de la pantalla.
android:shrinkColumns. Indicar las columnas que se pueden contraer para dejar
espacio al resto de columnas que se puedan salir por la derecha de la palntalla.
android:collapseColumns. Indicar las columnas de la tabla que se quieren
ocultar completamente.
pdfcrowd.com
Todas estas propiedades del TableLayout pueden recibir una lista de ndices de
columnas separados por comas (ejemplo: android:stretchColumns=1,2,3) o un
asterisco para indicar que debe aplicar a todas las columnas (ejemplo:
android:stretchColumns=*).
Otra caracterstica importante es la posibilidad de que una celda determinada pueda ocupar
el espacio de varias columnas de la tabla (anlogo al atributo colspan de HTML). Esto se
indicar mediante la propiedad android:layout_span del componente concreto que
deber tomar dicho espacio.
Veamos un ejemplo con varios de estos elementos:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow>
<TextView android:text="Celda 1.1" />
open in browser PRO version
pdfcrowd.com
pdfcrowd.com
GridLayout
Este tipo de layout fue incluido a partir de la API 14 (Android 4.0) y sus caractersticas son
similares al TableLayout, ya que se utiliza igualmente para distribuir los diferentes
elementos de la interfaz de forma tabular, distribuidos en filas y columnas. La diferencia entre
ellos estriba en la forma que tiene el GridLayout de colocar y distribuir sus elementos hijos
en el espacio disponible. En este caso, a diferencia del TableLayout indicaremos el nmero
de filas y columnas como propiedades del layout, mediante android:rowCount y
android:columnCount. Con estos datos ya no es necesario ningn tipo de elemento
para indicar las filas, como hacamos con el elemento TableRow del TableLayout, sino
open in browser PRO version
pdfcrowd.com
que los diferentes elementos hijos se irn colocando ordenadamente por filas o columnas
(dependiendo de la propiedad android:orientation) hasta completar el nmero de
filas o columnas indicadas en los atributos anteriores. Adicionalmente, igual que en el caso
anterior, tambin tendremos disponibles las propiedades android:layout_rowSpan y
android:layout_columnSpan para conseguir que una celda ocupe el lugar de varias
filas o columnas.
Existe tambin una forma de indicar de forma explcita la fila y columna que debe ocupar un
determinado elemento hijo contenido en el GridLayout, y se consigue utilizando los
atributos android:layout_row y android:layout_column. De cualquier forma,
salvo para configuraciones complejas del grid no suele ser necesario utilizar estas
propiedades.
Con todo esto en cuenta, para conseguir una distribucin equivalente a la del ejemplo
anterior del TableLayout, necesitaramos escribir un cdigo como el siguiente:
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
open in browser PRO version
pdfcrowd.com
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="3"
android:orientation="horizontal" >
<TextView android:text="Celda 1.1" />
<TextView android:text="Celda 1.2" />
<TextView android:text="Celda 1.3" />
<TextView android:text="Celda 2.1" />
<TextView android:text="Celda 2.2" />
<TextView android:text="Celda 2.3" />
<TextView android:text="Celda 3.1"
android:layout_columnSpan="2" />
<TextView android:text="Celda 3.2" />
</GridLayout>
open in browser PRO version
pdfcrowd.com
RelativeLayout
El ltimo tipo de layout que vamos a ver es el RelativeLayout. Este layout permite
especificar la posicin de cada elemento de forma relativa a su elemento padre o a cualquier
otro elemento incluido en el propio layout. De esta forma, al incluir un nuevo elemento X
podremos indicar por ejemplo que debe colocarse debajo del elemento Y y alineado a la
derecha del layout padre. Veamos esto en el ejemplo siguiente:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
pdfcrowd.com
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/TxtNombre"
android:layout_alignParentRight="true" />
</RelativeLayout>
En el ejemplo, el botn BtnAceptar se colocar debajo del cuadro de texto TxtNombre
(android:layout_below=@id/TxtNombre) y alineado a la derecha del layout
padre (android:layout_alignParentRight=true), Quedara algo as:
pdfcrowd.com
pdfcrowd.com
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_centerHorizontal
android:layout_centerVertical
android:layout_centerInParent
Por ltimo indicar que cualquiera de los tipos de layout anteriores poseen otras propiedades
comunes como por ejemplo los mrgenes exteriores (margin) e interiores (padding) que
pueden establecerse mediante los siguientes atributos:
Opciones de margen exterior:
android:layout_margin
android:layout_marginBottom
android:layout_marginTop
android:layout_marginLeft
android:layout_marginRight
Opciones de margen interior:
open in browser PRO version
pdfcrowd.com
android:padding
android:paddingBottom
android:paddingTop
android:paddingLeft
android:paddingRight
Existen otros layouts algo ms sofisticados a los que dedicaremos artculos especficos un
poco ms adelante, como por ejemplo el DrawerLayout para aadir mens laterales
deslizantes.
Tambin en prximos artculos veremos otros elementos comunes que extienden a
ViewGroup, como por ejemplo las vistas de tipo lista (ListView), de tipo grid (GridView),
y las pestaas o tabs (TabHost/TabWidget).
Puedes consultar y/o descargar el cdigo completo de los ejemplos desarrollados en este
artculo accediendo a la pagina del curso en GitHub.
Curso de Programacin Android en PDF
open in browser PRO version
pdfcrowd.com
Correo electrnico
Relacionado
Pestaas (Tabs)
07/10/2011
En "Android"
Widgets (I)
23/02/2011
En "Android"
Comentarios
jesus dice
01/02/2011 a las 20:32
Hola, excelente tus articulos, me han servido de mucho espero continues publicando
material de calidad. suerte
mbruno dice
open in browser PRO version
pdfcrowd.com
jdpt dice
23/04/2011 a las 3:25
Muy buen tuto muchas gracias!
David dice
30/05/2011 a las 18:56
open in browser PRO version
pdfcrowd.com
Hola Me podrian ayudar a crear una tabla desde codigo sin usar un .xml de antemano
garcias.
soyfelix1 dice
15/12/2011 a las 11:19
Hola, una pregunta al respecto del parametro weight,
pones que si a un elemento le pones 1 y al otro 2, el segundo ser el doble del otro.
No sera realmente que el primero se queda 1/3 del espacio libre y el segundo los 2/3
restantes?
es algo que an no acabo de tener claro.
Muchas gracias
sgoliver dice
15/12/2011 a las 12:25
open in browser PRO version
pdfcrowd.com
Alejandro dice
18/01/2012 a las 13:50
Muchsimas gracias! Cada vez que leo un artculo tengo ms ganas de empezar con el
siguiente! Estoy aprendiendo muchsimo. mil gracias!!!
jose dice
28/02/2012 a las 10:43
Una pregunta dices: a uno de ellos le establecemos un layout_weight=1 y al otro un
layout_weight=2 conseguiremos como efecto que toda la superficie del layout quede
ocupada por los dos cuadros de texto y que adems el segundo sea el doble (relacin
entre sus propiedades weight) de alto que el primero.
open in browser PRO version
pdfcrowd.com
alex dice
29/02/2012 a las 17:17
Jose, a mi me pasa exactamente lo mismo, el primer EditText es el doble de grande que el
segundo, no s si estar mal en la web o estamos haciendo algo mal nosotrosyo creo
que es mas lo segundo, jeje, que entre oliver y lo explique para aclararnos mejor..
Fernando G. dice
15/03/2012 a las 9:26
El comportamiento de layout_weight se invierte sobre elementos que tienen el valor
open in browser PRO version
pdfcrowd.com
fill_parent, para corregirlo en vez de usar el fill parent hay que usar un valor igual a 0dp
BamsBamx dice
03/04/2012 a las 17:21
MUCHISIMAS GRACIAS, DE VERDAD.. EL TUTORIAL CON EL QUE MAS ESTOY
APRENDIENDO(a ver si me saco unas perras.jejejej)
Men dice
04/05/2012 a las 16:55
Hola, muy buen tutorial, pero seria bueno tambien que en los ejemplos de los Layout
pusieras unas imagenes que muestre la parte grafica del layout en el dispositivo, asi uno
pdfcrowd.com
se da una idea mas completa de como es que se ven, esos diferentes Layoutss
Ravacho dice
22/09/2012 a las 20:01
Excelente curso. Un pequeo bug que he encontrado. Aqu faltan unas comillas para
cerrar el string.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android
open in browser PRO version
pdfcrowd.com
Kikin dice
26/09/2012 a las 11:47
Hola, solo darte la enhorabuena. El curso est genial, en breve encargar mi manual en
formato PDF.
Saludos y gracias
Pilar dice
23/01/2013 a las 17:39
Tengo una duda, cmo se indica el espacio que queremos que haya entre los distintos
componentes en un tablelayout? Gracias.
pdfcrowd.com
juampa dice
24/01/2013 a las 11:53
Lo primero darte las gracias por este fantstico manual.
En el ejemplo de GridLayout, no debera la propiedad android:rowCount ser igual a 3 y
no a 2?
Javijav dice
25/03/2013 a las 18:12
Hola,
Me gustara saber como puedo hacer para descargar el cdigo completo de los ejemplos
de este artculo. Me gustara descargarme el proyecto completo pero no encuentro
ninguna opccion que me lo permita. Muchas gracias!!
open in browser PRO version
pdfcrowd.com
Un saludo
Isrot dice
25/05/2013 a las 2:15
Gracias por el todo este tutorial!!!
Mi pregunta es igual al de los anteriores en LinearLayout al poner el weight me salen
los tamaos al reves. el 1 es mas grande que al que le pongo 2
Isrot dice
25/05/2013 a las 2:34
Tambien quisiera saber porque cuando uso el TableLayout la pantalla me queda como si
estubiera usando wrap_content y no match_parent
pdfcrowd.com
Mara dice
18/06/2013 a las 17:21
pdfcrowd.com
Hola,
He creado un tablelayout con campos dinamicos que tengo que rellenar y guardar, el
problema me viene cuando quiero recorrer las filas dinamicas y sacar los datos que ha
introducido el usuario, Como podra hacerlo?
Saludos y gracias por adelantado!
Rolando dice
01/10/2013 a las 17:08
Saludos Necesito ayuda e seguido el curso desde el primer capitulo pero ahora cuando
intento hacer los ejemplos de este capitulo acerca de los Layout al correr mi emulador
me sigue cargando la aplicacion de Hola Usuario realizada en el capitulo anterior. Cree
un nuevo perfil para correr mi proyecto asignandole el proyecto respectivo y no me
aparese el proyecto hecho corre el emulador pero no aparese la app. Espero su
respuesta
pdfcrowd.com
quetal dice
02/01/2014 a las 14:05
que significa weight? :P
Buen tutorial!
Gracias.
Cueto dice
31/01/2014 a las 18:52
Saludos buena explicacion, me sirvio para darme una idea.
el corrector dice
10/02/2014 a las 21:10
open in browser PRO version
pdfcrowd.com
sgoliver dice
11/02/2014 a las 15:42
Vaya, un error bastante feo, gracias por el aviso, lo corrijo lo antes posible.
Julio dice
16/03/2014 a las 9:53
Muy bueno el artculo. Slo una cosilla: absorber.
pdfcrowd.com
evicfrodo dice
23/03/2014 a las 14:43
Puse el cdigo de la TableLayout que aparece ac y no queda como mostrs en la
imagen, los TextView se alinearon a donde quisieron y los textos no se centraron.
admin dice
12/05/2014 a las 9:38
open in browser PRO version
pdfcrowd.com
navyivan dice
26/06/2014 a las 18:29
Hola, me gustaria hacer una ventana en donde tenga un encabezado para poner 2 o 3
botones y debajo llenarlo con un list adapter. como si fuera a seleccionar muchos
archivos
Gracias
cristian dice
27/12/2014 a las 5:59
open in browser PRO version
pdfcrowd.com
pdfcrowd.com
Dudas dice
08/07/2015 a las 2:48
Tendras algun ejemplo que declares strings asi:
CREATE TABLE IF NOT EXISTS conversion (id_conv INTEGER PRIMARY KEY
AUTOINCREMENT, fecha TEXT, celcius TEXT, fahrenheit TEXT)
para hacer la relacion con la base de datos?
pdfcrowd.com
Alexander dice
21/07/2015 a las 17:01
Excelente trabajo
Alexander dice
21/07/2015 a las 17:02
Excelente trabajo, gracias por compartir tu trabajo
pdfcrowd.com
Antonio dice
16/10/2015 a las 3:28
Yo hice este para el TableLayout y me qued bien.
1
Facundo dice
09/11/2015 a las 14:01
Acabo de empezar el curso. EXCELENTE hasta ahora. Muchas gracias por el aporte.
open in browser PRO version
pdfcrowd.com
Trackbacks
Interfaz de usuario en Android: Controles bsicos (I) | sgoliver.net blog dice:
19/08/2010 a las 9:45
[] el artculo anterior ya vimos los distintos tipos de layouts con los que contamos en
Android para distribuir los []
Desarrollo en Android | sgoliver.net blog dice:
07/09/2010 a las 0:45
[] Interfaz de usuario en Android: Layouts []
open in browser PRO version
pdfcrowd.com
Deja un comentario
Tu direccin de correo electrnico no ser publicada. Los campos necesarios estn marcados
*
Comentario
Nombre *
open in browser PRO version
pdfcrowd.com
Correo electrnico *
Web
P U BL I C A R C O M E N T A RI O
pdfcrowd.com
Publicidad
pdfcrowd.com
Redes Sociales
pdfcrowd.com
pdfcrowd.com
Archivos
Archivos
Elegir mes
Categoras
Categoras
Elegir categora
Etiquetas
open in browser PRO version
pdfcrowd.com
.NET actualizacin ajedrez android antlr base de datos blog C# C++ compiladores controles curso
java librera libro manuales mapas Mono mquinas virtuales NChess novedades
NRtfTree nueva open source pdf plugin programacin RTF SAX SQlite tutoriales web
SOBRE E L BLOG
Contacto
Poltica de cookies
Privacidad
SOBRE E L A UT OR
open in browser PRO version
pdfcrowd.com
Uso de cookies
2016 Centric
Theme
ontenga
Genesis
Framework
WordPress
Log Si
in contina navegando est dando su consentimiento para la
Este sitioCopyright
web utilizacookies
para que
usted
la mejor
experiencia
de usuario.
aceptacin de las mencionadas cookies y la aceptacin de nuestra poltica de cookies, pinche el enlace para mayor informacin.
plugin cookies
ACEPTAR
pdfcrowd.com