Carta

CONTROLES BÁSICOS
El SDK de Android nos proporciona tres tipos de botones: los clásicos de texto (Button), los
que pueden contener una imagen (ImageButton), y los de tipo on/off
(ToggleButton y Switch).
Control Button [API]

Un control de tipo Button es el botón más básico que podemos utilizar y normalmente
contiene un simple texto. En el ejemplo siguiente definimos un botón con el texto «Click»
asignando su propiedad android:text. Además de esta propiedad podríamos utilizar muchas
otras como el color de fondo (android:background), estilo de fuente (android:typeface),
color de fuente (android:textcolor), tamaño de fuente (android:textSize), etc.
1 <Button android:id="@+id/BtnBotonSimple"
android:text="@string/click"
2
android:layout_width="wrap_content"
3 android:layout_height="wrap_content" />
4
Este botón quedaría como se muestra en la siguiente imagen:
Control ToggleButton [API]

Un control de tipo ToggleButton es un tipo de botón que puede permanecer en dos posibles
estados, pulsado o no_pulsado. En este caso, en vez de definir un sólo texto para el control
definiremos dos, dependiendo de su estado. Así, podremos asignar las
propiedades android:textOn y android:textoOff para definir ambos textos. Veamos un
ejemplo a continuación.
1 <ToggleButton android:id="@+id/BtnToggle"
android:textOn="@string/on"
2
android:textOff="@string/off"
3 android:layout_width="wrap_content"
5
El botón se mostraría de alguna de las dos formas siguientes, dependiendo de su estado:

Control Switch [API]
Un control Switch es muy similar al ToggleButton anterior, donde tan sólo cambia su
aspecto visual, que en vez de mostrar un estado u otro sobre el mismo espacio, se muestra
en forma de deslizador o interruptor. Su uso sería completamente análogo al ya comentado:
1 <Switch android:id="@+id/BtnSwitch"
2
5
Y su aspecto sería el siguiente:
Control ImageButton [API]

En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un
texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos
esta propiedad con el descriptor de algún recurso que hayamos incluido en las
carpetas /res/drawable. Así, por ejemplo, en nuestro caso vamos a incluir una imagen
llamada «ic_estrella.png» por lo que haremos referencia al recurso
«@drawable/ic_estrella«. Adicionalmente, al tratarse de un control de tipo imagen
también deberíamos acostumbrarnos a asignar la
propiedad android:contentDescription con una descripción textual de la imagen, de forma
que nuestra aplicación sea lo más accesible posible.
1 <ImageButton android:id="@+id/BtnImagen"
2
android:layout_height="wrap_content"
3 android:contentDescription="@string/icono_ok"
4 android:src="@drawable/ic_estrella" />
5
En una aplicación el botón anterior se mostraría de la siguiente forma:

Añadir imágenes a un proyecto de Android Studio
Android Studio incorpora una utilidad llamada Asset Studio con la que podemos añadir
rápidamente a un proyecto algunas imágenes o iconos estandar de entre una lista bastante
amplia de muestras disponibles, o utilizar nuestras propias imágenes personalizadas.
Podemos acceder a esta utilidad haciendo por ejemplo click derecho sobre la
carpeta /main/res del proyecto y seleccionando la opción New / Image Asset:
Esto nos da acceso a Asset Studio, donde podremos indicar el tipo de imagen a añadir (icono
de lanzador, icono de action bar, icono de notificación, …), el origen de la imagen
(Image = Fichero externo, Clipart = Colección de iconos estandar, Text = Texto
personalizado), el tema de nuestra aplicación (lo que afectará al color de fondo y primer
plano de los iconos seleccionados), y el nombre del recurso a incluir en el proyecto.
Así, en nuestro caso de ejemplo, seleccioné «Clipart» como origen de la imagen, seleccioné
el icono de estrella mediante el botón «Choose», e indiqué el nombre «ic_estrella»:
Al pulsar el botón Next el sistema consulta en qué módulo del proyecto y en qué carpeta de
recursos del módulo colocará los recursos creados para el icono. Además, como podemos
ver en la siguiente imagen Asset Studio se encarga de crear el icono para las distintas
densidades de pixeles y colocarlo en su carpeta de recursos correspondiente.
Cabe decir además, que aunque existe este tipo específico de botón para imágenes,
también es posible añadir una imagen a un botón normal de tipo Button, a modo de
elemento suplementario al texto (compound drawable). Por ejemplo, si quisiéramos añadir
un icono a la izquierda del texto de un botón utilizaríamos la
propiedad android:drawableLeft indicando como valor el descriptor (ID) de la imagen que
queremos mostrar, y si fuera necesario podríamos indicar también el espacio entre la
imagen y el texto mediante la propiedad android:drawablePadding:
1 <Button android:id="@+id/BtnBotonMasImagen"
android:text="@string/click"
2 android:drawableLeft="@drawable/ic_estrella"
3 android:drawablePadding="5dp"
6
El botón mostrado en este caso sería similar a éste:

Eventos de un botón
Como podéis imaginar, aunque estos controles pueden lanzar muchos otros eventos, el más
común de todos ellos y el que querremos capturar en la mayoría de las ocasiones es el
evento onClick, que se lanza cada vez que el usuario pulsa el botón. Para definir la lógica de
este evento tendremos que implementarla definiendo un nuevo
objeto View.OnClickListener() y asociándolo al botón mediante el
método setOnClickListener(). La forma más habitual de hacer esto es la siguiente:
1 btnBotonSimple = (Button)findViewById(R.id.BtnBotonSimple);
2
btnBotonSimple.setOnClickListener(new View.OnClickListener() {
3
public void onClick(View arg0)
4 {
5 lblMensaje.setText("Botón Simple pulsado!");
6 }
7 });
8
En el caso de un botón de tipo ToggleButton o Switch suele ser de utilidad conocer en qué
estado ha quedado el botón tras ser pulsado, para lo que podemos utilizar su
método isChecked(). En el siguiente ejemplo se comprueba el estado del botón tras ser
pulsado y se realizan acciones distintas según el resultado.
1 btnToggle = (ToggleButton)findViewById(R.id.BtnToggle);
2
btnToggle.setOnClickListener(new View.OnClickListener() {
3
public void onClick(View arg0)
4 {
5 if(btnToggle.isChecked())
6 lblMensaje.setText("Botón Toggle: ON");
7 else
lblMensaje.setText("Botón Toggle: OFF");
8 }
9 });
10
11
Personalizar el aspecto un botón (y otros controles).

