Manual de PROGRAMACION ANDROID E-learning

Interfaz de usuario en Android: Layouts

Los layouts son elementos no visuales destinados a controlar la

distribucin, posicin y dimensiones de los controles que se insertan en
su interior. Estos componentes extienden a la clase base ViewGroup,
como muchos otros componentes contenedores, es decir, capaces de
contener a otros controles. Android nos proporciona estos:

FrameLayout
ste es el ms simple de todos los layouts de Android. Un FrameLayout
coloca todos sus controles hijos alineados con su esquina superior
izquierda, de forma que cada control quedar oculto por el control
siguiente (a menos que ste ltimo tenga transparencia). Por ello, suele
utilizarse para mostrar un nico control en su interior, a modo de
contenedor (placeholder) sencillo para un slo elemento sustituible, por
ejemplo una imagen.
Los componentes incluidos en un FrameLayout podrn establecer sus
propiedades android: layout_widthy android:layout_height, que podrn
tomar los valores match_parent (para que el control hijo tome la
dimensin de su layout contenedor) o wrap_content (para que el
control hijo tome la dimensin de su contenido). Veamos un ejemplo:

Ejemplo:

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

Instructora: Zulma Anglica Argello Matas Pgina 1

 Manual de PROGRAMACION ANDROID E-learning

<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="text" />

</FrameLayout>

Con el cdigo anterior conseguimos un layout tan sencillo como el

siguiente:

LinearLayout
El siguiente tipo de layout en cuanto a nivel de complejidad es el
LinearLayout. Este layout apila uno tras otros todos sus elementos hijos
en sentido horizontal o vertical segn se establezca su propiedadandroid:
orientation.

Al igual que en un FrameLayout, los elementos contenidos en un

LinearLayout pueden establecer sus propiedades android:
layout_width y android:layout_height para determinar sus
dimensiones dentro del layout.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
Instructora: Zulma Anglica Argello Matas Pgina 2
 Manual de PROGRAMACION ANDROID E-learning

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>

Pero en el caso de un LinearLayout, tendremos otro parmetro

con el que jugar, la propiedadandroid: layout_weight. Esta
propiedad nos va a permitir dar a los elementos contenidos en el
layout unas dimensiones proporcionales entre ellas. Esto es ms
dificil de explicar que de comprender con un ejemplo. Si incluimos
en un LinearLayout vertical dos cuadros de texto (EditText) y a
uno de ellos le establecemos unlayout_weight=1 y al otro un
layout_weight=2 conseguiremos como efecto que toda la
superficie del layout quede ocupada por los dos cuadros de texto
y que adems el segundo sea el doble (relacin entre sus
propiedades weight) de alto que el primero.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtDato1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="text"

Instructora: Zulma Anglica Argello Matas Pgina 3

 Manual de PROGRAMACION ANDROID E-learning

android:layout_weight="1" />
<EditText android:id="@+id/TxtDato2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="text"
android:layout_weight="2" />
</LinearLayout>
Con el cdigo anterior conseguiramos un layout como el siguiente:

As pues, a pesar de la simplicidad aparente de este layout resulta ser

lo suficiente verstil como para sernos de utilidad en muchas
ocasiones.

TableLayout
Un TableLayout permite distribuir sus elementos hijos de forma
tabular, definiendo las filas y columnas necesarias, y la posicin de
cada componente dentro de la tabla.

La estructura de la tabla se define de forma similar a como se hace en

HTML, es decir, indicando las filas que compondrn la tabla (objetos
TableRow), y dentro de cada fila las columnas necesarias, con la salvedad

Instructora: Zulma Anglica Argello Matas Pgina 4

 Manual de PROGRAMACION ANDROID E-learning

de que no existe ningn objeto especial para definir una columna (algo
as como un TableColumn) sino que directamente insertaremos los
controles necesarios dentro del TableRow y cada componente insertado
(que puede ser un control sencillo o incluso otro ViewGroup)
corresponder a una columna de la tabla. De esta forma, el nmero final
de filas de la tabla se corresponder con el nmero de elementos
TableRow insertados, y el nmero total de columnas quedar
determinado por el nmero de componentes de la fila que ms
componentes contenga.

