Layout en Android

16/8/2019 Interfaces de usuario: layouts – Academia Android
Blog
Android 5, Interfaz usuario, Nivel Básico, Premium Interfaces de usuario: layouts
Interfaces de usuario: layouts

19/05/2016
Android 5, Interfaz usuario, Nivel Básico, Premium
Post Series: Creación de Apps Android:

diseño de Interfaz de Usuario
1. Panel de diseño de UI de Android Studio
2. Interfaces de usuario: layouts
3. Detección de eventos en la interfaz de usuario
4. Proyecto ejemplo de Interfaz de Usuario en

Aplicación Android
5. Video: creación Interfaz de Usuario en App

Android
https://academiaandroid.com/interfaces-de-usuario-layouts/ 1/18
En este tutorial describiremos los diseños o layouts más

utilizados para una interfaz de usuario en una Aplicación
Android. También explicaremos cómo crearlos,
incluyendo algunos elementos, como campos de texto
editables y botones, con un sencillo ejemplo práctico.
Para diseñar interfaces de usuario en Android utilizamos

una capa (llamada layout), descrita mediante un chero
XML, sobre la que se dispondrán los diferentes elementos
grá cos que componen dicho interfaz. Todos estos
componentes heredan directa o indirectamente de la
clase View.
De forma muy simpli cada (y por tanto no muy

exacta), XML es un lenguaje que estructura e
identi ca la información de un chero en base a
etiquetas ((X)HTML sería un ejemplo). Si no sabes lo
que es XML, en este tutorial hablamos sobre ello. Al
nal del mismo tienes también enlaces a páginas
donde lo explican, como ésta de la W3C.
Veamos la de nición de los términos View y ViewGroup,

necesarios para comprender el funcionamiento de la
interfaz grá ca en Android:
View (o Vista). Esta clase es básica para la creación de

todos los componentes usados en la interfaz. Una
View ocupa un área rectangular en la pantalla y es el
responsable de dibujar los componentes y manejar
los eventos que de namos sobre ellos, o dicho de
una forma más simple, dibuja los componentes en la
pantalla con los que el usuario puede interaccionar.
Es la clase base para los widgets, que son Views
‘preconstruidas’ que vienen incluidas en la plataforma
Android, como los botones, campos de textos, check
boxes, radio buttons, etc.
ViewGroup (o Grupo de Vista). Hereda directamente

de View y se usa para, como su nombre indica,
contener y controlar la lista de Views y de otros
ViewGroups. Es la clase base para los Layouts,
mediante los cuales podemos diseñar una estructura
para un conjunto de Views.
El chero XML que generamos (por ejemplo

activity_main.xml) se ubica en la carpeta res/layout, y se
carga(*) a través del método setContentView() en el
método onCreate() de la activity, como veremos en un
ejemplo práctico que desarrollaremos en una publicación
posterior.
Nota(*): a esta acción del método setContentView

también se le suele denominar ‘in ar‘ una vista (view).
Más detalle en estas explicaciones algo más
avanzadas (en inglés).
Tenemos dos grandes ventajas al utilizar un chero XML

externo para declarar la UI:
Nos permite separar mejor la presentación de

nuestra Aplicación Android del código que controla su
comportamiento. Esto nos facilita realizar cambios o
adaptaciones de dicha interfaz sin necesidad de
modi car el código y recompilar de nuevo,
pudiendo crear layouts XML por ejemplo para
distintas orientaciones o tamaños de pantalla.
Es más fácil visualizar y entender la estructura del

layout en un chero XML que podemos leer sin
mucha di cultad. Esto nos facilita también las tareas
de depuración.
En cualquier caso, también es posible construir la

interfaz de usuario utilizando únicamente código. Lo
veremos también en ese proyecto ejemplo que
desarrollaremos más adelante, creando dos versiones del
mismo interfaz, uno usando chero XML y otro solo
basado en código..
Antes de empezar a describir distintos tipos de

layouts y algunos de los elementos que podremos
agregarle (TextView, EditText, Button) utilizándolos
en un ejemplo de interfaz que realizaremos en cada
uno de esos layouts, vamos a mencionar dos aspectos
importantes:
Identi cación
Hay un atributo muy importante, android:id, que