En las imágenes mostradas durante este apartado hemos visto el aspecto que presentan
por defecto los diferentes tipos de botones disponibles. Pero, ¿y si quisiéramos personalizar
su aspecto más allá de cambiar un poco el tipo o el color de la letra o el fondo?
Para cambiar la forma de un botón podríamos simplemente asignar una imagen a la
propiedad android:background, pero esta solución no nos serviría de mucho porque
siempre se mostraría la misma imagen incluso con el botón pulsado, dando poca sensación
de elemento “clickable“.
La solución perfecta pasaría por tanto por definir diferentes imágenes de fondo
dependiendo del estado del botón. Pues bien, Android nos da total libertad para hacer esto
mediante el uso de selectores. Un selector se define mediante un fichero XML localizado en
la carpeta /res/drawable, y en él se pueden establecer los diferentes valores de una
propiedad determinada de un control dependiendo de su estado.
Por ejemplo, si quisiéramos dar un aspecto diferente a nuestro botón ToggleButton, para
que sea de color azul y con esquinas redondeadas, podríamos diseñar las imágenes
necesarias para los estados “pulsado” (en el ejemplo toggle_on.9.png) y “no pulsado” (en
el ejemplo toggle_off.9.png) y crear un selector como el siguiente:
1 <selector
xmlns:android="http://schemas.android.com/apk/res/android">
2 <item android:state_checked="false"
3 android:drawable="@drawable/toggle_off" />
4 <item android:state_checked="true"
android:drawable="@drawable/toggle_on" />
</selector>
En el código anterior vemos cómo se asigna a cada posible estado del botón una imagen
(un elemento drawable) determinada. Así, por ejemplo, para el estado “pulsado”
(state_checked=”true”) se asigna la imagen toggle_on.
Este selector lo guardamos por ejemplo en un fichero llamado toggle_style.xml y lo

colocamos como un recurso más en nuestra carpeta de recursos /res/drawable. Hecho esto,
tan sólo bastaría hacer referencia a este nuevo recurso que hemos creado en la
propiedad android:background del botón:
1 <ToggleButton android:id="@+id/BtnPersonalizado"
2
4 android:layout_height="wrap_content"
5 android:background="@drawable/toggle_style" />
6
En la siguiente imagen vemos el aspecto por defecto de

nuestro ToggleButton personalizado con los cambios indicados:
Botones sin borde
Otra forma de personalizar los controles en Android es utilizando estilos. Los estilos
merecen un capítulo a parte, pero comentaremos aquí algunos muy utilizados en las últimas
versiones de Android, concretamente en el tema que nos ocupa de los botones.
En determinadas ocasiones, como por ejemplo cuando se utilizan botones dentro de otros
elementos como listas o tablas, es interesante contar con todas la funcionalidad de un
botón pero prescindiendo sus bordes de forma que adquiera un aspecto plano y se intergre
mejor con el diseño de la interfaz. Para ello, podemos utilizar el
estilo borderlessButtonStyle como estilo del botón (propiedad style), de forma
que éste se mostrará sin bordes pero conservará otros detalles como el cambio de
apariencia al ser pulsado. Veamos cómo se definiría por ejemplo un ImageButton sin
borde:
1 <ImageButton android:id="@+id/BtnSinBorde"
2
3 android:contentDescription="@string/icono_ok"
4 android:src="@drawable/ic_estrella"
5 style="?android:borderlessButtonStyle"/>
6
En la siguiente imagen vemos cómo quedaría este botón integrado dentro de
un LinearLayout y alineado a la derecha:
El separador vertical que se muestra entre el texto y el botón se consigue utilizando las
propiedades showDividers, divider, y dividerPadding del layout contenedor
(para mayor claridad puede consultarse el código completo):
1 <LinearLayout
android:id="@+id/BarraBtnSinBorde"
2
android:layout_width="match_parent"
4 android:orientation="horizontal"
5 android:showDividers="middle"
6 android:divider="?android:dividerVertical"
android:dividerPadding="6dp" >
7
8
Otro lugar muy habitual donde encontrar botones sin borde es en las llamadas barras de
botones (button bar) que muestran muchas aplicaciones. Para definir una barra de botones,
utilizaremos normalmente como contenedor un LinearLayout horizontal e
incluiremos dentro de éste los botones (Button) necesarios, asignando a cada
elelemento su estilo correspondiente, en este caso buttonBarStyle para el
contenedor, y buttonBarButtonStyle para los botones. En nuetro ejemplo
crearemos una barra con dos botones, Aceptar y Cancelar, que quedaría así:
1 <LinearLayout
android:id="@+id/BarraBotones"
2
4 android:orientation="horizontal"
5 android:layout_alignParentBottom="true"
6 style="?android:attr/buttonBarStyle">
7
<Button android:id="@+id/BtnAceptar"
10 android:layout_weight="1"
11 android:text="@string/Aceptar"
12 style="?android:attr/buttonBarButtonStyle" />
13
<Button android:id="@+id/BtnCancelar"
16 android:layout_weight="1"
17 android:text="@string/Cancelar"
style="?android:attr/buttonBarButtonStyle" />
18
19 </LinearLayout>
20
21
22
23
Visualmente el resultado sería el siguiente:
Botones flotantes (Floating Action Button / FAB)

Un nuevo «tipo de botón» aparecido a raiz de la nueva filosofía de diseño Android
llamada Material Design. Me refiero a los botones de acción flotantes que están
incorporando muchas aplicaciones, sobre todo tras su actualización a Android 5 Lollipop.
Con la reciente publicación por parte de Google de la librería Design Support Library, añadir
este tipo de botones a nuestras aplicaciones es algo de lo más sencillo, y además
aseguramos su compatibilidad no sólo con Android 5.x sino también con versiones
anteriores. En esta librería se incluye un nuevo componente
llamado FloatingActionButton con la funcionalidad y aspecto deseados.
Lo primero que tendremos que hacer para utilizarlo será añadir la librería indicada a nuestro
proyecto.
Añadir librerías externas a un proyecto de Android Studio

Para hacer uso de una librería externa en un proyecto de Android Studio tenemos dos
posibilidades: añadir el fichero jar de la librería a la carpeta /libs del módulo, o bien añadir
la referencia a la librería (si está disponible) como dependencia en el fichero build.gradle del
módulo (en la mayoría de ocasiones usaremos esta segunda opción). En este caso,
añadiremos a nuestro fichero build.gradle la siguiente línea en el
apartado dependencies:
dependencies {
…
compile ‘com.android.support:design:22.2.0’
}
Una vez añadida la referencia a la librería, salvamos el fichero y nos aseguramos de pulsar
la opción «Sync Now» que nos aparecerá en la parte superior derecha del editor de
código:
Tras esto, Android Studio se encargará de descargar automáticamente los ficheros

necesarios y cuando sea necesario para que podamos hacer uso de la librería.
Una vez añadida la librería al proyecto como se describe en la nota anterior, podremos
añadir un botón flotante a nuestra interfaz añadiendo un nuevo elemento a nuestro layout
principal activity_main.xml de la siguiente forma:
1 <android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
2
4 android:src="@drawable/ic_add"
5 app:fabSize="normal"
6 app:borderWidth="0dp" />
7
La propiedad más relevante, al igual que en el caso de un ImageButton, es android:src, con

