INVESTIGACIÓN:

LAYOUTS EN ANDROID STUDIO

GRUPO 5: Rafael Barragán / Andrés Bravo / Lorena Lucero
¿Qué es un layout?
Contenedor principal que
define el orden y secuencia
en que se organizarán los
widgets en nuestra
actividad. Actúa como
contenedor de views para
facilitar la comunicación del
usuario con la interfaz de la
aplicación.

•
¿Qué es un view?

Es un componente que
permite controlar la
interacción del usuario con
la aplicación. Son utilizados
para que el usuario
comprenda los objetivos de
la actividad.

•
Tipos de layout

• LinearLayout
• RelativeLayout
• TableLayout
• FrameLayout
Inflar código Java (Parsear)

Para reducir la complejidad de diseño de interfaz, Android declara la estructura en un simple

archivo XML definido por elementos muy intuitivos. Estos archivos luego son analizados
con una librería de Parsing XML para generar automáticamente todo el código Java
necesario a partir de la estructura predefinida.
Cargar layout XML

Se usa el método setContentView() dentro del controlador

onCreate(). Es necesario pasar la referencia del layout que existe
dentro del archivo R.java.
Atributos de un Layout
• layout:height

• layout:width

• layout:layout_margin

• layout:alignComponent

• layout:alignParent

• layout:centerInParent

• id
Atributos de un Layout
MATCH_PARENT
• Permite igualar el ancho y el alto de un elemento hijo, al valor de estos atributos en su elemento padre.
Atributos de un Layout
WRAP_CONTENT
• Limita el ancho y el alto de un elemento en base a su contenido, considerando además el valor de relleno
(padding) establecido.
Linear Layout
LinearLayout
Es un grupo de vista que alinea todos los campos secundarios en una única
dirección, de manera vertical u horizontal. Se especifica la dirección del diseño
con el atributo android:orientation
LinearLayout
Todos los campos
secundarios de un
LinearLayout se apilan uno
detrás de otro, por cual una
lista vertical solo tendrá un
campo secundario por fila,
independientemente del
ancho que tengan, y una lista
horizontal solo tendrá la
altura de una fila (la altura
del campo secundario más
alto, más el relleno).
LinearLayout - Volumen del diseño
También es compatible con la
asignación de un volumen a campos
secundarios individuales con el
atributo android:layout_weight. Este
atributo asigna un valor de
“importancia” a una vista en términos
de la cantidad de espacio que debe
ocupar en la pantalla. El volumen
predeterminado es cero.
LinearLayout - Ejemplo
<LinearLayout <EditText
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_height="match_parent"
android:paddingLeft="16dp" android:layout_weight="1"
android:paddingRight="16dp" android:gravity="top"
android:orientation="vertical" > android:hint="@string/message" />
<EditText
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_width="100dp"
android:hint="@string/to" /> android:layout_height="wrap_content"
<EditText android:layout_gravity="right"
android:layout_width="match_parent"
android:text="@string/send" />
android:layout_height="wrap_content"
android:hint="@string/subject" /> </LinearLayout>
LinearLayout - Ejemplo
Relative Layout
RelativeLayout
Permite crear un grupo de
componentes con ubicaciones
relativas. Quiere decir que se
ubicarán por referencias y no
por valores absolutos. Esto
permite ajustar nuestras
aplicaciones a cualquier tipo de
pantalla para dispositivos
móviles.
Parámetros del 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.
Ejemplo del RelativeLayout
Frame Layout
FrameLayout
• Este layout está diseñado para definir un
área en la pantalla que mostrará sólo
un elemento.
• Sin embargo, es posible agregar varios
elementos hijos a un FrameLayout —los
cuales estarán alineados a la esquina
superior izquierda, uno encima de otro—
y controlar su posición dentro del mismo
mediante el atributo
android:layout_gravity.
Consideraciones
• El tamaño de un FrameLayout depende de las dimensiones de su elemento hijo más grande,
considerando además el valor de relleno (padding) establecido y si se encuentra visible o no.
• Las vistas declaradas como GONE se utilizan para dimensionar sólo si
setConsiderGoneChildrenWhenMeasuring() se establece en true.