Por norma general, el ancho de cada columna se corresponder con el

ancho del mayor componente de dicha columna, pero existen una serie
de propiedades que nos ayudarn a modificar este comportamiento:

android:stretchColumns. Indicar las columnas que pueden

expandir para absorver el espacio libre dejado por las dems
columnas a la derecha de la pantalla.
android:shrinkColumns. Indicar las columnas que se pueden
contraer para dejar espacio al resto de columnas que se puedan
salir por la derecha de la palntalla.
android:collapseColumns. Indicar las columnas de la tabla que se
quieren ocultar completamente.

Todas estas propiedades del TableLayout pueden recibir una lista de

ndices de columnas separados por comas
(ejemplo: android:stretchColumns=1,2,3) o un asterisco para indicar
que debe aplicar a todas las columnas (ejemplo:
android:stretchColumns=*).

Instructora: Zulma Anglica Argello Matas Pgina 5

 Manual de PROGRAMACION ANDROID E-learning

Otra caracterstica importante es la posibilidad de que una celda

determinada pueda ocupar el espacio de varias columnas de la tabla
(anlogo al atributo colspan de HTML). Esto se indicar mediante la
propiedadandroid:layout_span del componente concreto que deber
tomar dicho espacio.

Veamos un ejemplo con varios de estos elementos:

<TableLayout
mlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow>

<TextView android:text="Celda 1.1" />

<TextView android:text="Celda 1.2" />
<TextView android:text="Celda 1.3" />
</TableRow>
<TableRow>

<TextView android:text="Celda 2.1" />

<TextView android:text="Celda 2.2" />
<TextView android:text="Celda 2.3" />
</TableRow>
<TableRow>

<TextView android:text="Celda 3.1"

android:layout_span="2" /> <TextView
android:text="Celda 3.2" />
</TableRow>
</TableLayout>

Instructora: Zulma Anglica Argello Matas Pgina 6

 Manual de PROGRAMACION ANDROID E-learning

El layout resultante del cdigo anterior sera el siguiente:

GridLayout
Este tipo de layout fue incluido a partir de la API 14 (Android 4.0) y sus
caractersticas son similares alTableLayout, ya que se utiliza igualmente
para distribuir los diferentes elementos de la interfaz de forma tabular,
distribuidos en filas y columnas. La diferencia entre ellos radica en la
forma que tiene el GridLayout de colocar y distribuir sus elementos hijos
en el espacio disponible. En este caso, a diferencia del TableLayout
indicaremos el nmero de filas y columnas como propiedades del layout,
mediante android:rowCount yandroid:columnCount. Con estos datos ya
no es necesario ningn tipo de elemento para indicar las filas, como
hacamos con el elemento TableRow del TableLayout, sino que los
diferentes elementos hijos se irn colocando ordenadamente por filas o
columnas (dependiendo de la propiedad android:orientation) hasta
completar el nmero de filas o columnas indicadas en los atributos
anteriores. Adicionalmente, igual que en el caso anterior, tambin
tendremos disponibles las propiedades android:layout_rowSpan
yandroid:layout_columnSpan par a conseguir que una celda ocupe el
lugar de varias filas o columnas.

Instructora: Zulma Anglica Argello Matas Pgina 7

 Manual de PROGRAMACION ANDROID E-learning

Existe tambin una forma de indicar de forma explcita la fila y columna

que debe ocupar un determinado elemento hijo contenido en el
GridLayout, y se consigue utilizando los atributos android:layout_row
yandroid:layout_column. De cualquier forma, salvo para configuraciones
complejas del grid no suele ser necesario utilizar estas propiedades.
Con todo esto en cuenta, para conseguir una distribucin equivalente a
la del ejemplo anterior del TableLayout, necesitaramos escribir un cdigo
como el siguiente:
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="3"
android:orientation="horizontal" >