la que podemos asignar al control la imagen/icono a mostrar. En mi caso de ejemplo he
utilizado un nuevo icono (ic_add) añadido al proyecto de la misma forma que explicamos al
principio del artículo.
Vemos también la propiedad app:fabSize. Esta propiedad puede recibir los valores
«normal» y «mini«, que determinan el tamaño del control dentro de los dos tamaños
estandar definidos en las especificaciones de Material Design.
La última propiedad asignada, app:borderWidth=»0dp», es necesaria temporalmente (en el

momento de actualizar este artículo la versión actual de la librería es la 22.2) para evitar
que el botón flotante aparezca sin sombra o con aspecto no estandar en algunas versiones
de Android (por ejemplo APIs 16 o 22). Previsiblemente, este error lo corregirán en la
siguiente versión de la librería, por lo que puede que en un futuro muy próximo ya no sea
necesario asignar esta propiedad.
¿Y como seleccionamos el color del botón? Pues bien, si no indicamos nada, el botón
flotante tomará por defecto el accent color si lo hemos definido en el tema de la
aplicación (más información en el artículo sobre la Action Bar) o el color de selección actual.
Si queremos utilizar otro color debemos hacerlo desde el código java de la aplicación, por
ejemplo en el onCreate() de la actividad principal, llamando al
método setBackgroundTintList() del control FloatingActionButton.
1 fabButton = (FloatingActionButton)findViewById(R.id.fab);
2
fabButton.setBackgroundTintList(
3
getResources().getColorStateList(R.color.fab_color));
4
Como parámetro debemos pasarle un objeto de tipo ColorStateList, que no es más que un
selector de color (similar al selector que creamos antes para el ToggleButon personalizado)
que crearemos en la carpeta /res/color por ejemplo con el nombre fab_color.xml y que
recuperaremos en nuestro código mediante el método getResources().
getColorStateList().
1 <selector
xmlns:android="http://schemas.android.com/apk/res/android">
2
<item android:state_pressed="true" android:color="#B90000" />
3 <item android:color="#FF0000"/>
4 </selector>
Como podemos ver, en el selector hemos definido el color normal del botón y su color
cuando está pulsado.
Para terminar, en la imagen siguiente se muestra la aplicación de ejemplo completa, donde
se puede comprobar el aspecto de cada uno de los tipos de botón comentados:
Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este
artículo accediendo a la pagina del curso en GitHub.
Controles RadioGroup y RadioButton
Es practicar la implementación de un programa que requiera controles de tipo RadioButton para

seleccionar una actividad. Aprenderemos como agrupar un conjunto de RadioButton y verificar cual
está seleccionado.
Problema:
Realizar la carga de dos números en controles de tipo EditText. Mostrar un mensaje que solicite la
carga de los valores. Disponer dos controles de tipo RadioButton para seleccionar si queremos
sumar o restar dichos valores. Finalmente, mediante un control de tipo Button efectuamos la
operación respectiva. Mostramos el resultado en un TextView.
El problema es similar al anterior. Para disponer los controles de tipo RadioButton debemos en
realidad primero insertar un control de tipo RadioGroup (este control se encuentra en la paleta de
componentes en la pestaña Form Widgets):
Cuando arrastramos el control RadioGroup al formulario se generan automáticamente 3
objetos de la clase RadioButton contenidos dentro del RadioGroup, podemos fácilmente
identificar que los controles RadioButton pertenecen a dicho RadioGroup viendo la ventana
de "Outline" del Eclipse (donde nos muestra todos los controles insertados hasta el
momento):
Nuestro problema solo requiere dos controles de tipo RadioButton. Para borrarlo lo
podemos hacer directamente del formulario seleccionándolo y presionando la tecla delete
o seleccionándolo desde la ventana "Outline" y luego presionando la tecla delete.
Ahora a los dos controles de tipo RadioButton definimos sus id (los llamaremos r1 y r2
respectivamente) Cambiamos sus propiedades text por los textos "sumar" y "restar".
No olvidemos también cambiar los id de los controles EditText por et1 y et2 (igual que en el
problema anterior) por último agreguemos un botón y un TextView para mostrar el
resultado Inicializamos las propiedades del botón con los valores:
id : button1
text : operar
Y el tercer TextView con los valores:
id : tv3
text : resultado
Podemos controlar en la ventana "Outline" el id definido para cada control (tv1, et1, tv2,
et2, radioGroup1, r1, r2, button1, tv3) También podemos observar de que clase es cada
control visual y el texto de la propiedad text para aquellos controles que tienen sentido su
inicialización.
Si nuestro problema requería más de 3 RadioButton deberíamos arrastrar dentro del
RadioGroup otros controles de tipo RadioButton que se encuentran también en la pestaña
de "Form Widgets"
Captura del evento clic del button e identifiación del RadioButton seleccionado.
El código fuente de la clase MaintActivity es:
package com.javaya.proyecto003;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.TextView;
public class MainActivity extends Activity {
private EditText et1,et2;

private TextView tv3;
private RadioButton r1,r2;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
tv3=(TextView)findViewById(R.id.tv3);
r1=(RadioButton)findViewById(R.id.r1);
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to
the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main,
menu);
return true;
}
//Este método se ejecutará cuando se presione

el botón
public void operar(View view) {
String valor1=et1.getText().toString();
int nro1=Integer.parseInt(valor1);
if (r1.isChecked()==true) {
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
} else
int resta=nro1-nro2;
String resu=String.valueOf(resta);
tv3.setText(resu);
}
}
Primero debemos enlazar el objeto button1 con el método operar. Para esto similar al
problema anterior seleccionamos el control button1 y cambiamos la propiedad OnClick por
el valor operar (si no hacemos esto nunca se ejecutará el método operar de la clase
MainActivity) Como podemos ver el código fuente es igual al problema anterior. Tenemos
dos objetos más que debemos inicializar en el método onCreate:
Las variables r1 y r2 son de la clase RadioButton y son necesarios en el método operar para
verificar cual de los dos RadioButton están seleccionados. La clase RadioButton tiene un
método llamado isChecked que retorna true si dicho elemento está seleccionado:

int suma=nro1+nro2;
tv3.setText(resu);
} else
tv3.setText(resu);
}
}
Control CheckBox
Realizar la carga de dos números en controles de tipo EditText. Mostrar un mensaje que
solicite la carga de los valores. Disponer dos controles de tipo CheckBox para seleccionar si
queremos sumar y/o restar dichos valores. Finalmente mediante un control de tipo Button
efectuamos la operación respectiva. Mostramos el o los resultados en un TextView.
Lo nuevo en este problema es la inserción de dos objetos de la clase CheckBox que se
encuentra en la pestaña "Form Widgets":
Luego la interfaz gráfica final para este problema y los nombres de los controles los
podemos ver en la ventana "Outline":
No olvidemos inicializar la propiedad OnClick del objeto button1 con el valor "operar" (es el
nombre del método a ejecutarse cuando se presione el botón y lo implementa la clase que
hacemos)
Código fuente:
package com.androiya.proyecto004;
import android.widget.CheckBox;