debemos tener presente siempre, tanto para los
Layouts como para los elementos grá cos. Mediante
este atributo, podremos identi car a cada elemento
para luego acceder a ellos desde el código o para
posicionarlos de manera relativa como veremos en
el RelativeLayout. Es por tanto muy recomendable
asignarles siempre un identi cador (id).
Para asignarles un id nuevo, usaremos la siguiente

sintaxis: android:id=”@+id/botonaceptar” , en la que
hemos creado un nuevo id llamado botonaceptar. Si
en cambio queremos referirnos a un id ya creado, el
carácter “+” sobra, quedando @id/boton_aceptar .
Unidades de medidas
Otra consideración a tener muy en cuenta es que, al

existir tanta diversidad de dispositivos Android, es
conveniente usar siempre medidas relativas al
tamaño de pantalla de cada uno. Esto lo podemos
hacer usando:
La medida dip (density-independent pixel ó dp,

que al caso es la misma), recomendada para
especi car el tamaño de los views en nuestro
layout (siendo 160dp el equivalente a una
pulgada (2,54 cm) de pantalla física)
La medida sp (scaled-independent pixel), similar a

dp y recomendada para de nir tamaños de
fuentes.
Layout
Los Layouts son los elementos sobre los cuales se

sustentan los diferentes componentes de la interfaz de
usuario, y controlan la distribución, la posición y las
dimensiones de dichos componentes. Es decir, un layout
de ne la estructura o diseño del UI.
Para poder implementar cualquiera de estos elementos

para la distribución visual de la aplicación, bastará con
seleccionarla en la ventana «Palette«, y añadirlo al árbol de
componentes en la ventana «Design«.
A continuación describiremos diferentes tipos de Layouts

muy comunes, con un ejemplo simple de diseño basado
en cada uno.
FrameLayout
Es el más simple de todos. En él, todos los elementos se

alinean teniendo en cuenta la esquina superior izquierda
de la pantalla, no pudiendo ser ubicados en otro lugar,
por lo que se colocarían unos encima de otros tapando
completa o parcialmente a los demás, a menos que el
nuevo elemento sea transparente. Por esta razón, se usa
normalmente para mostrar un único elemento, ya que
puede resultar difícil organizar la posición de los
elementos, o bien una serie animada de imágenes donde
cada una se va posicionando sobre la anterior.
Los elementos incluidos en este layout han de tener los

atributos android:layout_width y android:layout_height,
que podrán tomar los valores:
match_parent ( ll_parent) si lo que se quiere es que

se tome la dimensión completa del padre
wrap_content, si se desea que tome la dimensión de

su contenido.
A partir de la versión 8 de la API de Android, el valor

ll_parent fue renombrado a match_parent, por lo
que aún nos podemos encontrar con uno u otro. Se
permiten ambos, aunque se
recomienda match_parent.
Si queremos posicionar los elementos de otra forma,

deberíamos de “jugar” con los atributos
android:layout_gravity (especi ca como la vista hijo (child
view) debe posicionarse en su contenedor) y con las
destinadas a controlar los márgenes y alineaciones, como
android:layout_marginTop, android:layout_marginLeft,
android:layout_alignParentLeft, etc…
Veamos un ejemplo de cómo quedaría una interfaz con

FrameLayout:
y del chero XML que lo describe, donde vemos cómo se

de nen los diferentes componentes: TextView («Datos del
curso»), tres EditText («Nombre», «Duración», «Curso») y
un Button (botón «Enviar»):
Este chero XML es generado automáticamente por

Android Studio al utilizar su editor visual de creación
de interfaces.Si alguna vez has creado páginas Web
con un editor WYSIWYG tipo KompoZer o
DreamWeaver, es algo similar: compones
grá camente la página y se genera el código HTML
acorde a esos elementos y disposición.
1 <?xml version="1.0" encoding="utf-8"?>

