Taller de

programación de
aplicaciones
Móviles
Profesor: Jorge Astorga
Taller de programación de aplicaciones móviles

PLANIFICACIÓN

1.Layout
2.FrameLayout
3.LinearLayout
4.TableLayout y TableRow
5.Space
6.Constraint Layout
Taller de programación de aplicaciones móviles

LAYOUT

• Son contenedores no visuales de componentes

• Permiten controlar su distribución, su posición y
su tamaño.
• Posicionan cada componente gráfico en la
pantalla del dispositivo.
• Puede contener otros layouts en su interior.
• El contenedor principal, es el padre y sus
descendientes, hijos.
Taller de programación de aplicaciones móviles

TIPOS DE LAYOUTS

Android Studio posee diferentes tipos de layouts:

• FrameLayout
• LinearLayout (horizontal)
• LinearLayout(vertical)
• TableLayout
• TableRow
• Space
• Constraint Layout
Taller de programación de aplicaciones móviles

FRAMELAYOUT

• Coloca los elementos hijos, según la

distribución, uno encima del otro, todos en un
mismo lugar.
• Un ejemplo de uso es cuando tenemos dos
componentes y queremos que se vea uno u
otro.
• Esto lo podemos acompañar con la propiedad
visibility que recibe por valor visible o invisible.
Taller de programación de aplicaciones móviles

FRAMELAYOUT - EJEMPLO
Taller de programación de aplicaciones móviles

FRAMELAYOUT

• Utilizando la propiedad
Android:layouts_gravity=“right”, alineamos el
componentes a la derecha para que no quede
uno encima del otro.
• Puede recibir más de un valor; debemos
separarlos con el símbolo |(barra).
• Los valores a recibir son: top, botton, left,
right,center
Taller de programación de aplicaciones móviles

FRAMELAYOUT - EJEMPLO

• Crear un proyecto llamado “CLASE_06_LAYOUTS”

sin actividad. “No Activity”
• Agregar una actividad vacía “Empty Activity”,
llamada “FrameLayout”, marcar como launcher.
• Agregar un <FrameLayout> padre y dentro
agregar dos hijos. <Button> y <RatingBar>
• Verá que se sobreponen
• Alinear a la derecha el botón para que no se
sobreponga al <RatingBar>
Taller de programación de aplicaciones móviles

FRAMELAYOUT - EJEMPLO
Taller de programación de aplicaciones móviles

FRAMELAYOUT – Propiedades Interesantes

• layout_width y layout_height, que pueden

tomar por valor
• match_parent: permite tomar el tamaño de su
contenedor
• wrap_content: permite tomar la dimensión de su
propio contenido.
• Modificar las propiedades del botón para que
tome el tamaño del contenedor
Taller de programación de aplicaciones móviles

FRAMELAYOUT - EJEMPLO
Taller de programación de aplicaciones móviles

LINEARLAYOUT

• Coloca los elementos hijos uno encima del otro

• Lo hace de dos maneras, horizontal o vertical.
• Esto dependerá de si usamos
LinearLayout(horizontal) o LinearLayout(vertical)
• Podemos cambiar la orientación del
LinearLayout utilizando la propiedad orientation.
Taller de programación de aplicaciones móviles

LINEARLAYOUT - EJEMPLO

• Agregar una actividad vacía “Empty Activity”, llamada

“LinearLayout”
• Agregar un “LinearLayout” vertical padre y dentro
agregar dos hijos. LinearLayout Horizontal y
LinearLayout vertical
• Dentro de linear Layout horizontal agregar 5 botones
alineados horizontalmente
• Dentro de linear Layout vertical agregar 2 botones
alineados verticalmente
• Cambiar layout_width y layout_height del Layout
Horizontal para que se adapte a su contenido.
Taller de programación de aplicaciones móviles

LINEARLAYOUT - EJEMPLO
Taller de programación de aplicaciones móviles

TABLELAYOUT Y TABLEROW

• Permite distribuir los componentes hijos en