private CheckBox checkBox1,checkBox2;
@Override
checkBox1=(CheckBox)findViewById(R.id.checkBox1);
}
@Override
{
menu);
return true;
}

el botón
String resu="";
if (checkBox1.isChecked()==true) {
int suma=nro1+nro2;
resu="La suma es: "+ suma;
}
resu=resu + " La resta es: "+ resta;
}
tv3.setText(resu);
}
Definimos dos objetos de la clase CheckBox como atributos de la clase:

private CheckBox checkBox1,checkBox2;
En el método onCreate los inicializamos con los objetos definidos en el archivo XML:
En el método operar debemos definir dos if a la misma altura ya que los dos controles de
tipo CheckBox pueden estar seleccionados simultaneamente. Definimos una variable de
tipo String y la inicializamos con cadena vacía para el caso en que los dos CheckBox no estén
seleccionados:
String resu="";
int suma=nro1+nro2;
resu="La suma es: "+ suma;
}
resu=resu + " La resta es: "+ resta;
}
tv3.setText(resu);
Control Spinner
El objetivo de este concepto es practicar lo visto hasta ahora e incorporar el control visual
Spinner.
El control Spinner muestra una lista de String y nos permite seleccionar uno de ellos. Cuando
se lo selecciona se abre y muestra todos sus elementos para permitir seleccionar uno de
ellos.
Lo nuevo en este problema es la inserción de un control de tipo Spinner que se encuentra
en la pestaña "Form Widgets":
Definimos la propiedad id con el valor spinner1 (valor por defecto).
En la siguiente imagen en la ventana "Outline" de Eclipse podemos observar los objetos
dispuestos en el formulario, sus Id, sus textos y de que clase son cada uno:
No olvidemos inicializar la propiedad OnClick del objeto button1 con el valor "operar"
(dicho nombre es el método que debemos implementar)
Código fuente:
import android.widget.ArrayAdapter;
import android.widget.Spinner;

private Spinner spinner1;
@Override
spinner1 = (Spinner)
findViewById(R.id.spinner1);
String
[]opciones={"sumar","restar","multiplicar","dividi
r"};
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_
spinner_item, opciones);
spinner1.setAdapter(adapter); }
@Override
{
menu);
return true;
}

el botón
String
selec=spinner1.getSelectedItem().toString();
if (selec.equals("sumar")) {
int suma=nro1+nro2;
tv3.setText(resu);
} else
if (selec.equals("restar")) {
tv3.setText(resu);
}
else
if (selec.equals("multiplicar")) {
int multi=nro1*nro2;
String
resu=String.valueOf(multi);
tv3.setText(resu);
}
else
if (selec.equals("dividir")) {
int divi=nro1/nro2;
String
resu=String.valueOf(divi);
tv3.setText(resu);
}
}
Definimos un objeto de la clase Spinner:

private Spinner spinner1;
En el método onCreate obtenemos la referencia al control visual declarado en el archivo
XML:
spinner1=(Spinner)findViewById(R.id.spinner1);
Definimos un vector con la lista de String que mostrará el Spinner:

String []opciones={"sumar","restar","multiplicar","dividir"};
Definimos y creamos un objeto de la clase ArrayAdapter:

ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,
opciones);
Al constructor le pasamos como primer parámetro la referencia de nuestro Activity (this),

el segundo parámetro indica el tipo de Spinner, pudiendo ser las constantes:
android.R.layout.simple_spinner_item
android.R.layout.simple_spinner_dropdown_item
El tercer parámetro es la referencia del vector que se mostrará:
Luego llamamos al método setAdapter de la clase Spinner pasando la referencia del objeto
de la clase ArrayAdapter que acabamos de crear:
spinner1.setAdapter(adapter);
En el método operar que se ejecuta cuando presionamos el botón procedemos a extraer

el contenido seleccionado del control Spinner:
String selec=spinner1.getSelectedItem().toString();
Luego mediante una serie de if anidados verificamos si debemos sumar, restar, multiplicar
o dividir:
if (selec.equals("sumar")) {
int suma=nro1+nro2;
tv3.setText(resu);
} else
if (selec.equals("restar")) {
tv3.setText(resu);
}
else
if (selec.equals("multiplicar")) {
int multi=nro1*nro2;
String resu=String.valueOf(multi);
tv3.setText(resu);
}
else
if (selec.equals("dividir")) {
int divi=nro1/nro2;
String resu=String.valueOf(divi);
tv3.setText(resu);
}
Control ListView
El control ListView a diferencia del Spinner que se cierra luego de seleccionar un elemento
permanecen visibles varios elementos (se lo utiliza cuando hay que mostrar muchos
elementos)
Si la lista no entra en el espacio que hemos fijado para el ListView nos permite hacer scroll
de los mismos.
El control ListView se encuentra en la pestaña "Compositive".
Problema:
Disponer un ListView con los nombres de paises de sudamérica. Cuando se seleccione un
país mostrar en un TextView la cantidad de habitantes del país seleccionado.
La interfaz visual a implementar es la siguiente (primero disponemos un TextView (llamado
tv1) y un ListView (llamado listView1)):
Código fuente:
import android.widget.AdapterView;
import
android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;