2 <FrameLayout xmlns:android="http://schemas.android.co
3 xmlns:tools="http://schemas.android.com/tools"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:paddingBottom="@dimen/activity_vertical_m
7 android:paddingLeft="@dimen/activity_horizontal_m
8 android:paddingRight="@dimen/activity_horizontal_
9 android:paddingTop="@dimen/activity_vertical_marg
10 tools:context="com.academiaandroid.interfazusuari
11
12 <TextView
13 android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:textAppearance="?android:attr/tex
16 android:text="Datos del curso:"
17 android:id="@+id/textView"
18 android:textStyle="bold"
19 android:layout_row="0"
20 android:layout_alignParentLeft="true"
21 android:layout_marginLeft="0dp"
22 android:layout_alignParentTop="true"
23 android:layout_marginTop="0dp" />
24
25 <EditText
26 android:layout_width="159dp"
28 android:id="@+id/editText"
29 android:hint="Nombre"
32 android:layout_centerHorizontal="true"
33 android:layout_gravity="left|center_verti
34
35 <EditText
38 android:inputType="textMultiLine"
39 android:ems="10"
40 android:id="@+id/editText3"
41 android:hint="Temario"
43 android:layout_below="@+id/editText2"
44 android:layout_alignLeft="@+id/editText2"
45 android:layout_alignStart="@+id/editText2
46 android:layout_gravity="right|center_vert
47
48 <EditText
51 android:inputType="number"
52 android:ems="10"
54 android:hint="Duración"
56 android:layout_below="@+id/editText"
57 android:layout_alignLeft="@+id/editText"
58 android:layout_alignStart="@+id/editText"
59 android:layout_gravity="center" />
60
61 <Button
64 android:text="Enviar"
65 android:id="@+id/button"
67 android:layout_alignParentBottom="true"
68 android:layout_alignRight="@+id/editText3
69 android:layout_alignEnd="@+id/editText3"
70 android:layout_marginBottom="45dp"
71 android:layout_gravity="right|bottom" />
72 </FrameLayout>
73
LinearLayout
Este layout alinea los elementos en una única dirección,

que puede ser vertical u horizontal, dependiendo del
valor que le demos al atributo android:orientation. Todos
los elementos aparecerán uno detrás de otro, sin
solaparse entre ellos, como ocurría con el FrameLayout. El

LinearLayout respeta los márgenes entre los elementos
hijos y su gravedad dentro de la pantalla (ésta puede ser a
la derecha, a la izquierda o en el centro).
En este layout, al igual que en el anterior, los elementos

hijos deben establecer sus atributos
android:layout_height y android:layout_width para
determinar sus dimensiones dentro del layout, aunque en
este caso dispondremos de otro atributo llamado
android:layout_weight. Este atributo permite que un
elemento se expanda para llenar cualquier espacio que
quede libre. Por defecto este valor es 0, es decir, no se
expande.
Pongamos un ejemplo. Si agregamos dos cuadros de

texto, según los valores que pongamos a este atributo,
tendremos:
Si a uno se le da el atributo de
android:layout_weight=”1”, sucede que entre los dos
cuadros de texto se ocupa toda la pantalla, uno de
ellos permanecerá en su tamaño normal y al que le
hemos asignado el atributo android:layout_weight
ocupará el resto de la pantalla.
Si le hubiéramos asignado a los dos este atributo igual

a 1, cada uno ocuparía la mitad de la pantalla.
Si le hubiéramos dado a uno el valor 2 y al otro le

hubiéramos dado el valor 1, entre los dos ocuparían
también toda la pantalla pero uno de ellos tendrá el
doble de altura/anchura que el otro.
El layout genérico creado con un LinearLayout tendría este

diseño:
Ahora vamos a realizar el mismo ejemplo que hicimos en

el layout anterior (TableLayout) en este caso con un
LinearLayout con orientación horizontal:
y el chero XML que lo describe:

2 <LinearLayout xmlns:android="http://schemas.android.c
11 android:orientation="horizontal"
12 android:gravity="top">
13
14 <TextView
25 android:layout_marginTop="0dp"
26 android:layout_column="0" />
27
28 <EditText
35 android:layout_column="0"
36 android:layout_row="2" />
37
38 <EditText
42 android:ems="10"
50
51 <EditText
55 android:ems="10"
63
64 <Button
71 android:layout_toRightOf="@+id/editText"
72 android:layout_toEndOf="@+id/editText"
74 </LinearLayout>
75
TableLayout
En este layout, los elementos hijos se distribuyen de

forma tabular, como si de una tabla se tratara, de niendo
las las y columnas necesarias, y la posición de cada
elemento dentro de la tabla.
Para de nir una la, se usa el objeto TableRow, y dentro
de éste se van agregando los elementos que compondrá la
la, sin necesidad de de nir un objeto columna. De este
modo, la tabla vendrá de nida por tantas las como
objetos TableRow hayamos insertado, y tantas columnas
como elementos que hayamos insertado en cada
TableRow.
Vemos un diseño genérico, con la disposición de los