• El atributo GONE define a una vista como invisible, ignorando sus dimensiones para propósitos de diseño.
Se utiliza con el método setVisibility(int) y el atributo XML android:visibility.
Atributos XML propios
• android:foregroundGravity

• android:measureAllChildren

Constructores públicos
• FrameLayout(Context context)

• FrameLayout(Context context, AttributeSet attrs)

• FrameLayout(Context context, AttributeSet attrs, int defStyleAttr)

• FrameLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)

o Los atributos context y attrs no deben ser null.

o AttributeSet es una colección de atributos, asociada con una etiqueta en un documento XML.
o defStyleAttres un atributo en el tema actual que contiene una referencia a un recurso de estilo que
proporciona valores predeterminados. Puede ser 0 para no buscar valores predeterminados.
o defStyleReses un identificador de un recurso de estilo que suministra valores predeterminados,
disponible sólo si defStyleAttr es 0 o no se encuentra en el tema. Puede ser 0 para no buscar valores
predeterminados.
Métodos públicos/protegidos
• void

Agrega o inicializa un nuevo elemento o establece/modifica un atributo.

• boolean

Consulta de estados o atributos establecidos.

• CharSequence

Devuelve el nombre de la clase del objeto. Utilizado para fines de accesibilidad.

• FrameLayout.LayoutParams

• ViewGroup.LayoutParams

Devuelve un conjunto de parámetros del layout en base al atributo especificado (si el método lo requiere)
¿Cuándo utilizar FrameLayout?
• Si bien LinearLayout, RelativeLayout y TableLayout tienen un mayor número de prestaciones, la eficiencia de
FrameLayout lo convierten en una excelente opción como contenedor de fragmentos y componentes.

Más información
• Atributos XML heredados
• Constantes, campos heredados
• Métodos heredados
https://developer.android.com/reference/android/widget/FrameLayout.html
Table Layout
TableLayout
• Es un layout que organiza a sus
elementos hijos en filas y columnas.
• Consiste en un número de objetos de
tipo TableRow, el cual define una fila.
• Cada fila tiene cero o más celdas (índice
basado en cero, based-zero index).
MATCH_PARENT, WRAP_CONTENT — Aplicado a celdas

• A los elementos hijos de un TableLayout no se les puede establecer el atributo layout_width. El ancho
siempre es MATCH_PARENT.
• El atributo layout_height puede ser definido por un elemento hijo; el valor predeterminado es WRAP_CONTENT.
Si el elemento hijo es un TableRow, entonces la altura siempre es WRAP_CONTENT.
Consideraciones
• El total de columnas de una tabla está definido por la fila con mayor cantidad de celdas.
• El ancho de una columna está definido por la fila con la celda más ancha en esa columna.
• Cada celda puede contener un objeto de tipo View. Está permitido dejar celdas vacías.
• Al igual que en HTML, una celda puede abarcar (span) más de una columna.
• No se muestran líneas de borde en las filas, columnas o celdas.
• Aunque el elemento hijo de un TableLayout usualmente es un TableRow, se puede utilizar cualquier subclase
View como un elemento hijo directo de TableLayout. El elemento se mostrará como una sola fila que abarca
todas las columnas de la tabla.
Shrinkable, Stretchable, Collapsed — Aplicado a columnas
• El ancho de una columna está definido por la fila con la celda más ancha en esa columna.
Sin embargo, en un TableLayout se puede especificar ciertas columnas como “encogibles” o “estirables”,
con los métodos setColumnShrinkable() o setColumnStretchable().
Si se marca como encogible, el ancho de la columna puede reducirse para ajustarse a la tabla en su
objeto primario. Si está marcado como estirable, puede expandirse en ancho para adaptarse a cualquier
espacio extra.
• El ancho total de la tabla se define por su contenedor principal teniendo en cuenta que una columna
puede estar definida como retráctil (shrinkable) o estirable (stretchable).
• Por último, se puede ocultar una columna llamando a setColumnCollapsed().
Atributos XML propios
• android:collapseColumns

• android:shrinkColumns

• android:stretchColumns

Constructores públicos
• TableLayout(Context context)

• TableLayout(Context context, AttributeSet attrs)