private String[] paises = { "Argentina",
"Chile", "Paraguay", "Bolivia",
"Peru", "Ecuador", "Brasil",
"Colombia", "Venezuela", "Uruguay" };
private String[] habitantes = { "40000000",
"17000000", "6500000",
"10000000", "30000000",
"14000000", "183000000", "44000000",
"29000000", "3500000" };
private ListView lv1;
@Override
lv1
=(ListView)findViewById(R.id.listView1);
ArrayAdapter <String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_
list_item_1, paises);
lv1.setAdapter(adapter);
lv1.setOnItemClickListener(new
OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?>
parent, View v, int posicion, long id) {
tv1.setText("Población de "+
lv1.getItemAtPosition(posicion) + " es "+
habitantes[posicion]);
}
});
}
@Override
{
getMenuInflater().inflate(R.menu.activity_mai
n, menu);
return true;
}
Primero definimos dos vectores paralelos donde almacenamos en uno los nombres de
paises y en el otro almacenamos la cantidad de habitantes de dichos paises:
private String[]
paises={"Argentina","Chile","Paraguay","Bolivia","Peru",
"Ecuador","Brasil","Colombia","Venezuela","Uruguay"};
private String[]
habitantes={"40000000","17000000","6500000","10000000","30000000",
"14000000","183000000","44000000","29000000","3500000"};
Definimos un objeto de tipo TextView y otro de tipo ListView donde almacenaremos las
referencias a los objetos que definimos en el archivo XML:
private ListView lv1;
En el método onCreate obtenemos la referencia a los dos objetos:
lv1 =(ListView)findViewById(R.id.listView1);
Creamos un objeto de la clase ArrayAdapter de forma similar a como lo hicimos cuando
vimos la clase Spinner:
ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, paises);
lv1.setAdapter(adapter);
Llamamos al método setOnItemClicListener de la clase ListView y le pasamos como
parámetro una clase anónima que implementa la interfaz OnItemClickListener (dicha
interfaz define el método onItemClick que se dispara cuando seleccionamos un elemento
del ListView):
lv1.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v, int
posicion, long id) {
tv1.setText("Población de "+
lv1.getItemAtPosition(posicion) + " es "+ habitantes[posicion]);
}
});
Dentro del método onItemClick modificamos el contenido del TextView con el nombre del
país y la cantidad de habitantes de dicho país. Este método recibe en el tercer parámetro la
posición del item seleccionado del ListView.
Cuando ejecutamos el proyecto podemos ver una interfaz en el emulador similar a esta:
Crear Layouts En Android Studio
Dentro de la estructura de un proyecto en Android Studio existe el directorio res para el
almacenamiento de recursos de la aplicación que se está desarrollando.
Las definiciones XML para los layouts se guardan dentro del subdirectorio layout.
Para crear un layout nuevo, solo presiona click derecho y ve a New > Layout resource file.
Normalmente cuando creas un nuevo proyecto en Android Studio con una actividad en
blanco, se genera automáticamente un layout. Algo como:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".ActividadPrincipal">
<TextView android:text="@string/hello_world"
android:layout_height="wrap_content" />
</RelativeLayout>
En este caso, tenemos un elemento raíz llamado RelativeLayout, el cual contiene un texto
con ciertas alineaciones establecidas.
Cada recurso del tipo layout debe ser un archivo XML, donde el elemento raíz solo puede
ser un ViewGroup o un View. Dentro de este elemento puedes incluir hijos que definan la
estructura del diseño.
Algunos de los view groups más populares son:
 LinearLayout
 FrameLayout
 RelativeLayout
 TableLayout
 GridLayout
Cargar layout XML En Android— Al tener definido tu recurso, ya es posible inflar su

contenido en la actividad. Para ello usa el método setContentView() dentro del
controlador onCreate().
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.actividad_principal);
}
Es necesario pasar la referencia del layout que existe dentro del archivo R.java. En el código
anterior, cargamos un layout llamado actividad_principal.xml.
Atributos De Un Layout
Todas las características de un ViewGroup o un View son representadas a través
de atributos que determinan algún aspecto.
Encontrarás atributos para el tamaño, la alineación, padding, bordes, backgrounds, etc.
Cada atributo XML descrito para un componente tiene una referencia en la clase Java que
lo representa. Esto quiere decir que al usar un elemento <TextView>, nos estamos
refiriendo a la clase TextView.
Identificador de un view— Existe un atributo que heredan todos los elementos llamado id.
Este representa un identificador único para cada elemento. Lo que permite obtener una
referencia de cada objeto de forma específica. La sintaxis para el id sería la siguiente:
android:id="@+id/nombre_identificador"
Donde el símbolo '@' indica al parser interno de XML, que comienza un nuevo identificador
para traducir. Y el símbolo '+' declara que dicho id no existe aún. Por ello se da la orden para
crear el identificador dentro del archivo R.java a partir del string que proporcionamos.
Obtener view en una actividad con findViewById()— Una vez definido un id para los views
que deseas manipular en el código, se usa el método findViewById() para obtener sus
instancias.
Un ejemplo sería obtener la referencia del TextView que Android Studio incluye dentro de
una nueva actividad en blanco. Supongamos que le asignamos un id referenciado con el
nombre “texto_hello_world”.
<TextView
android:id="@+id/texto_hello_world"
android:text="@string/hello_world" />
Y ahora desde nuestra actividad lo obtenemos:
TextView textoHelloWorld = (TextView)findViewById(R.id.texto_hello_world);
La estrategia es sencilla. Simplemente declaras un objeto del tipo que de view que buscas y
luego asignas el resultado que produce findViewById(). Este recibe como parámetro la
referencia que se creó dentro de R.java, la cual tiene el mismo nombre del string que
usamos.
Importante realizar el casting del view con el tipo deseado, que en el caso anterior
era TextView.
Cuando estés digitando y pongas el punto en R.id. , verás cómo Android Studio despliega
automáticamente todos los identificadores que existen hasta el momento.
Esta lista de acceso rápido filtrará los identificadores cuando escribas una palabra
semejante.
El gran número de identificadores extraños que aparecen, hacen parte de recursos
previamente definidos en nuestro proyecto que mantienen la compatibilidad de nuestra UI.
Por otro lado, también puedes referirte a identificadores propios del sistema, con la
clase android.R. A medida que vayas leyendo mis siguientes tutoriales de Desarrollo
Android, podrás ver algunos usos de estos identificadores.
Al correr la aplicación, el identificador quedará guardado en tu archivo R.java. Si abres y ves
su contenido, encontrarás el identificador dentro de la clase anidada id, con un valor entero
único asignado.
Parámetros De Un Layout
Los parámetros de un layout son atributos especiales que determinan como se relacionan
los hijos de un ViewGroup dependiendo de su posición y tamaño.
Estos se escriben de la forma layout_parametro para someter al view en cuestión.
Programáticamente se representan como una clase interna
llamada ViewGroup.LayoutParams.
Dependiendo de la jerarquía encontrada en el layout, así mismo se aplican los parámetros:
 La ilustración de ejemplo anterior, muestra un layout cuyo elemento raíz es un

Linear Layout. Sus tres hijos del nivel 1 deben ajustarse a los parámetros que este
les impone.
 Uno de los hijos es un Relative Layout, el cual tiene tres hijos. Como ves, cada
elemento del segundo nivel está sometido a los parámetros del relative layout.
 Dependiendo del ViewGroup, así mismo será la naturaleza de los parámetros. Pero
existen dos que son comunes independientemente del elemento. Estos
son layout_width y layout_height.
 Definir layout_widht y layout_height— Estos parámetros definen el ancho y la altura
respectivamente de un cualquier view.
 El gran meollo está en que valor usar para ambos. Es posible asignarles medidas
absolutas definidas en dps, sin embargo Google recomienda hacerlo cuando sea
estrictamente necesario, ya este tipo de medidas pueden afectar la UI en diferentes
tipos de pantalla.
 Como ayuda de diseño, se nos han proporcionado dos constantes que ajustan
automáticamente las dimensiones de un view.
 wrap_content: Ajusta el tamaño al espacio mínimo que requiere el view. En el siguiente
ejemplo se ve como un botón ajusta su ancho y alto, la cantidad necesaria para envolver el
texto interior.
 android:layout_width="wrap_content"
El resultado sería este:
 match_parent: Ajusta el tamaño a las dimensiones máximas que el padre le permita. La

siguiente ilustración muestra el mismo botón anterior, solo que asignado match_parent a su
parámetro layout_width.
 android:layout_width="match_parent"
