Desarrollo de Soluciones

Móviles
Layouts
Pedro Yuri Marquez Solis
4

1
 Interfaces en Android

LinearLayout o
ConstraintLayout

TextView Button
 Layouts
Algunos de los view groups
• Un Layout es un elemento que
representa el diseño de la interfaz más populares son:
de usuario de componentes
gráficos como una actividad,  LinearLayout
fragmento o widget.  FrameLayout
• Los layouts pueden ser creados a  RelativeLayout
través de archivos XML o con
código Java de forma programática  TableLayout
 GridLayout
 ConstrainLayout
Crear Layouts En Android Studio

crear un layout nuevo

 Cargar layout XML En Android

• Al tener definido tu layout(recurso), ya es posible inflar su contenido

en la actividad. Para ello usa el método setContentView() dentro del
controlador onCreate().
 Atributos De Un Layout

• Encontrarás atributos para el tamaño, la alineación, padding, bordes,

backgrounds, etc.
• Identificador de un view— Existe un atributo que heredan todos los
elementos llamado id. Este representa un identificador único para
cada elemento.
 Atributos De Un Layout

wrap_content: Ajusta el tamaño al match_parent: Ajusta el tamaño a

espacio mínimo que requiere el las dimensiones máximas que el
view padre le permita.

En el botón ajusta su ancho y alto, la cantidad

necesaria para envolver el texto interior.
 FRAMELAYOUT

• Un FrameLayout es un view group

creado para mostrar pocos elementos
en pantalla.
• Para alinear cada elemento dentro del
FrameLayout usa el parámetro
android:layout_gravity.

• Es posible crear variaciones

combinadas, como por ejemplo right +
bottom.
• En código esta combinación puedes
representarla con un OR inclusivo.
android:layout_gravity="right|bottom"
<FrameLayout
xmlns:android=http://schemas.android.com/apk/res/
Android
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EjemFrameLay">
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Saltar"
android:id="@+id/boton_saltar"
android:layout_gravity="center_horizontal|bottom"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/imagen_background"
android:layout_gravity="top|center"
android:src="@drawable/fondog1"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imagen_estadistica"
android:layout_gravity="center"
android:src="@drawable/estadistica"
android:padding="50dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/estaddia"
android:layout_gravity="center|top"
android:src="@drawable/estad_diaria"
android:padding="50dp" />
</FrameLayout>
 LinearLayout

• Distribuye sus hijos

en una sola
dimensión
establecida.
• Todos organizados en
una sola columna
(vertical) o en una
sola fila (horizontal).
 LinearLayout
El parámetro android:layout_weight, define la importancia
El LinearLayout permite que tiene un view dentro del linear layout. A mayor
asignar una gravedad a cada
componente según el espacio importancia, más espacio podrá ocupar.
que ocupa.

Para distribuir todos los elementos sobre el espacio total del

layout, puedes usar el atributo height con valor cero.
android:layout_height="0dp"
android:layout_weight="3"
 Código Ejemplo LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/an
droid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="48dp">
<TextView
android:id="@+id/texto_conectar"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Conectar"
android:textAppearance="?android:attr/textAppearanceL
arge" />
<EditText
android:id="@+id/input_usuario"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:hint="Correo" />
<EditText
android:id="@+id/input_contrasena"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:ems="10"
android:hint="Contraseña"
android:inputType="textPassword" />
<Button
android:id="@+id/boton_iniciar_sesion"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Iniciar Sesion" />
<TextView
android:id="@+id/texto_olvidaste_contrasena"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="¿Olvidaste tu constraseña?"
android:textAppearance="?android:attr/textAppearance
Medium"
android:textColor="#0E8AEE" />
</LinearLayout>
En modo
diseño y
blueprint
 RelativeLayout

El RelativeLayout permite alinear cada hijo

con referencias subjetivas de cada hermano.

Imagina en una sentencia como “el botón estará por debajo del texto” o
“la imagen se encuentra a la derecha de la descripción”.

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
En modo
diseño y
blueprint
 TableLayout

• El TableLayout organiza views en filas y