elementos en este formato de tabla:
Ahora veamos el ejemplo que estamos utilizando en los

otros layouts, con controles ya implementados en un
LayoutTable:
El chero XML que describiría este ejemplo sería:

2 <TableLayout xmlns:android="http://schemas.android.c
6 android:paddingBottom="@dimen/activity_vertical_
7 android:paddingLeft="@dimen/activity_horizontal_
8 android:paddingRight="@dimen/activity_horizontal
9 android:paddingTop="@dimen/activity_vertical_mar
10 tools:context="com.academiaandroid.interfazusuar
11 android:gravity="top">
12
13 <TableRow
15 android:layout_height="match_parent">
16
17 <TextView
20 android:textAppearance="?android:attr/te
30
31 </TableRow>
32
33 <TableRow
36
37 <EditText
46 </TableRow>
47
48 <TableRow
51
52 <EditText
56 android:ems="10"
61 android:layout_alignStart="@+id/editText
64 </TableRow>
65
66 <TableRow
69
70 <EditText
74 android:ems="10"
78 android:layout_alignLeft="@+id/editText2
79 android:layout_alignStart="@+id/editText
82 </TableRow>
83
84 <TableRow
87
88 <Button
98 </TableRow>
99 </TableLayout>
100
RelativeLayout
Este layout permite que los elementos se dispongan en la

pantalla de forma relativa al elemento padre o a
cualquier otro elemento agregado al layout, por lo tanto,
podríamos hacer cosas como alinear dos elementos a la
derecha, o crear uno debajo del otro, centrarlos en la

pantalla, a la izquierda, etc.
Veamos también un ejemplo de uso de este layout,

usando los mismos elementos que en los casos anteriores.
y el chero XML correspondiente:

2 <RelativeLayout xmlns:android="http://schemas.android
11
12 <TextView
23 android:layout_marginTop="0dp" />
24
25 <EditText
34
35 <EditText
39 android:ems="10"
46 android:layout_gravity="center" />
47
48 <EditText
52 android:ems="10"
59 android:layout_gravity="right|center_vert
60
61 <Button
68 android:layout_gravity="right|bottom"
71 android:layout_toEndOf="@+id/editText" />
72 </RelativeLayout>
73
GridLayout
Layout que de ne un diseño situando a sus hijos en una

forma de rejilla rectangular.
Dicho grid o rejilla se compone de un conjunto de líneas

que separan el área de visualización de las celdas. Las
líneas de cuadrícula son referenciadas por índices. Un
grid con N columnas tiene n + 1 índices del grid que van de
0 a N, ambos inclusive.
En el siguiente ejemplo, puedes comprobar cómo

quedaría esta forma de distribución de los controles:
2 <GridLayout xmlns:android="http://schemas.android.com
11
12 <TextView
25
26 <EditText
36
37 <EditText
41 android:ems="10"
47 android:layout_gravity="left|center"
50
51 <EditText
55 android:ems="10"
64
65 <Button
72 android:layout_gravity="left|bottom"
77 </GridLayout>
78
Layouts para contenido dinámico
Cuando el contenido que mostramos en el layout no esta

predeterminado y se genera dinámicamente, por ejemplo
como resultado de una consulta a una base de datos,
podemos utilizar un adaptador que hace de intermediario
entre el layout y el contenido, insertando éste último en
formas de vistas en el layout.
Vemos dos ViewGroups que utilizan esta técnica que nos

aparecen en el Panel de Diseño de Android Studio en la
sección ‘Containers’ (contenedores):
ListView
Un ListView es un ViewGroup que muestra una lista de

elementos desplazables. Los elementos o items de la lista
se insertan automáticamente en ella utilizando un
adaptador que extrae el contenido de una fuente tal
como una matriz o una consulta a una base de datos y
convierte cada item en una vista que se coloca en la lista.
GridView
Un GridView es un ViewGroup que muestra los elementos

en una rejilla de dos dimensiones desplazable. Los
elementos de cada cuadrícula se insertan
automáticamente usando un ListAdapter.
Avanzado: en series dedicada a controles de selección