El resultado:
Ejemplo De FrameLayout
Un FrameLayout es un view group creado para mostrar un solo elemento en pantalla.

Sin embargo puedes añadir varios hijos con el fin de superponerlos, donde el ultimo hijo
agregado, es el que se muestra en la parte superior y el resto se pone por debajo en forma
de pila.
Para alinear cada elemento dentro del FrameLayout usa el
parámetro android:layout_gravity.
El parámetro gravitiy se basa en las posiciones comunes de un view dentro del layout. Se
describe con constantes de orientación:
 top: Indica la parte superior del layout.
 left: Indica la parte izquierda del layout.
 right: Se refiere a la parte derecha del layout.
 bottom: Representa el límite inferior del layout.
 center_horizontal: Centro horizontal del layout.
 center_vertical: Alineación al centro vertical del layout.
 center: Es la combinación de center_horizontal y center_vertical.
Como se muestra en la ilustración, 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"
Veamos algo práctico.

Paso 1. Ve a Android Studio y crea un nuevo proyecto. Denomínalo “Crazy Layouts” y
agrega una nueva actividad en blanco llamada ActividadPrincipal.java.
Crearemos un diseño con tres views dentro de un frame layout. Habrá una imagen de fondo
que recubra todo el layout. También una imagen centrada en ambas dimensiones para
resaltar una estadística y un botón alineado en la parte inferior que cerraría la información.
Todos ellos estarán superpuestos para generar el mensaje.
Paso 2. Abre el archivo res/layout/actividad_principal.xml y copia el siguiente diseño:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".ActividadPrincipal">
<Button
android:layout_height="60dp"
android:text="Saltar"
android:id="@+id/boton_saltar"
android:layout_gravity="center_horizontal|bottom"/>
<ImageView
android:id="@+id/imagen_background"
android:layout_gravity="top|center"
android:src="@drawable/background_frame_layout"
android:scaleType="centerCrop" />
<ImageView
android:id="@+id/imagen_estadistica"
android:layout_gravity="center"
android:src="@drawable/ejemplo_estadistica"
android:padding="16dp" />
</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. También puedes hacerlo empleando la combinación SHIFT+F6.
Paso 3. Corre la aplicación Android para ver el siguiente resultado.
Ejemplo De LinearLayout
Un LinearLayout es un view group que distribuye sus hijos en una sola dimensión
establecida. Es decir, o todos organizados en una sola columna (vertical) o en una sola fila
(horizontal). La orientación puedes elegirla a través del atributo android:orientation.
Al igual que el FrameLayout, el LinearLayout permite asignar una gravedad a cada

componente según el espacio que ocupa.
Adicionalmente existe un parámetro llamado android:layout_weight, el cual define la
importancia que tiene un view dentro del linear layout. A mayor importancia, más espacio
podrá ocupar.
La anterior 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.
android:weightSum="6"
Para distribuir todos los elementos sobre el espacio total del layout, puedes usar el atributo
height con valor cero.
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.
Ejmeplo
Paso 1. Ve a res/layout y crea un nuevo archivo llamado ejemplo_linear_layout.xml y

agrega el siguiente código.
Crearemos un diseño de login, donde se muestren campos para digitar el usuario y el
password. Además se incorporará un botón de confirmación y un mensaje que pregunte
por el olvido de la contraseña. Todos estarán alineados verticalmente sobre un linear
layout.
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="48dp">
<TextView
android:id="@+id/texto_conectar"
android:layout_gravity="center_horizontal"
android:text="Conectar"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/input_usuario"
android:hint="Correo" />
<EditText
android:id="@+id/input_contrasena"
android:ems="10"
android:hint="Contraseña"
android:inputType="textPassword" />
<Button
android:id="@+id/boton_iniciar_sesion"
style="?android:attr/buttonStyleSmall"
android:text="Iniciar Sesion" />
<TextView
android:id="@+id/texto_olvidaste_contrasena"
android:gravity="center_vertical"
android:text="¿Olvidaste tu constraseña?"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0E8AEE" />
</LinearLayout>
Paso 2. Modifica el archivo ActividadPrincipal.java cambiando el layout que existe dentro

del método setContentView() por R.layout.ejemplo_linear_layout.
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.ejemplo_frame_layout);
}
Paso 3. Corre la aplicación y obtén el siguiente resultado.
EJEMPLO DE RELATIVELAYOUT
Este elemento es el más flexible y elaborado de
todos los view groups que veremos.
El RelativeLayout permite alinear cada hijo con
referencias subjetivas de cada hermano.
¿Qué significa esto?
Con el RelativeLayout pensaremos en como
alinear los bordes de cada view con otros. 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”.
En ninguno de los casos nos referimos a una
posición absoluta o un espacio determinado.
Simplemente describimos la ubicación y el
framework de Android computará el resultado
final.
El ejemplo anterior ilustra como una serie de views

forman un diseño irregular. Esto es posible gracias
a unos parámetros que determinan como se juntan
los bordes de cada uno y en que alineación.
Cada referencia es indicada usando el identificador de cada view. Por ejemplo, el siguiente
botón está por debajo de un view con id "editor_nombre" (se indica con el
parámetro layout_below).
<span class="tag"><Button</span>
<span class="atn">...</span>
<span class="atn">android:layout_below</span><span
class="pun">=</span><span class="atv">"@+id/editor_nombre"</span><span
class="tag">/></span>
Veamos algunos de los parámetros 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 probemos un ejemplo…
Paso 1. Crea otro layout dentro de res/layout llamado ejemplo_relative_layout.xml.
Esta vez crearemos un pequeño formulario con cuatro campos de una persona. Se usará un
edit text para los nombres y otro para los apellidos. Por debajo tendremos dos spinners que
permitirán seleccionar el estado civil y el cargo actual. Todos van alineados dentro de un
relative layout
Implementa la siguiente definición:

android:padding="@dimen/activity_horizontal_margin">
<EditText
android:id="@+id/input_nombre"
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_below="@+id/input_nombre"
android:ems="10"
android:hint="Apellidos"
<TextView
android:id="@+id/texto_estado_civil"
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" />
<Spinner
android:id="@+id/spinner_estado_civil"
android:layout_below="@+id/texto_estado_civil"
android:layout_toLeftOf="@+id/spinner_cargo"
android:entries="@array/lista_estado_civil" />
<TextView
android:id="@+id/texto_cargo"
android:layout_centerHorizontal="true"
android:layout_toRightOf="@+id/texto_estado_civil"
android:text="Cargo"
<Spinner
android:id="@+id/spinner_cargo"
android:layout_alignLeft="@+id/texto_cargo"
android:layout_alignParentRight="true"
android:layout_alignStart="@+id/texto_cargo"
android:layout_below="@+id/texto_cargo"
android:entries="@array/lista_cargo" />
</RelativeLayout>
Paso 2. Cambia el parámetro