forma de tabla, definiendo las filas y columnas.
• El ancho de la columna lo da el componente hijo
de mayor tamaño.
• layout_column: permite asignar la columna
• layout_span: permite unir columnas
• CollapseColumns: permite ocultar columnas
• strechColumns: permite ocupar todo el ancho.
Taller de programación de aplicaciones móviles

TABLELAYOUT - EJEMPLO

• Agregar una actividad vacía “Empty Activity”, llamada

“TableLayout”
• Agregar un componente “TableLayout” , aparecerán por
defecto varios TableRow que son las filas.
• Dentro del primer TableRow agregar 1 botón, del segundo
2 botones, del tercero 3 botones y del cuarto 4 botones.
Asignar a cada botón su correspondiente columna con
layout_column.
• Agregar margen de 2dp a los últimos 4 botones para que
se vean mas separados.
• Se debe mostrar como indica la siguiente imagen.
Taller de programación de aplicaciones móviles

TABLELAYOUT - EJEMPLO
Taller de programación de aplicaciones móviles

TABLELAYOUT - EJEMPLO

• Utilizando android:layout_span en los botones, haz

que en la segunda TableRow cada botón ocupe 2
columnas.
• Utilizando android:collapseColumns en el
TableLayout haz que desaparezca la primera columna
• Utilizando android:stretchColumns en el TableLayout
haz que la columna 2 ocupe todo el espacio
disponible
• Se debe mostrar el resultado final como indica la
siguiente imagen.
Taller de programación de aplicaciones móviles

TABLELAYOUT - EJEMPLO
Taller de programación de aplicaciones móviles

SPACE

• permiten crear espacios entre componentes que

se encuentran dentro de un Layout
• Agregar al ejemplo anterior un espacio en la
segunda columna de la última fila de tal manera
que se visualice como muestra la imagen.
Taller de programación de aplicaciones móviles

SPACE - EJEMPLO
Taller de programación de aplicaciones móviles

CONSTRAINT LAYOUT

• Es un diseño en Android que le brinda formas

adaptables y flexibles de crear vistas para sus
aplicaciones.
• Es el diseño predeterminado en Android Studio,
• Brinda muchas formas de colocar objetos y
restringirlos a su contenedor o entre sí.
Taller de programación de aplicaciones móviles

CONSTRAINT LAYOUT - EJEMPLO

• Agregar una actividad vacía “Empty Activity”, llamada

“ConstraintLayout”
• Por defecto se genera un Constraint Layout
• Agregar una imagen, un botón y un texto en vertical
• Finalmente agregar 2 Checkbox horizontalmente
• Ejecutar emulador y se verán todo sobrepuesto.
• Luego presionar el botón “Infer constraint” y se ubicarán
todos los componentes tal cual se muestran en la imagen
de la siguiente Slide.
• Ejecutar emulador nuevamente.
Taller de programación de aplicaciones móviles

CONSTRAINT LAYOUT - EJEMPLO

Taller de programación de aplicaciones móviles

Resumen

• Aprendimos que es un Layout y para que sirve

• Conocimos los distintos tipos de Layout y sus
características
• Aprendimos cómo ubicar y distribuir los diferentes
componentes en la pantalla.
Taller de programación de aplicaciones móviles

TEST DE AUTOEVALUACIÓN

1. ¿Qué es un FrameLayout y en qué casos se

utiliza?
2. ¿Qué diferencia existe entre un TableLayout y un
ConstraintLayout?
3. ¿Cuáles son las principales propiedades de un
TableLayout?
4. En que casos puedo usar el Space Layout
Taller de programación de aplicaciones móviles

EJERCICIOS PRÁCTICOS 1

1. Cree un nuevo proyecto llamado “EJERCICIO_LAYOUTS”

2. Utilizando TableLayout Genere una galería de fotos de 4
filas y 3 columnas. Agregar Titulo al inicio
3. Generar un formulario de registro con las siguientes
características utilizando LinearLayout.
• 3 botones en la primera fila
• Un label, un campo y un botón en la segunda fila
• 3 radiobutton en la tercera fila.
• Agregar márgenes para que los componentes no se
encuentren unidos entre si y que tampoco se
sobrepongan.