<TextView android:text="Celda 1.1" />

<TextView android:text="Celda 1.2" />
<TextView android:text="Celda 1.3" /> 12
<TextView android:text="Celda 2.1" />
<TextView android:text="Celda 2.2" />
<TextView android:text="Celda 2.3" /> 16
<TextView android:text="Celda 3.1"

android:layout_columnSpan="2" />
<TextView android:text="Celda 3.2" />
</GridLayout>

Instructora: Zulma Anglica Argello Matas Pgina 8

 Manual de PROGRAMACION ANDROID E-learning

RelativeLayout
El ltimo tipo de layout que vamos a ver es el
RelativeLayout. Este layout permite especificar la posicin
de cada elemento de forma relativa a su elemento padre o
a cualquier otro elemento incluido en el propio layout. De
esta forma, al incluir un nuevo elemento X podremos
indicar por ejemplo que debe
colocarse debajo del elemento Y yalineado a la derecha del
layout padre. Veamos esto en el ejemplo siguiente:

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" /> 10
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/TxtNombre"
android:layout_alignParentRight="true" />
</RelativeLayout>
En el ejemplo, el botn BtnAceptar se colocar debajo del cuadro de
texto TxtNombre(android:layout_below=@id/TxtNombre) y alineado
a la derecha del layout padre (android:layout_alignParentRight=true),
Quedara algo as:

Instructora: Zulma Anglica Argello Matas Pgina 9

 Manual de PROGRAMACION ANDROID E-learning

Al igual que estas tres propiedades, en un RelativeLayout tendremos

un sinfn de propiedades para colocar cada control justo donde
queramos. Veamos las principales [creo que sus propios nombres
explican perfectamente la funcin de cada una]:
Posicin relativa a otro control:

android:layout_above

android:layout_below

android:layout_toLeftOf

android:layout_toRightOf

android:layout_alignLeft

android:layout_alignRight

android:layout_alignTop

android:layout_alignBottom
android:layout_alignBaseline
Posicin relativa al layout padre:

android:layout_alignParentLeft

android:layout_alignParentRight

android:layout_alignParentTop

android:layout_alignParentBottom

android:layout_centerHorizontal

Instructora: Zulma Anglica Argello Matas Pgina 10

 Manual de PROGRAMACION ANDROID E-learning

android:layout_centerVertical

android:layout_centerInParent

Por ltimo indicar que cualquiera de los tipos de layout anteriores poseen
otras propiedades comunes como por ejemplo los mrgenes exteriores
(margin) e interiores (padding) que pueden establecerse mediante los
siguientes atributos:
Opciones de margen exterior:

android:layout_margin

android:layout_marginBottom

android:layout_marginTop

android:layout_marginLeft
android:layout_marginRight
Opciones de margen interior:
android:padding

android:paddingBottom

android:paddingTop

android:paddingLeft

android:paddingRight

Existen otros layouts algo ms sofisticados a los que dedicaremos

otros capitulos especficos un poco ms adelante, como por ejemplo
el DrawerLayout para aadir mens laterales deslizantes.
Tambin en prximos capitulos veremos otros elementos comunes que
extienden a ViewGroup, como por ejemplo las vistas de tipo lista
(ListView), de tipo grid (GridView), y las pestaas o tabs
(TabHost/TabWidget).

Instructora: Zulma Anglica Argello Matas Pgina 11

 Manual de PROGRAMACION ANDROID E-learning

EJERCICIOS

1 FRAMELAYOUT

Paso 1. Ve a Android Studio y crea un nuevo

proyecto.
Denomnalo Frame Layouts y agrega una
nueva actividad bsica
llamada ActividadPrincipal.
Crearemos un diseo con tres views dentro de
un frame layout, habr un texto en la seccin
cntrica izquierda detodo el layout. Tambin
unboton centrado en ambas dimensiones para simular el ingreso a la
aplicacion y un botn alineado en la parte inferior que cerrara la ventana.
Todos ellos estarn superpuestos para generar el mensaje.