de setContentView() por R.layout.ejemplo_relative_layout.
Paso 3. Visualiza el resultado.
EJEMPLO DE TABLELAYOUT
Como ya te lo imaginarás, el TableLayout organiza views en filas y columnas de forma

tabular.
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.) dentro de
la fila. Sin embargo, puedes crear una celda con otro tipo de view. Esto hará que 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. Incluso puedes usar el
parámetro weight para declarar pesos de las celdas.
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.
A continuación crearemos una prueba.
Paso 1. Crea un nuevo archivo dentro de res/layout con el nombre
de ejemplo_table_layout.xml. Esta vez verás el diseño 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 línea divisoria y por debajo calcularemos la cuenta total.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:text="Subtotal"
android:textColor="@android:color/white" />
</TableRow>
<TableRow>
<TextView
android:text="Jabón de manos x 1" />
<TextView
android:gravity="left"
android:text="$2" />
</TableRow>
<TableRow>
<TextView
android:text="Shampoo Monster x 1" />
<TextView
</TableRow>
<TableRow
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:text="Pastas Duria x 2" />
<TextView
android:id="@+id/textView2"
</TableRow>
<TableRow
<TextView
android:text="Detergente Limpiadin x 1" />
<TextView
android:text="$13,4" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:text="Subtotal"
android:textColor="#128675" />
<TextView
android:layout_gravity="left"
android:gravity="right"
</TableRow>
<TableRow
<TextView
android:text="Costo envío"
<TextView
</TableRow>
<TableRow
<TextView
android:text="Cupón"
<TextView
android:text="-$5" />
</TableRow>
<TableRow
<TextView
android:text="Total"
<TextView
</TableRow>
</TableLayout>
Paso 2. Ve al archivo ActividadPrincipal.java y cambia el parámetro

de setContentView() con la referencia R.layout.ejemplo_table_layout.
Paso 3. Ejecuta el proyecto para visualizar la siguiente impresión.
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.
EJEMPLO DE GRIDLAYOUT
Un GridLayout es un ViewGroup que alinea sus elementos hijos en una cuadrícula (grilla ó
grid). Nace con el fin de evitar anidar linear layouts para crear diseños complejos.
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.
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.
El siguiente código muestra un TextView que ocupa 2 columnas y 3 filas.
<TextView
android:id="@+id/celda_1"
android:layout_columnSpan="2"
android:layout_rowSpan="3"
android:text="Celda 1" />
En la ilustración mostrada al inicio, existe una cuadrícula de 8×4 con 5 views. Sus atributos
span se encuentran escritos en de la forma axb.
Como ves, es posible expandir las celdas de forma horizontal y vertical. Incluso es posible
proyectar views de forma cruzada.
Si observas bien, el elemento que se encuentra en la segunda fila con las especificaciones
1×2 se cruza en la columna 3. Esto se debe a que su ancho es de 3 unidades, per su
atributo columnSpan es igual a 2, lo que facilita al framework crear el cruce si existe espacio
en blanco.
También puedes especificar a qué fila y columna pertenece cada view con los
atributos android:layout_row y android:layout_column.
El siguiente TextView se encuentra en la posición (0,0).
<TextView
android:id="@+id/celda_1"
android:layout_row="0"
android:text="Celda 1" />
ejemplo
Paso 1. Sigue la secuencia y crea un layout nuevo llamado ejemplo_grid_layout.xml. Esta

vez diseñaremos el teclado de una calculadora simple.
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:alignmentMode="alignBounds"
android:columnCount="4"
android:rowCount="4">
<TextView
android:id="@+id/numero_7"
style="@style/AppTheme.BotonCalculadora.Azul"
android:text="7" />
<TextView
android:text="8" />
<TextView
android:text="9" />
<TextView
android:text="4" />
<TextView
android:text="5" />
<TextView
android:text="6" />
<TextView
android:id="@+id/signo_por"
style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_gravity="fill"
android:gravity="center"
android:text="×" />
<TextView
android:layout_gravity="fill_horizontal"
android:text="÷" />
<TextView
android:text="1" />
<TextView
android:text="2" />
<TextView
android:text="3" />
<TextView
android:id="@+id/signo_menos"
android:gravity="center"
android:text="-" />
<TextView
android:id="@+id/punto"
android:gravity="center_horizontal"
android:text="." />
<TextView
android:id="@+id/cero"
android:text="0" />
<TextView
android:id="@+id/signo_igual"
android:text="=" />
<TextView
android:id="@+id/signo_mas"
android:text="+" />
</GridLayout>
Paso 2. Modifica tu archivo de estilos res/values/styles.xml con las siguientes

características para los botones de la calculadora. Serán dos tipos de botones, aquellos que
representen los números con fondo azul y los que muestren los signos de operación
aritmética 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

con R.layout.ejemplo_grid_layout.
Paso 4. Finalmente corre de nuevo el proyecto para ver los efectos.
DISEÑO DE LAYOUTS CON ANDROID STUDIO
El editor visual de Android Studio facilita la creación de layouts con un sistema de drag and
drop. Esto quiere decir, que podemos arrastrar elementos desde un panel hacia el lienzo
del layout y ubicarlos instantáneamente.
Incluso podemos modificar los atributos y parámetros de forma visual sin tener que tocar
el código XML.
En la vista de diseño tendremos una sección llamada Palette, la cual contiene todos los
elementos gráficos posibles que podemos implementar dentro de un layout. Desde este
lugar puedes seleccionar cualquier elemento y arrastrarlo al lienzo. Dentro de esta existen
varias categorías, como Layouts, donde se encuentran los layouts que hemos visto hasta
ahora.
El lienzo es simplemente la representación visual en tiempo real de la interfaz de la
aplicación. Cuando arrastras un elemento de la paleta hacia el lienzo, este proyecta guías
visuales para indicarte como será acomodado el view si lo sueltas en esa posición.
El panel de propiedades (Properties) muestra los atributos del view seleccionado. En el
veremos una lista con pares clave-valor para escoger las opciones que deseamos sin ver el
código XML.
La ilustración anterior muestra como al intentar arrastrar un TextView de tipo “Large

Text” hacia un FrameLayout, proyecta una ayuda visual para saber con qué valor del
atributo gravity será situado el componente. En este caso estamos la imagen muestra la
tentativa de soltar el view en el centro ([center, center]).
Cada layout tiene su propia ayuda visual. Por ejemplo un relative layout proyecta flechas de
alineación entre los views para saber en que borde se asignará un elemento.
Cambiar versión de Android— En las variaciones del editor visual, podemos cambiar la
versión de Android con que se está mostrando el layout actual.
Esto con el fin de comprobar que los diseños funcionen de forma integral en versiones
anteriores.
Para ello dirígete al icono del androide en la parte superior derecha y despliega la lista de
versiones disponibles. Selecciona la que desees y analiza el cambio.
Si presionas la opción Preview Android Versions se desplegarán al mismo tiempo varios
layouts con el diseño actual.
Visualizar layouts con múltiples idiomas— Si tienes traducciones para los strings
relacionados a tus layouts, entonces puedes las respectivas variaciones con la opción del
globo.
La ilustración anterior muestra que existe un recurso strings para el idioma inglés, por lo
que al presionar la opción Preview All Locales veremos las variaciones en pantalla.
Variar el tema del layout— Otro cambio que puedes realizar, es la selección de un tema
distinto para el renderizado del layout. Solo presiona el icono parecido a un eclipse.
Esto despliega un asistente con la lista de todos los estilos que tiene el sistema. Elige el que
desees probar y confirma.
Rotar pantalla en Android Studio— Para cambiar de portrait a landscape o viceversa,