en una UI vimos en un proyecto ejemplo la
implementación de un ListView y un GridView

extrayendo datos de una base de datos y la creación
de una ListView personalizada
En el próximo tutorial continuaremos con los detectores

de eventos que nos permiten capturar las interacciones
del usuario con los componentes de la interfaz.
Créditos/Documentación: parte de este tutorial está basado en la

documentación o cial publicada por Android Developers con licencia
Creative Commomns Attribution 2.5, de donde también provienen las
imágenes-croquis de los distintos layouts.
Android Studio gridview interfaz usuario
layouts listview
¿Quieres compartirlo?
Tweet Share Share
This Post Has One Comment
Eventos de entrada: detectores de eventos –

Academia Android
23/05/2016 a las 1:34 pm
[…] 2.Interfaces de usuario: layouts […]
Comments are closed.

Layout en Android

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Layout en Android

Загружено:

Авторское право:

Доступные форматы

16/8/2019 Interfaces de usuario: layouts – Academia Android

Interfaces de usuario: layouts

Post Series: Creación de Apps Android:

1. Panel de diseño de UI de Android Studio

2. Interfaces de usuario: layouts

3. Detección de eventos en la interfaz de usuario

4. Proyecto ejemplo de Interfaz de Usuario en

5. Video: creación Interfaz de Usuario en App

En este tutorial describiremos los diseños o layouts más

Para diseñar interfaces de usuario en Android utilizamos

De forma muy simpli cada (y por tanto no muy

Veamos la de nición de los términos View y ViewGroup,

View (o Vista). Esta clase es básica para la creación de

ViewGroup (o Grupo de Vista). Hereda directamente

El chero XML que generamos (por ejemplo

Nota(*): a esta acción del método setContentView

Tenemos dos grandes ventajas al utilizar un chero XML

Nos permite separar mejor la presentación de

Es más fácil visualizar y entender la estructura del

En cualquier caso, también es posible construir la

Antes de empezar a describir distintos tipos de

Hay un atributo muy importante, android:id, que

Para asignarles un id nuevo, usaremos la siguiente

Otra consideración a tener muy en cuenta es que, al

La medida dip (density-independent pixel ó dp,

La medida sp (scaled-independent pixel), similar a

Los Layouts son los elementos sobre los cuales se

Para poder implementar cualquiera de estos elementos

A continuación describiremos diferentes tipos de Layouts

Es el más simple de todos. En él, todos los elementos se

Los elementos incluidos en este layout han de tener los

match_parent ( ll_parent) si lo que se quiere es que

wrap_content, si se desea que tome la dimensión de

A partir de la versión 8 de la API de Android, el valor

Si queremos posicionar los elementos de otra forma,

Veamos un ejemplo de cómo quedaría una interfaz con

y del chero XML que lo describe, donde vemos cómo se

Este chero XML es generado automáticamente por

1 <?xml version="1.0" encoding="utf-8"?>

Este layout alinea los elementos en una única dirección,

solaparse entre ellos, como ocurría con el FrameLayout. El

En este layout, al igual que en el anterior, los elementos

Pongamos un ejemplo. Si agregamos dos cuadros de

Si le hubiéramos asignado a los dos este atributo igual

Si le hubiéramos dado a uno el valor 2 y al otro le

El layout genérico creado con un LinearLayout tendría este

Ahora vamos a realizar el mismo ejemplo que hicimos en

y el chero XML que lo describe:

1 <?xml version="1.0" encoding="utf-8"?>

En este layout, los elementos hijos se distribuyen de

Vemos un diseño genérico, con la disposición de los

Ahora veamos el ejemplo que estamos utilizando en los

El chero XML que describiría este ejemplo sería:

1 <?xml version="1.0" encoding="utf-8"?>

Este layout permite que los elementos se dispongan en la

derecha, o crear uno debajo del otro, centrarlos en la

Veamos también un ejemplo de uso de este layout,

y el chero XML correspondiente:

1 <?xml version="1.0" encoding="utf-8"?>

Layout que de ne un diseño situando a sus hijos en una

Dicho grid o rejilla se compone de un conjunto de líneas

En el siguiente ejemplo, puedes comprobar cómo

Layouts para contenido dinámico

Cuando el contenido que mostramos en el layout no esta