Paso 2. Abre el archivo src/res/layout/actividad_principal.xml y

copia el siguiente diseo:

<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=".ActividadPrincipal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Click aqui"
android:id="@+id/textView5"
android:layout_gravity="left|center_vertical"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ACEPTAR"

Instructora: Zulma Anglica Argello Matas Pgina 12

 Manual de PROGRAMACION ANDROID E-learning

android:id="@+id/button"
android:layout_gravity="center" />

<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Saltar"
android:id="@+id/boton_saltar"
android:layout_gravity="center_horizontal|bottom"/>

</FrameLayout>

Luego de ello refactoriza el nombre del layout

a ejemplo_frame_layout.xml. Para ello presiona click derecho en
archivo, en seguida ve a Refactor > Rename y cambia el nombre.
Tambin puedes hacerlo empleando la combinacin SHIFT+F6.

Paso 3. Corre la aplicacin Android para ver el siguiente resultado.

Instructora: Zulma Anglica Argello Matas Pgina 13

 Manual de PROGRAMACION ANDROID E-learning

2 LINEARLAYOUT

Al igual que el FrameLayout, el LinearLayout permite

asignar una gravedad a cada componente segn el espacio
que ocupa.

Adicionalmente existe un parmetro

llamado android:layout_weight, el cual define la
importancia que tiene un view dentro del linear layout. A
mayor importancia, ms espacio podr ocupar.

La anterior ilustracin muestra tres views con pesos de 1, 2 y 3

respectivamente. Es evidente que la magnitud de sus alturas
corresponde a su preponderancia. Matemticamente, el espacio
disponible total sera la suma de las alturas (6), por lo que 3 representa
el 50%, 2 el 33,33% y 1 el 16,66%.

Instructora: Zulma Anglica Argello Matas Pgina 14

 Manual de PROGRAMACION ANDROID E-learning

Aunque esto podemos deducirlo por compresin, es posible definir la

suma total del espacio con el atributo android:weightSum. Dependiendo
de este valor, los weights sern ajustados.

android:weightSum="6"

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"

Si no lo haces, el relleno del espacio se definir por las alturas que t

hayas definido, lo que tal vez no complete el espacio total.

Vayamos a la prctica

Paso 1. Ve a res/layout y crea un nuevo archivo

llamado ejemplo_linear_layout.xml y agrega el siguiente cdigo.
Crearemos un diseo de login, donde se muestren campos para digitar
el usuario y el password. Adems se incorporar un botn de
confirmacin y un mensaje que pregunte por el olvido de la contrasea.
Todos estarn alineados verticalmente sobre un linear layout.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"

Instructora: Zulma Anglica Argello Matas Pgina 15

 Manual de PROGRAMACION ANDROID E-learning

android:layout_weight="1"
android:text="Conectar"
android:textAppearance="?android:attr/textAppearanceLarge" />

<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="Contrasea"
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 constrasea?"

Instructora: Zulma Anglica Argello Matas Pgina 16

 Manual de PROGRAMACION ANDROID E-learning

android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0E8AEE" />
</LinearLayout>

Paso 2. Modifica el archivo ActividadPrincipal.java cambiando el

layout que existe dentro del
mtodo setContentView() por R.layout.ejemplo_linear_layout.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.ejemplo_frame_layout);
}

Paso 3. Corre la aplicacin y obtn el siguiente resultado.

Instructora: Zulma Anglica Argello Matas Pgina 17

 Manual de PROGRAMACION ANDROID E-learning

3 RELATIVELAYOUT

Veamos algunos de los parmetros del

RelativeLayout para definir posiciones:
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.

Ahora pasamos a la prctica

Paso 1. Crea otro layout dentro
de res/layout llamado ejemplo_relative_layout.xml.

Esta vez crearemos un pequeo formulario con cuatro campos de una