utiliza el icono del dispositivo móvil con una flecha de rotación.
Visualizar el layout con un dispositivo diferente— Es posible emplear diferentes
dispositivos para comprobar el funcionamiento del layout en densidades alternas.
En mi caso he usado el Nexus 5 para representar la interfaz, pero si presionas el icono cuya
imagen tiene un dispositivo tras otro podrás acceder a más modelos.
Por otro lado, si eliges la opción Preview All Screen Sizes, Android Studio proyectará el
layout en todos los dispositivos disponibles.
Crear variación landscape de un layout— En ocasiones los layout que creamos suelen
desajustarse al momento de rotar la pantalla a landscape. Esto afecta la experiencia de
usuario, ya que desaprovecha el espacio de acción y es posible que los views pierdan
congruencia.
Un pequeño ejemplo de esta situación podemos verlo al
rotar ejemplo_relative_layout.xml a landscape.
Debido a que el espacio horizontal casi es duplicado, el EditText para los nombres se ve
forzado. Una de las ideas para mejorar el diseño, podría ser mover el edit Text de apellidos
a la derecha para compensar.
Solucionaremos esto creando un layout especial para orientación horizontal, donde
haremos el cambio. Ve a la primera opción donde se ve un icono de un archivo junto al logo
de android. Esto desplegará una lista de varias opciones, pero la que nos interesa es Create
Landscape Variation.
Luego de haber seleccionado la opción, se creará automáticamente un layout con las

mismas características de la variación portrait. Modifica su contenido con el siguiente
diseño:
android:padding="@dimen/activity_horizontal_margin">
<EditText
android:id="@+id/input_nombre"
android:layout_marginRight="48dp"
android:ems="10"
android:hint="Nombres"
<EditText
android:id="@+id/input_apellido"
android:layout_toRightOf="@+id/input_nombre"
android:ems="10"
android:hint="Apellidos"
<TextView
android:id="@+id/texto_estado_civil"
android:text="Estado civil"
<Spinner
android:id="@+id/spinner_cargo"
android:layout_below="@+id/texto_estado_civil"
android:layout_toLeftOf="@+id/spinner_estado_civil"
android:entries="@array/lista_cargo" />
<TextView
android:id="@+id/texto_cargo"
android:layout_alignLeft="@+id/input_apellido"
android:text="Cargo"
<Spinner
android:id="@+id/spinner_estado_civil"
android:layout_alignLeft="@+id/texto_cargo"
android:layout_alignParentRight="true"
android:layout_alignStart="@+id/texto_cargo"
android:layout_below="@+id/texto_cargo"
android:entries="@array/lista_estado_civil" />
</RelativeLayout>
Este producirá el siguiente resultado:

Si te fijas en el contenido de la carpeta res, verás que hay un nuevo directorio
llamado layout-land. Como sabes, el calificador “land” indica que cuando el
dispositivo rote a landscape, la aplicación buscará este diseño para implementarlo.

Carta

Cargado por

Copyright:

Formatos disponibles

Carta

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Carta

Cargado por

Copyright:

Formatos disponibles

CONTROLES BÁSICOS

Control Button [API]

Este botón quedaría como se muestra en la siguiente imagen:

Control ToggleButton [API]

El botón se mostraría de alguna de las dos formas siguientes, dependiendo de su estado:

Y su aspecto sería el siguiente:

Control ImageButton [API]

En una aplicación el botón anterior se mostraría de la siguiente forma:

El botón mostrado en este caso sería similar a éste:

Personalizar el aspecto un botón (y otros controles).

Este selector lo guardamos por ejemplo en un fichero llamado toggle_style.xml y lo

En la siguiente imagen vemos el aspecto por defecto de

Visualmente el resultado sería el siguiente:

Botones flotantes (Floating Action Button / FAB)

Añadir librerías externas a un proyecto de Android Studio

Tras esto, Android Studio se encargará de descargar automáticamente los ficheros

La propiedad más relevante, al igual que en el caso de un ImageButton, es android:src, con

La última propiedad asignada, app:borderWidth=»0dp», es necesaria temporalmente (en el

Es practicar la implementación de un programa que requiera controles de tipo RadioButton para

Y el tercer TextView con los valores:

El código fuente de la clase MaintActivity es:

public class MainActivity extends Activity {

private EditText et1,et2;

//Este método se ejecutará cuando se presione

public void operar(View view) {

public class MainActivity extends Activity {

private EditText et1,et2;

//Este método se ejecutará cuando se presione

Definimos dos objetos de la clase CheckBox como atributos de la clase:

public class MainActivity extends Activity {

//Este método se ejecutará cuando se presione

Definimos un objeto de la clase Spinner:

Definimos un vector con la lista de String que mostrará el Spinner:

Definimos y creamos un objeto de la clase ArrayAdapter:

Al constructor le pasamos como primer parámetro la referencia de nuestro Activity (this),

En el método operar que se ejecuta cuando presionamos el botón procedemos a extraer

public class MainActivity extends Activity {

Cargar layout XML En Android— Al tener definido tu recurso, ya es posible inflar su

Y ahora desde nuestra actividad lo obtenemos:

TextView textoHelloWorld = (TextView)findViewById(R.id.texto_hello_world);

 La ilustración de ejemplo anterior, muestra un layout cuyo elemento raíz es un

El resultado sería este:

 match_parent: Ajusta el tamaño a las dimensiones máximas que el padre le permita. La

Un FrameLayout es un view group creado para mostrar un solo elemento en pantalla.

Veamos algo práctico.

Luego de ello refactoriza el nombre del layout a ejemplo_frame_layout.xml. Para ello

Al igual que el FrameLayout, el LinearLayout permite asignar una gravedad a cada

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

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

Paso 2. Modifica el archivo ActividadPrincipal.java cambiando el layout que existe dentro

Paso 3. Corre la aplicación y obtén el siguiente resultado.

El ejemplo anterior ilustra como una serie de views

Veamos algunos de los parámetros del RelativeLayout para definir posiciones:

Implementa la siguiente definición:

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

Paso 2. Cambia el parámetro

Como ya te lo imaginarás, el TableLayout organiza views en filas y columnas de forma

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