o Los atributos context y attrs no deben ser null.

o AttributeSet es una colección de atributos, asociada con una etiqueta en un documento XML.
Métodos públicos/protegidos
• void

Agrega o inicializa un nuevo elemento o establece/modifica un atributo.

• boolean

Consulta de estados o atributos establecidos.

• CharSequence

Devuelve el nombre de la clase del objeto. Utilizado para fines de accesibilidad.

• TableLayout.LayoutParams

• LinearLayout.LayoutParams

Devuelve un conjunto de parámetros del layout en base al atributo especificado (si el método lo requiere)
Más información
• Atributos XML heredados
• Constantes, campos heredados
• Métodos heredados
https://developer.android.com/reference/android/widget/TableLayout.html
Grid View
GridView
• Una vista que muestra elementos en una cuadrícula bidimensional desplazable (scrolling).
Consideraciones — TableLayout vs GridView
• Un GridView es básicamente un ListView, con la diferencia de que sus elementos están dispuestos en una
cuadrícula, en lugar de en una lista vertical. Se encuentra vinculado a un adaptador y recupera vistas
desde el mismo a medida que el usuario se desplaza a través de él.
• Todos los elementos de la cuadrícula deben ser del mismo tamaño.
• Un TableLayout es sólo un gestor de diseño, algo así como una tabla en HTML. No permite hacer ningún
desplazamiento, a no ser que el TableLayout se encuentre en un ScrollView.
• Todos los datos que está mostrando deben ser poblados en el TableLayout de antemano, por lo que el
ScrollView sabe el espacio total que debe desplazarse. No permite selección o interacción por ítem de
manera directa, porque un TableLayout es sólo un gestor de diseño.
Atributos XML propios
• android:columnWidth

Especifica el ancho fijo para cada columna.

• android:gravity

Especifica el atributo de gravedad (posición) dentro de cada celda.

• android:horizontalSpacing

Define el espaciado horizontal predeterminado entre columnas.

• android:numColumns

Define cuántas columnas mostrar.

• android:stretchMode

Define cómo se deben estirar las columnas para llenar el espacio vacío disponible, si lo hay.
• android:verticalSpacing

Define el espaciado vertical predeterminado entre filas.

Constructores públicos
• GridView(Context context)

• GridView(Context context, AttributeSet attrs)

• GridView(Context context, AttributeSet attrs, int defStyleAttr)

• GridView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)

o Los atributos context y attrs no deben ser null.

o AttributeSet es una colección de atributos, asociada con una etiqueta en un documento XML.
o defStyleAttres un atributo en el tema actual que contiene una referencia a un recurso de estilo que
proporciona valores predeterminados. Puede ser 0 para no buscar valores predeterminados.
o defStyleReses un identificador de un recurso de estilo que suministra valores predeterminados,
disponible sólo si defStyleAttr es 0 o no se encuentra en el tema. Puede ser 0 para no buscar valores
predeterminados.
Métodos públicos/protegidos
• void

Agrega o inicializa un nuevo elemento o establece/modifica un atributo.

• boolean

• int

Consulta de estados o atributos establecidos.

• CharSequence

Devuelve el nombre de la clase del objeto. Utilizado para fines de accesibilidad.

• ListAdapter

Devuelve el adaptador actualmente asociado con este widget.

Más información
• Atributos XML heredados
• Constantes, campos heredados
• Métodos heredados
https://developer.android.com/reference/android/widget/GridView.html
Micro Tarea 1 Calculadora

Diseñar el teclado de una

calculadora simple utilizando el
grid layout.
Micro Tarea 2

• Al taller de fragmentos realizado

previamente, implementar
FrameLayout en la parte donde se
muestra el vídeo de YouTube.
Referencias
• https://developer.android.com/reference/android/widget/FrameLayout.html
• https://developer.android.com/reference/android/widget/TableLayout.html
• https://developer.android.com/reference/android/widget/GridView.html
• http://www.android-examples.com/difference-between-match-parentfill-parentwrap-content-in-android/
• https://camilorada.wordpress.com/tag/framelayout/
• http://www.hermosaprogramacion.com/2014/09/android-layouts-views/