columnas de forma tabular.
• Para crear las filas se usa el componente
TableRow
• Cada celda es declarada como un view de
cualquier tipo (imagen, texto, otro group
view, etc.) dentro de la fila.
• Con otro tipo de view, todo el espacio de
la fila sea ocupado por el objeto.
• El TableRow trae consigo un parámetro
llamado android:layout_column para
asignar la columna a la que pertenece
cada celda en su interior.
• Puedes usar el parámetro weight para
declarar pesos de las celdas.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/re
s/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:stretchColumns="1">
<TableRow android:background="#128675">
<TextView
android:layout_column="0"
android:padding="3dip"
android:text="Producto"
android:textColor="@android:color/white" />
<TextView
android:layout_column="2"
android:padding="3dip"
android:text="Subtotal"
android:textColor="@android:color/white" />
</TableRow>
<TableRow>
<TextView
android:layout_column="0"
android:padding="3dip"
android:text="Jabón de manos x 1" />
<TextView
android:layout_column="2"
android:gravity="left"
android:padding="3dip"
android:text="$2" />
</TableRow>
<TableRow>
<TextView
<TextView android:id="@+id/textView3"
android:layout_column="0" android:layout_width="wrap_content"
android:padding="3dip" android:layout_height="wrap_content"
android:text="Shampoo Monster x 1" android:layout_column="0"
/> android:padding="3dip"
android:text="Detergente Limpiadin x
<TextView 1" />
android:layout_column="2"
android:gravity="left" <TextView
android:padding="3dip" android:id="@+id/textView4"
android:text="$10" /> android:layout_width="wrap_content"
</TableRow> android:layout_height="wrap_content"
android:layout_column="2"
<TableRow android:gravity="left"
android:layout_width="match_parent" android:padding="3dip"
android:layout_height="match_parent"> android:text="$13,4" />
</TableRow>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
…….
android:layout_column="0"
android:padding="3dip"
android:text="Pastas Duria x 2" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:gravity="left"
android:padding="3dip"
android:text="$18" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:layout_column="1"
android:padding="3dip"
android:text="Subtotal"
android:textColor="#128675" />
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_gravity="left"
android:gravity="right"
android:padding="3dip"
android:text="$43,4" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:padding="3dip"
android:text="Costo envío"
android:textColor="#128675" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_gravity="left" android:text="Total"
android:gravity="right" android:textColor="#128675" />
android:padding="3dip"
android:text="$10" /> <TextView
</TableRow> android:layout_width="wrap_content"
android:layout_height="wrap_content"
<TableRow android:layout_column="2"
android:layout_width="match_parent" android:layout_gravity="left"
android:layout_height="match_parent"> android:gravity="right"
android:padding="3dip"
<TextView android:text="$48,4" />
android:id="@+id/textView8" </TableRow>
android:layout_width="wrap_content"
android:layout_height="wrap_content" </TableLayout>
android:layout_column="1"
android:padding="3dip"
android:text="Cupón"
android:textColor="#128675" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_gravity="left"
android:gravity="right"
android:padding="3dip"
android:text="-$5" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:padding="3dip"
En modo
diseño y
blueprint
 GridLayout
Fila - columna
• Alinea sus elementos hijos en una cuadrícula
(grilla ó grid). Nace con el fin de evitar anidar
linear layouts para crear diseños complejos.
• Los índices inician en cero.

Atributos :
• columnCount: Cantidad de columnas
• rowCount: Cantidad de filas.
• useDefaultMargins: el valor de true establece
márgenes predeterminadas entre los ítems.
 GridLayout

• Es posible especificar la El siguiente código muestra un TextView

que ocupa 2 columnas y 3 filas.
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.
<?xml version="1.0" encoding="utf-8"?> style="@style/AppTheme.BotonCalculadora.Azul"
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_height="match_parent" android:layout_column="2"
android:alignmentMode="alignBounds" android:layout_row="1"
android:columnCount="4" android:text="9" />
android:rowCount="5">
<TextView
<EditText android:id="@+id/numero_4"
android:id="@+id/edtPantalla" style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_row="0" android:layout_column="0"
android:layout_column="0" android:layout_row="2"
android:layout_columnSpan="4" android:text="4" />
android:textSize="32dp"
android:text="0123456" <TextView
android:padding="5dp"> android:id="@+id/numero_5"
style="@style/AppTheme.BotonCalculadora.Azul"
</EditText> android:layout_width="wrap_content"
<TextView android:layout_height="wrap_content"
android:id="@+id/numero_7" android:layout_column="1"
style="@style/AppTheme.BotonCalculadora.Azul" android:layout_row="2"
android:layout_column="0" android:text="5" />
android:layout_row="1"
android:text="7" /> <TextView
android:id="@+id/numero_6"
<TextView style="@style/AppTheme.BotonCalculadora.Azul"
android:id="@+id/numero_8" android:layout_width="wrap_content"
style="@style/AppTheme.BotonCalculadora.Azul" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_column="2"
android:layout_height="wrap_content" android:layout_row="2"
android:layout_column="1" android:text="6" />
android:layout_row="1"
android:text="8" />

<TextView
android:id="@+id/numero_9"
<TextView <TextView
android:id="@+id/signo_por" android:id="@+id/signo_menos"
style="@style/AppTheme.BotonCalculadora.Rojo" style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_column="3" android:layout_column="3"
android:layout_gravity="fill" android:layout_gravity="fill_horizontal"
android:layout_row="2" android:layout_row="3"
android:gravity="center" android:gravity="center"
android:text="×" /> android:text="-" />

<TextView <TextView
android:id="@+id/textView10" android:id="@+id/punto"
style="@style/AppTheme.BotonCalculadora.Rojo" style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_column="3" android:layout_column="0"
android:layout_gravity="fill_horizontal" android:layout_gravity="fill_horizontal"
android:layout_row="1" android:layout_row="4"
android:text="÷" /> android:gravity="center_horizontal"
android:text="." />
<TextView
android:id="@+id/numero_1" <TextView
style="@style/AppTheme.BotonCalculadora.Azul" android:id="@+id/cero"
android:layout_column="0" style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_row="3" android:layout_column="1"
android:text="1" /> android:layout_row="4"
android:text="0" />
<TextView
android:id="@+id/numero_2" <TextView
style="@style/AppTheme.BotonCalculadora.Azul" android:id="@+id/signo_igual"
android:layout_width="wrap_content" style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_height="wrap_content" android:layout_column="2"
android:layout_column="1" android:layout_gravity="fill_horizontal"
android:layout_row="3" android:layout_row="4"
android:text="2" /> android:text="=" />

<TextView <TextView
android:id="@+id/numero_3" android:id="@+id/signo_mas"
style="@style/AppTheme.BotonCalculadora.Azul" style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_width="wrap_content" android:layout_column="3"
android:layout_height="wrap_content" android:layout_gravity="fill_horizontal"
android:layout_column="2" android:layout_row="4"
android:layout_row="3" android:text="+" />
android:text="3" /> </GridLayout>