Diseño XML Android

Programación Móvil
Ingeniería de Sistemas

Profesor: Andrés Esteban Pérez Ramírez

¿Que es un Layout?

Un Layout es un elemento que representa el diseño de la interfaz de usuario de

componentes gráficos como una actividad, fragmento o widget.

Ellos se encargan de actuar como contenedores de views para establecer un orden

visual, que facilite la comunicación del usuario con la interfaz de la aplicación.
¿Cómo crear un Layout?
Visual Designer Android Studio
Tipos de Componentes UI

Cada recurso del tipo layout debe ser un archivo XML, donde el elemento raíz sólo puede
ser un ViewGroup o un View. Dentro de este elemento puedes incluir hijos que definan la
estructura del diseño.
Views

● Button

● Check Box

● Radio Button

● Toggle Button

● Spinner

● Picker
Diferencias entre ViewGroup y View
Tipos de View Groups(màs usados)

● LinearLayout
● FrameLayout
● RelativeLayout
● TableLayout
● GridLayout
LinearLayout

Se les conoce como contenedores y sirven para reorganizar los elementos de nuestra aplicación. Sus
hijos son los views, viewgroup u otros layouts. Nos permitirán alinear sus hijos en una única
dirección, ya sea horizontal o vertical como se muestra en las siguientes imágenes. La orientación
predeterminada es horizontal.
LinearLayout
LinearLayout con Weight

android:layout_weight

La ilustración muestra tres views con pesos de 1, 2 y 3 respectivamente. Es

evidente que la magnitud de sus alturas corresponde a su preponderancia.
Matemáticamente, el espacio disponible total sería la suma de las alturas (6),
por lo que 3 representa el 50%, 2 el 33,33% y 1 el 16,66%.

Aunque esto podemos deducirlo por compresión, es posible definir la suma

total del espacio con el atributo android:weightSum. Dependiendo de este
valor, los weights serán ajustados.
Para este ejemplo sería android:weightSum="6"
Cuando se utiliza el atributo layout_weight se debe utilizar 0dp según
corresponda (horizontal-vertical)
LinearLayout para practicar Weights
FrameLayout

FrameLayout no realiza ninguna distribución de las vistas, simplemente las coloca unas encima de otras. Esto le evita
tener que relacionar los tamaños de unas vistas con los de las demás, por lo que se ahorra recorridos del árbol de
vistas, tardando menos en mostrar su contenido.

Que FrameLayout coloque las vistas una sobre otra no significa que todas se alineen automáticamente a la esquina
superior izquierda del diseño.Tenemos el padding y margin.

Hay un parámetro que nos permite controlar el alineamiento de las vistas contenidas en el diseño: Es la gravedad.
Este parámetro, definido en FrameLayout.LayoutParams, y que se corresponde con el atributo android:layout_gravity
no es exclusivo de FrameLayout. LinearLayout también lo proporciona y, por herencia, también TableLayout, TableRow
e incluso RadioGroup.
android:layout_gravity
ScrollView

Es un tipo especial de FrameLayout ya que

permite a los usuarios desplazarse por una
serie de puntos de vista que ocupan más
espacio que el despliegue físico. El
scrollView solo puede contener un
viewGroup y suele ser LinearLayout.
RelativeLayout
En este caso todos los elementos van
colocados en una posición relativa a otro.
Aquí podemos jugar con las distancias entre
elementos en la pantalla, la cual se expresa
en pixeles
RelativeLayout
• android:layout_above: Posiciona el borde
inferior del elemento actual con el borde
superior del view referenciado con el id
indicado.
• android:layout_centerHorizontal: Usa true para
indicar que el view será centrado
horizontalmente con respecto al padre.
• android:layout_alignParentBottom: Usa true
para alinear el borde inferior de este view con
el borde inferior del padre.
• android:layout_alignStart: Alinea el borde inicial
de este elemento con el borde inicial del view
referido por id.
TableLayout
Para crear las filas se usa el componente TableRow
dentro del TableLayout. Cada celda es declarada
como un view de cualquier tipo (imagen, texto, otro
group view, etc.)

El ancho de cada columna es definido tomando

como referencia la celda más ancha. Pero también
podemos definir el comportamiento del ancho de
las celdas con los siguientes atributos:
• android:shrinkColumns: Reduce el ancho de la
columna seleccionada hasta ajustar la fila al
tamaño del padre.
• android:stretchColumns: Permite rellenar el
espacio vacío que queda en el TableLayout,
expandiendo la columna seleccionada.
Ejemplo TableLayout

El TableRow trae consigo un parámetro

llamado android:layout_column para asignar
la columna a la que pertenece cada celda en
su interior. Incluso puedes usar el parámetro
weight para declarar pesos de las celdas.
GridLayout

Su funcionamiento se basa en un sistema de

índices con inicio en cero. Es decir, la primera
columna (o fila) tiene asignado el índice 0, la
segunda el 1, la tercera el 2, etc.
Los atributos más importantes del GridLayout
son:

• columnCount: Cantidad de columnas que

tendrá la grilla.
• rowCount: Cantidad de filas de la cuadrícula.
• useDefaultMargins: Si asignas el valor de true
para establecer márgenes predeterminadas
entre los ítems.
GridLayout

En cuanto a sus parámetros, es posible

especificar la cantidad de filas y columnas
que ocupará una celda a través de los
atributos android:layout_rowSpan y
android:layout_columnSpan. Esta
característica nos posibilita para crear
diseños irregulares que un TableLayout no
permitiría.
Para practicar
Referencias

● http://www.hermosaprogramacion.com/2015/08/tutorial-layouts-en-androi
d/
● http://labs.udacity.com/images/Layout-Cheat-Sheet.pdf
● https://s3-us-west-1.amazonaws.com/udacity-content/PDFs/Common+An
droid+Views+Cheat+Sheet+(1).pdf
● https://www.google.com/design/spec/material-design/introduction.html#