persona. Se usar un edit text para los nombres y otro para los apellidos.
Por debajo tendremos dos edit text que permitirn escribir el estado civil
y el cargo actual. Todos van alineados dentro de un relative layout

Implementa la siguiente definicin:

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

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/activity_horizontal_margin">

<EditText
android:id="@+id/input_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"

Instructora: Zulma Anglica Argello Matas Pgina 18

 Manual de PROGRAMACION ANDROID E-learning

android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:ems="10"
android:hint="Nombres"
android:inputType="textPersonName" />
<EditText
android:id="@+id/input_apellido"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/input_nombre"
android:ems="10"
android:hint="Apellidos"
android:inputType="textPersonName" />
<TextView
android:id="@+id/texto_estado_civil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/input_apellido"
android:layout_marginRight="48dp"
android:paddingBottom="8dp"
android:paddingTop="16dp"
android:text="Estado civil"
android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
android:id="@+id/input_estado"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/texto_estado_civil"
android:ems="5"
android:hint="S...."
android:inputType="textPersonName" />
<TextView
android:id="@+id/texto_cargo"

Instructora: Zulma Anglica Argello Matas Pgina 19

 Manual de PROGRAMACION ANDROID E-learning

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/input_apellido"
android:layout_centerHorizontal="true"
android:layout_toRightOf="@+id/texto_estado_civil"
android:paddingBottom="8dp"
android:paddingTop="16dp"
android:text="Cargo"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/input_cargo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/texto_cargo"
android:ems="5"
android:hint="E...."
android:inputType="textPersonName" />
</RelativeLayout>

Paso 2. Cambia el parmetro

de setContentView() por R.layout.ejemplo_relative_layout.
Paso 3. Visualiza el resultado.

Instructora: Zulma Anglica Argello Matas Pgina 20

 Manual de PROGRAMACION ANDROID E-learning

4 GRIDLAYOUT

Paso 1. Sigue la secuencia y crea un layout nuevo

llamado ejemplo_grid_layout.xml. Esta vez
disearemos el teclado de una
calculadora simple.

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

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alignmentMode="alignBounds"
android:columnCount="4"
android:rowCount="4">
<TextView
android:id="@+id/numero_7"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_column="0"
android:layout_row="0"
android:text="7" />
<TextView
android:id="@+id/numero_8"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:text="8" />
<TextView
android:id="@+id/numero_9"
style="@style/AppTheme.BotonCalculadora.Azul"

android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="0"
android:text="9" />
<TextView
android:id="@+id/numero_4"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:text="4" />

Instructora: Zulma Anglica Argello Matas Pgina 21

 Manual de PROGRAMACION ANDROID E-learning

<TextView
android:id="@+id/numero_5"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:text="5" />
<TextView
android:id="@+id/numero_6"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="1"
android:text="6" />
<TextView
android:id="@+id/signo_por"
style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_column="3"
android:layout_gravity="fill"
android:layout_row="1"
android:gravity="center"

android:text="" />

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

Instructora: Zulma Anglica Argello Matas Pgina 22

 Manual de PROGRAMACION ANDROID E-learning

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

android:layout_gravity="fill_horizontal"

android:layout_row="2"
android:gravity="center"
android:text="-" />
<TextView
android:id="@+id/punto"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_column="0"
android:layout_gravity="fill_horizontal"
android:layout_row="3"
android:gravity="center_horizontal"
android:text="." />
<TextView
android:id="@+id/cero"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_column="1"
android:layout_row="3"
android:text="0" />
<TextView
android:id="@+id/signo_igual"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_column="2"
android:layout_gravity="fill_horizontal"
android:layout_row="3"
android:text="=" />
<TextView
android:id="@+id/signo_mas"
style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_column="3"
android:layout_gravity="fill_horizontal"
android:layout_row="3"

Instructora: Zulma Anglica Argello Matas Pgina 23

 Manual de PROGRAMACION ANDROID E-learning

android:text="+" />
</GridLayout>

Paso 2. Modifica tu archivo de estilos res/values/styles.xml con las siguientes

caractersticas para los botones de la calculadora. Sern dos tipos de botones, aquellos que
representen los nmeros con fondo azul y los que muestren los signos de operacin
aritmtica de color rojo.

<style name="AppTheme.BotonCalculadora" parent="TextAppearance.AppCompat.Headline">

<item name="android:textColor">@android:color/white</item>
<item name="android:gravity">center</item>
<item name="android:padding">36dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="AppTheme.BotonCalculadora.Azul" parent="AppTheme.BotonCalculadora">
<item name="android:background">#00537D</item>
</style>
<style name="AppTheme.BotonCalculadora.Rojo" parent="AppTheme.BotonCalculadora">
<item name="android:background">#EA4D39</item>
</style>

Paso 3. Ahora reemplaza el recurso dentro de setContentView() para inflar el layout

conR.layout.ejemplo_grid_layout.
Paso 4. Finalmente corre de nuevo el proyecto para ver los efectos.

Instructora: Zulma Anglica Argello Matas Pgina 24

 Manual de PROGRAMACION ANDROID E-learning

5 TABLELAYOUT

Como ya te lo imaginars, el TableLayout organiza

views en filas y columnas de forma tabular.

Aqu 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 tamao
del padre.
android:stretchColumns: Permite rellenar el espacio vaco que queda en
el TableLayout, expandiendo la columna seleccionada.
A continuacin crearemos una prueba.

Paso 1. Crea un nuevo archivo dentro de res/layout con el nombre de

ejemplo_table_layout.xml. Esta vez vers el diseo de una factura en
forma de tabla. Habr una columna para los productos y otra para
representar el subtotal.
Al final de los tems pondremos una lnea divisoria y por debajo
calcularemos la cuenta total.

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/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" />

Instructora: Zulma Anglica Argello Matas Pgina 25

 Manual de PROGRAMACION ANDROID E-learning

<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="Jabn de manos x 1" />
<TextView
android:layout_column="2"
android:gravity="left"
android:padding="3dip"
android:text="3.000 Gs" />
</TableRow>
<TableRow>
<TextView
android:layout_column="0"
android:padding="3dip"
android:text="Shampoo Monster x 1" />
<TextView
android:layout_column="2"
android:gravity="left"
android:padding="3dip"
android:text="15.000 Gs" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="3dip"
android:text="Crema dental x 2" />

Instructora: Zulma Anglica Argello Matas Pgina 26

 Manual de PROGRAMACION ANDROID E-learning

<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.000 Gs" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="3dip"
android:text="Detergente Limpiabien x 1" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:gravity="left"
android:padding="3dip"
android:text="3.000 Gs" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:layout_column="1"
android:padding="3dip"
android:text="Subtotal"
android:textColor="#128675" />

Instructora: Zulma Anglica Argello Matas Pgina 27

 Manual de PROGRAMACION ANDROID E-learning

<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="39.000 Gs" />
</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 envo"
android:textColor="#128675" />
<TextView
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.000 Gs" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"

Instructora: Zulma Anglica Argello Matas Pgina 28

 Manual de PROGRAMACION ANDROID E-learning

android:padding="3dip"
android:text="I.V.A."
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="3.900 Gs" />
</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"
android:text="Total"
android:textColor="#128675" />
<TextView
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="$48,4" />
</TableRow>
</TableLayout>

Instructora: Zulma Anglica Argello Matas Pgina 29

 Manual de PROGRAMACION ANDROID E-learning

Paso 2. Ve al archivo ActividadPrincipal.java y cambia el parmetro

de setContentView()con la referencia R.layout.ejemplo_table_layout.

Paso 3. Ejecuta el proyecto para visualizar la siguiente impresin.

En el atributo android:stretchColumns del TableLayout usamos la
columna 2 (indice 1) para rellenar el espacio horizontal restante
ampliando el ancho de dicha columna.

Instructora: Zulma Anglica Argello Matas Pgina 30