SlideShare une entreprise Scribd logo
1  sur  82
Télécharger pour lire hors ligne
Instalación de Java
Para poder hacer este curso debemos instalar el compilador de Java y la
máquina virtual de Java. Estas herramientas las podemos descargar de:
Java SE Development Kit (JDK).
Una vez que tenemos el JDK (Java Development Kit) procedemos a instalarlo:
Instalación de java
La versión a instalar conviene que sea la última (en este momento disponemos la
versión 6.
Aceptamos los términos:
Términos de instalación de java
Haremos la instalación por defecto por lo que presionamos el botón next:
Configuración instalación de java
Esperamos unos minutos mientras se procede a la instalación de Java:
Proceso instalación de java
Luego aparece un diálogo donde debemos especificar el directorio donde
almacenar el JRE y también procedemos a efectuar la instalación por defecto
presionando el botón "next":
Proceso instalación de JRE
Una vez finalizado el proceso de instalación debe aparecer un diálogo similar a
este:
Fin de instalación java
Instalación del editor Eclipse
En el concepto anterior procedimos a instalar el lenguaje Java (con dichas
herramientas podemos ejecutar y compilar programas codificados en java), pero
ahora necesitamos instalar el Eclipse que es un editor para codificar los
programas (si bien podemos utilizar otros editores, nosotros utilizaremos este para
seguir el curso)
Para la descarga del editor Eclipse lo hacemos del sitio:
Eclipse IDE for Java Developers.(Esta es la que más se adecua a nuestro estudio)
Una vez que descargamos el Eclipse su instalación es muy sencilla, creamos una
carpeta llamada eclipse y procedemos a descomprimir el archivo descargado
indicando solamente la unidad donde se instala (ejemplo c:).
Ahora nos dirigimos a la carpeta donde se instalaron los archivos y procedemos a
ejecutar el programa eclipse.exe
Primero aparece un mensaje de inicio del Eclipse:
Inicio eclipse
Luego la primera vez que ejecutemos el editor Eclipse aparece un diálogo para
seleccionar la carpeta donde se almacenarán los programas que desarrollaremos
(podemos crear una carpeta donde almacenaremos todos los proyectos que
desarrollaremos en el curso):
Carpeta inicio eclipse
Luego de configurar la carpeta donde se crearán los proyecto aparece el editor
con una pantalla de presentación (Welcome):
Pantalla inicial eclipse
Esta ventana de bienvenida la podemos cerrar seleccionando el ícono:
"Workbench", con lo que aparece el entorno de trabajo del Eclipse (si queremos
nuevamente ver la ventana de bienvenida podemos activarla desde el menú de
opciones: Help -> Welcome"
El entorno de trabajo del Eclipse es:
Entorno de trabajo eclipse
Descarga de herramientas necesarios para programar para Android.
1 - Primero debemos instalar el compilador de Java y la máquina virtual. Estas
herramientas las podemos descargar de:
Java SE Development Kit (JDK).
2 - El segundo paso es la descarga del ADT (que contiene todo lo necesario para
comenzar el desarrollo de aplicacionesen Android), lo hacemos del sitio
(descargar el de 32 o 64 bit según el JDK de Java que ya tenemos instalado del
paso anterior):
Android SDK.
3 - El tercer paso es descomprimir el ADT, por ejemplo en la raiz de c:
4 - El cuarto paso es ejecutar el Eclipse:
Nos dirigimos a la carpetas creadas cuando descomprimimos el ADT y vemos que
tenemos dos carpetas:
eclipse
sdk
Entramos a la carpeta eclipse y ejecutamos eclipse.exe
Debe aparecer una ventana de inicio similar a esta:
Nos pide seguidamente la carpeta donde deseamos ir almacenando los
proyectos que desarrollemos:
Ahora ya estamos en el entorno que tiene una vista similar a esta (recordemos
que es el Eclipse con algunos cambios desarrollados por Google), la primera vez
que ingresamos nos aparece una pantalla de bienvenida pero podemos cerrarla
haciendo clic en la cruz de la pestaña y ya tenemos el entorno de trabajo:
7 - Por último debemos crear el AVD (Android Virtual Device) para ello nos
dirigimos a la opción Window -> Android Virtual Device Manager.
En este diálogo debemos crear el emulador de Android (presionamos el botón
New...):
En este diálogo asignamos un nombre a nuestro AVD, elegimos un dispositivo (que
no sea tan grande ya que no entrara en pantalla, podemos probar con
WVGA(480,800)), lo enlazamos con la versión de SDK respectivo, fijamos un
tamaño al SD Card:
Ya tenemos todo configurado para el desarrollo de aplicacionesAndroid.
Pasos para crear el primer proyecto
Android.
Ya se encuentra disponible el nuevotutorial para aprender android con el nuevo
entorno Android Studio propuesto por Google y que remplaza a Eclipse.
Ya tenemos todo lo necesario instalado para implementar el primer proyecto.
Desde el menú de opciones: File -> New -> Android Application Project
creacion proyecto android
En este diálogo especificamos el nombre de la aplicación y proyecto (pueden ser
iguales) y el nombre del paquete java donde se almacenarán los archivos java
que creemos (normalmente la url de su empresa al revés).
Ahora empezaremos a presionar el botón next para pasar a otras configuraciones
de nuestra aplicación, por el momento dejaremos todos los valores por defecto
en cada una de los diálogos que aparece (son 5 diálogos actualmente), en el
último diálogo debe aparecer el botón "Finish" el cual presionamos.
El ADT nos genera todos los directorios y archivos básicospara iniciar nuestro
proyecto:
Archivos y directorios de un proyecto android
No haremos en este momento un análisis del significado y objetivo de cada uno
de estos directorios y archivos generados, sino a medida que avancemos con
este curso iremos viendoen forma puntual y profunda.
La interfaz visual de nuestro programa para Android se almacena en un archivo
XML en la carpeta res, subcarpeta layout y el archivo se llama activity_main.xml.
En esta carpeta tenemos creada nuestra primer pantalla.
Al seleccionar estearchivo el ADT nos permite visualizar el contenido en "vista de
diseño (Graphical Layout)":
archivo xml graphical layout
Si seleccionamos la otra pestaña podemos visualizar el archivo activity_main.xml
en formato de texto:
Archivoxml en modo texto
El ADT ya insertó un control de tipo RelativeLayout que permite ingresar controles
visuales alineados a los bordes y a otros controles que haya en la ventana (más
adelante analizaremos este layout)
Ya veremos que podemos modificar todo este archivo para que se adapte a la
aplicación que queremos desarrollar.
Luego contenido en el control RelativeLayout hay otro control de tipo TextView
que es básicamente una etiqueta o label que mostrará en pantalla el valor
almacenado en la propiedad text.
Podemos modificar directamente el archivoxml o en "vista de diseño" modificar
los valores de las propiedades. Elegimos nuevamente la pestaña "Graphical
Layout" y seleccionamos el TextView con el mouse y vemos que en la parte
derecha de la pantalla aparece una ventana llamada "properties":
properties
Y estando seleccionado el TextView buscamos la propiedad Text y cargamos: "Mi
primer programa para Android" y presionamos enter, podemos ver que se
actualiza la vista:
properties
Con esto ya podemos probar nuestra primer aplicación para un dispositivo
Android. SELECCIONAMOS con el mouse en la ventana de la izquierda (Package
Explorer) el proyecto001 y presionamos el ícono de Run (triángulo verde) o desde
el menú. Seleccionamos que se ejecute como aplicación "Android Application".
Ahora se abrirá el AVD(Android Virtual Device) esto tarda bastante tiempo, es
muy importante recordar que luego de ver ejecutándose el programa NO
debemos cerrar el AVD para que la próxima ejecución se inicie más rápido
(podemos minimizar el AVD)
Ahora podemos ver nuestra primer aplicación corriendo en el emulador de
Android:
AVD con programa Android en ejecucion
Como hemos visto el ADT nos genera en forma automática todas las carpetas y
archivosbásicos que necesitamos en un principio. En el siguiente concepto
podremos empezar a programar verdaderamente. El único objetivo de este
ejercicio es recordar los pasos para crear un proyecto.
Problemas con la última versión del entorno de desarrollode Android ADT
Si cuando crea un proyecto para Android se encuentra que en la carpeta layout
se crean dos archivos XML en lugar de uno, es que tiene la último versión y este
tutorial todavía no está adaptado:
ADT actual
Con esta versión del ADT Google propone utilizar Fragment aunque realicemos un
programa "Hola Mundo", hasta que se actualice este tutorial podemos realizar
estos pasos para trabajar sin Fragment en los ejercicios iniciales.
Veamos entonces que pasos debemos dar para dejar el proyecto que se adapte
a todos los ejercicios propuestos en esta web y demás libros que se hayan
publicado hasta marzo de 2014:
Pasos
Borrar el archivo activty_main.xml de la carpeta layout de nuestro proyecto
(presionamos el botón derecho del mouse sobre el archivo y seleccionamos
Delete:
ADT actual
Renombramos el archivo fragment_main.xml por el el nombre activity_main.xml
presionando el botón derecho del mouse y seleccionando la opción Refactor - >
Rename y cargamos en dicho dialogo activity_main.xml (por más que nos
muestre un mensaje de warning lo ejecutamos al cambio):
ADT actual
Ahora nos dirigimos a la carpeta src y entramos al paquete donde se encuentra
el archivo MainActivity.java (en este momento nos está mostrando un mensaje de
error que lo solucionaremos)
ADT actual
Ahora borramos la clase PlaceholderFragment:
ADT actual
Y las cinco líneas que crean el objeto de la clase PlaceholderFragment:
ADT actual
Es decir que nuestro archivo MainActivity queda con la siguiente
estructura(como vemos cuando lo grabamos ahora desaparecen los errores y
podemos ejecutar nuestro programa):
ADT actual
Captura del clic de un botón.
Problema:
Realizar la carga de dos números en controles de tipo EditText. Mostrar un
mensaje que solicite la carga de los valores. Disponer un Button para sumar
los dos valores ingresados. Mostrar el resultado en un tercer TextView.
La interfaz visual debe quedar algo semejante a esto:
Veamos paso a paso como creamos la interfaz visual de nuestro
programa. Primero borramos el TextView que aparece por defecto cuando
se crea un proyecto con el ADT. Ahora desde la ventana "Palette"
seleccionamos de la pestaña "Form Widgets" el control "TextView" y lo
arrastramos a la ventana de diseño de nuestra interfaz:
Ahora lo seleccionamos y en la ventana de propiedades especificamos la
propiedad text (como habíamos visto anteriormente)disponemos el texto
"Ingrese el primer valor:":
También vamos a especificar la propiedad "Id", la misma aparece primera
en la paleta de propiedades y le asignaremos el valor @+id/tv1 (el nombre
es el que se indica luego de la barra es decir cambiamos textView1 por
tv1)Cuidado de no borrar @+id/
Hemos entonces asignado como nombre a este objeto: tv1 (recordemos
que se trata de un objeto de la clase TextView)
Ahora de la paleta de componentes seleccionamos la pestaña "Text Fields"
y arrastramos el primero (el que tiene la etiqueta abc)
En la ventana de properties estando seleccionado el EditText configuramos
la propiedad Id... con el nombre et1 (este nombre haremos referencia
posteriormente desde Java)
Efectuamos los mismos pasos para crear el segundo TextView y EditText
(inicializamos las propiedades respectivas) Definimos los id con los nombres
tv2 y et2, el resultado visual debe ser algo semejante a esto:
De la pestaña "Form Widgets" arrastramos un control de tipo "Button":
Inicializamos la propiedad text con el texto "Sumar" y la propiedad id la
dejamos con el valor ya creado llamado "button1".
Para terminar con nuestra interfaz visual arrastramos un tercer objeto de
tipo TextView y definimos la propiedad id con el valor "tv3" y la propiedad
text con el texto "resultado", recordemos que la interfaz final debe ser
semejante a esta:
Si en este momento ejecutamos la aplicación aparece la interfaz visual
correctamente pero cuando presionemos el botón no mostrará la suma.
Es fundamental una vez finalizada la interfaz visual proceder a grabarla
(icono de los diskettes) o la opción File->Save para que se actualicen los
archivos que se generan automáticamente.
Hasta ahora hemos trabajado solo con el archivo xml (activity_main.xml)
donde se definen los controles visuales de la ventana que estamos
creando.
Abrimos seguidamente el archivo MainActivity.java que lo podemos ubicar
en la carpeta src:
La clase MainActivity hereda de la clase Activity. La clase Activity
representa una ventana de Android y tiene todos los métodos necesarios
para crear y mostrar los objetos que hemos dispuesto en el archivo xml.
El código fuente de la clase MainActivity.java es:
package com.javaya.proyecto002;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@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;
}
}
Como mínimo se debe sobrescribir el método onCreate heredado de la
clase Activity donde procedemos a llamar la método setContentView
pasando como referencia una valor almacenado en una constante
llamada activity_main contenida en una clase llamada layout que a su vez
la contiene una clase llamada R (veremos más adelante que el ADT se
encarga de crear la clase R en forma automática y sirve como puente
entre el archivo xml y nuestra clase MainActivity)
Luego veremos el otro método onCreateOptionsMenu.
Captura de eventos.
Ahora viene la parte donde definimos variables en java donde
almacenamos las referencias a los objetos definidos en el archivo XML.
Definimos tres variables, dos de tipo EditText y finalmente una de tipo
TextView (estas dos clases se declaran en el paquete android.widget, es
necesario importar dichas clases para poder definir las variables de dichas
clases):
package com.javaya.proyecto002;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
private EditText et1,et2;
private TextView tv3;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@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;
}
}
La forma más fácil de importar las clases EditText y TextView es tipear las
dos líneas:
private EditText et1,et2;
private TextView tv3;
y luego presionar las teclas Control-Shift-O
Esto hace que se escriban automáticamente los dos import:
import android.widget.EditText;
import android.widget.TextView;
Los nombres que le dí a los objetos en este caso coinciden con la
propiedad id (no es obligatorio):
private EditText et1,et2;
private TextView tv3;
No definimos TextView para los dos mensajes "Ingrese el primer valor" e
"Ingrese el segundo valor" ya que no necesitaremos interactuar con ellos.
También veremos que el objeto de la clase Button no es necesario definir
un atributo sino que desde el archivo XML inicializaremos la propiedad
OnClick.
En el método onCreate debemos enlazar estas variables con los objetos
definidos en el archivo XML, esto se hace llamando al método
findViewById:
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv3=(TextView)findViewById(R.id.tv3);
}
Al método findViewById debemos pasar la constante creada en la clase R
(recordemos que se crea automáticamente esta clase) el nombre de la
constante si debe ser igual con el nombre de la propiedad del objeto
creado en el archivo XML. Como la clase findViewById retorna una clase
de tipo View luego debemos utilizar el operador cast (es decir le
antecedemos entre paréntesis el nombre de la clase)
Ya tenemos almacenados en las variables las referencias a los tres objetos
que se crean al llamar al método:setContentView(R.layout.main); .
Ahora planteamos el método que se ejecutará cuando se presione el
botón (el método debe recibir como parámetro un objeto de la clase
View) En nuestro ejemplo lo llamé sumar:
package com.javaya.proyecto002;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
private EditText et1,et2;
private TextView tv3;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv3=(TextView)findViewById(R.id.tv3);
}
@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 sumar(View view) {
}
}
Debemos importar lar clase View (Control-Shift-O)
Ahora debemos ir al archivo XML e inicializar la propiedad OnClick del
objeto button1 con el nombre del método que acabamos de crear (este
paso es fundamental para que el objeto de la clase Button pueda llamar al
método sumar que acabamos de crear):
Finalmente implementaremos la lógica para sumar los dos valores
ingresados en los controles EditText:
public void sumar(View view) {
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
}
Extraemos el texto de los dos controles de tipo EditText y los almacenamos
en dos variables locales de tipo String. Convertimos los String a tipo entero,
los sumamos y el resultado lo enviamos al TextView donde se muestra la
suma (previo a convertir la suma a String)
La clase completa queda entonces como:
package com.javaya.proyecto002;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
private EditText et1,et2;
private TextView tv3;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv3=(TextView)findViewById(R.id.tv3);
}
@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 sumar(View view) {
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
}
}
Si ejecutamos nuestro programa podemos ver ahora que luego de cargar
dos valores al presionar el botón aparece en el tercer TextView el resultado
de la suma de los dos EditText:
Controles RadioGroup y RadioButton.
El objetivo de este concepto 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);
et2=(EditText)findViewById(R.id.et2);
tv3=(TextView)findViewById(R.id.tv3);
r1=(RadioButton)findViewById(R.id.r1);
r2=(RadioButton)findViewById(R.id.r2);
}
@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();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
if (r1.isChecked()==true) {
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
} else
if (r2.isChecked()==true) {
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:
r1=(RadioButton)findViewById(R.id.r1);
r2=(RadioButton)findViewById(R.id.r2);
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:
public void operar(View view) {
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
if (r1.isChecked()==true) {
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
} else
if (r2.isChecked()==true) {
int resta=nro1-nro2;
String resu=String.valueOf(resta);
tv3.setText(resu);
}
}
Control CheckBox.
El objetivo de este concepto es practicar lo visto hasta ahora e incorporar
el control visual CheckBox
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
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 objet o 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.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
private EditText et1,et2;
private TextView tv3;
private CheckBox checkBox1,checkBox2;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv3=(TextView)findViewById(R.id.tv3);
checkBox1=(CheckBox)findViewById(R.id.checkBox1);
checkBox2=(CheckBox)findViewById(R.id.checkBox2);
}
@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();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
String resu="";
if (checkBox1.isChecked()==true) {
int suma=nro1+nro2;
resu="La suma es: "+ suma;
}
if (checkBox2.isChecked()==true) {
int resta=nro1-nro2;
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:
checkBox1=(CheckBox)findViewById(R.id.checkBox1);
checkBox2=(CheckBox)findViewById(R.id.checkBox2);
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="";
if (checkBox1.isChecked()==true) {
int suma=nro1+nro2;
resu="La suma es: "+ suma;
}
if (checkBox2.isChecked()==true) {
int resta=nro1-nro2;
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.
Problema:
Realizar la carga de dos números en controles de tipo EditText. Mostrar un
mensaje que solicite la carga de los valores. Disponer un control de tipo
Spinner que permita seleccionar si queremos sumar, restar, multiplicar o
dividir dichos valores. Finalmente mediante un control de tipo Button
efectuamos la operación respectiva. Mostramos el resultado en un
TextView.
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:
package com.javaya.proyecto005;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.TextView;
public class MainActivity extends Activity {
private Spinner spinner1;
private EditText et1,et2;
private TextView tv3;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv3=(TextView)findViewById(R.id.tv3);
spinner1 = (Spinner) findViewById(R.id.spinner1);
String []opciones={"sumar","restar","multiplicar","dividir"};
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, opciones);
spinner1.setAdapter(adapter); }
@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();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
String selec=spinner1.getSelectedItem().toString();
if (selec.equals("sumar")) {
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv3.setText(resu);
} else
if (selec.equals("restar")) {
int resta=nro1-nro2;
String resu=String.valueOf(resta);
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> adapter = new
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;
String resu=String.valueOf(suma);
tv3.setText(resu);
} else
if (selec.equals("restar")) {
int resta=nro1-nro2;
String resu=String.valueOf(resta);
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:
package com.javaya.proyecto006;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends Activity {
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 TextView tv1;
private ListView lv1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv1=(TextView)findViewById(R.id.tv1);
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
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;
}
}
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 TextView tv1;
private ListView lv1;
En el método onCreate obtenemos la referencia a los dos objetos:
tv1=(TextView)findViewById(R.id.tv1);
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> adapter = new
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:
Control
ImageButton.
Hemos visto la creación de objetos
de la clase Button, ahora veremos
otra clase muy similar a la anterior
llamada ImageButton que tiene la misma filosofía de manejo con la
diferencia que puede mostrar una imagen en su superficie.
Problema:
Disponer un objeto de la clase ImageButton que muestre una imagen de
un teléfono. Cuando se presione mostrar en un control TextView el mensaje
"Llamando".
Primero crearemos un proyecto llamado proyecto007 y luego debemos
buscar una imagen en formato png que represente un telefono de 50*50
píxeles.
Nombre del archivo: telefono.png
Ahora copiamos el archivo a la carpeta de recursos de nuestro proyecto :
resdrawable-mdpi
Desde el Eclipse en la ventana "Package Explorer" navegamos hasta la
carpeta res y entramos al directorio drawable-mdpi y vemos que todavía
no está el archivo que acabamos de copiar. Para que se actualice el
proyecto presionamos el botón derecho del mouse sobre esta carpeta y
seleccionamos la opción "Refresh":
Vemos que se actualizó el contenido de la carpeta y aparece la imagen
que copiamos previamente.
Ahora insertaremos el objeto de la clase ImageButton en el formulario de
nuestra aplicación. La clase ImageButton se encuentra en la pestaña
"Image & Media":
Aparece un diálogo de donde seleccionamos el archivo telefono. Luego
de esto podemos ver que la superficie del objeto de la clase ImageButton
muestra la imagen que almacenamos previamente en la carpeta de res.
Si queremos cambiar el archivo a mostrar debemos modificar la propiedad
src (aparece nuevamente el diálogo que nos permite seleccionar la
imagen)
Inicializamos la propiedad ID con el nombre bi1
Agreguemos un TextView a nuestra aplicación y configuremos sus
propiedades ID (con tv1)y text. Luego la interfaz visual debe ser similar a:
Código fuente:
package com.javaya.proyecto007;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;
public class MainActivity extends Activity {
private TextView tv1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv1=(TextView)findViewById(R.id.tv1);
}
@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 ImageButton
public void llamar(View view) {
tv1.setText("Llamando");
}
}
Definimos el atributo de tipo TextView:
TextView tv1;
Enlazamos el control definido en el archivo XML y la variable de java:
tv1=(TextView)findViewById(R.id.tv1);
Implementamos el método que se ejecutará cuando se presione el el
objeto de la clase ImageButton:
public void llamar(View view) {
tv1.setText("Llamando");
}
No olvidemos inicializar la propiedad OnClick del objeto ib1 con el nombre
del método "llamar" (recordemos que esto lo hacemos accediendo a la
propiedad On Click en la ventana de "Properties")
Comentarios extras de este control.
Cuando copiamos el archivo lo hicimos a la carpeta:
drawable-mdpi
Pero vimos que hay otras carpetas con nombres similares:
drawable-ldpi
drawable-hdpi
El objetivo de estas otras carpetas es guardar las mismas imágenes pero
con una resolución mayor si la guardamos en drawable-hdpi y con una
resolución menor al guardarla en drawable-ldpi.
Esto se hace si queremos que nuestra aplicación sea más flexible si se
ejecuta en un celular, en un tablet, en un televisor etc.
Debemos tener en cuenta estos tamaños:
En la carpeta res/drawable-mdpi/
(guardamos la imagen con el tamaño original)
En la carpeta res/drawable-ldpi/
(guardamos la imagen con el tamaño del 75% con respecto al de la carpeta drawable-
mdpi)
En la carpeta res/drawable-hdpi/
(guardamos la imagen con el tamaño del 150% con respecto al de la carpeta drawable-
mdpi)
Lanzar un segundo "Activity".
Hasta ahora todos los programas han tenido una sola ventana (Activity)
Es muy común que una aplicación tenga más de una ventana. Para
implementar esto en Android debemos plantear una segunda clase que
también herede de la clase Activity (tengamos en cuenta que cuando
utilizamos ADT automáticamente cuando creamos un proyecto nos crea el
archivo XML y java de la primer Activity)
Vamos a ver en este concepto los pasos que debemos dar para crear otro
Activity y como activarlo desde el Activity principal.
Problema:
Confeccionar un programa que muestre en la ventana principal un botón
que al ser presionado muestre otra ventana (Activity)mostrando un
TextView con el nombre del programador de la aplicación y un botón para
cerrar la ventana o actividad.
1 - Primero creamos un nuevo proyecto que lo llamaremos proyecto008 y
en la ventana principal creamos la siguiente interfaz:
Es decir que nosotros queremos que cuando se presione el botón "Acerca
De" nos abra otra ventana (Activity)y nos muestre el nombre del
programador.
2 - Ahora tenemos que crear el segundo Activity. Crearemos primero el
archivo XML. Presionamos el botón derecho sobre la carpeta layout y
seleccionaremos la opción New -> Android XML File
Aquí tenemos que definir el nombre del archivo XML (debe estar en
minúsculas), lo llamaremos acercade:
Implementamos ahora la interfaz visual de esta segunda ventana (Activity)
disponiendo un objeto de la clase TextView donde mostramos el nombre
del autor de este programa y un Button para cerrar la ventana.
3 - Tenemos ahora que crear el archivo Java donde dispondremos la
funcionalidad de la segunda ventana (Activity)
Creamos una nueva clase al proyecto desde el menú
contextual(presionamos el botón derecho del mouse sobre el paquete
com.androidya.proyecto008):
Al nombre de la clase la llamamos AcercaDe y debemos especificar que
hereda de la clase Activity (podemos presionar el botón Browse que está
en la misma fila de SuperClass y buscamos la clase Activity para que
disponga el nombre del paquete donde se encuentra):
El código que nos genera es:
package com.javaya.proyecto008;
import android.app.Activity;
public class AcercaDe extends Activity {
}
Debemos sobreescribir el método onCreate donde enlazamos esta clase
con el archivo XML que diseñamos.
Si no recordamos cual es la sintaxis exacta de este método podemos
también generarlo automáticamente con la ayuda de nuestro editor,
elegimos Source -> Override/Implement methods:
Buscamos el método onCreate y presionamos el botón Ok, ahora ya
tenemos la clase con el método onCreate:
package com.javaya.proyecto008;
import android.app.Activity;
import android.os.Bundle;
public class AcercaDe extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
}
}
Ahora solo falta llamar al método setContentView para enlazar el archivo
XML:
package com.javaya.proyecto008;
import android.app.Activity;
import android.os.Bundle;
public class AcercaDe extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.acercade);
}
}
Como podemos ver la clase AcercaDe hereda de la clase Activity e
implementa el método onCreate para enlazar el archivo XML que creamos
anteriormente.
4 - Otro paso fundamental es registrar el Activity en el archivo
"AndroidManifest.xml" que se encuentra en la raiz principal del proyecto.
Seleccionamos el archivo y activamos la pestaña : "Application",
presionamos el botón "add" y seleccionamos "Activity":
Por último seleccionamos en "Application Nodes" la actividad creada y
definimos la propiedad Name con el nombre de la clase que la
implementa (en nuestro caso se llama AcercaDe):
5 - Ahora implementaremos la funcionalidad en la actividad (Activity)
principal para que se active la segunda ventana.
Inicializamos la propiedad OnClick del objeto de la clase Button con el
valor "lanzar", este es el método que se ejecutará cuando se presione.
El código fuente de la actividad principal queda:
package com.javaya.proyecto008;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@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;
}
public void lanzar(View view) {
Intent i = new Intent(this, AcercaDe.class );
startActivity(i);
}
}
En el método lanzar creamos un objeto de la clase Intent y le pasamos
como parámetros la referencia del objeto de esta clase (this)y la
referencia del otro Activity (AcercaDe.class)
Llamamos posteriormente al método startActivity pasando el objeto de la
clase Intent (con esto ya tenemos en pantalla la ventana del segundo
Activity:
public void lanzar(View view) {
Intent i = new Intent(this, AcercaDe.class );
startActivity(i);
}
Si ejecutamos el programa podemos ver que cuando presionamos el
botón "Acerca De" aparece la segunda ventana donde se muestra el
TextView con el valor "Autor de este programa: Diego" y un botón con el
texto "Finalizar" (si presionamos este botón no sucede nada, esto debido a
que no hemos asociado ningún evento a dicho botón)
6 - Debemos codificar el evento OnClick de la segunda actividad.
Seleccionemos el botón "Finalizar" y definamos en la propiedad OnClick el
nombre de método que se ejecutará al presionarse el botón (en nuestro
caso lo llamaremos cerrar") :
El código fuente de la actividad AcercaDe queda:
package com.javaya.proyecto008;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
public class AcercaDe extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.acercade);
}
public void cerrar(View view) {
finish();
}
}
Cuando se presiona el botón finalizar llamando al método finish() que tiene
por objetivo liberar el espacio de memoria de esta actividad y pedir que se
active la actividad anterior.
Ahora nuestro programa está funcionando completamente:
Primer Activity:
Segundo Activity:
Ahora ya tenemos el programa funcionando en forma completa.
Problema propuesto
1. Realizar un programa que contenga dos Activity. En el primero que
solicite el ingreso de una clave (control Password) Si ingresa la clave
"abc123" activar el segundo Activity mostrando en un TextView un
mensaje de bienvenida (mostrar en un TextView si se ingrese la clave
incorrecta).
Llamar al proyecto: proyecto009.
En tiempo de ejecución los dos Activity deben mostrarse algo similar
a esto:
Lanzar un segundo "Activity" y
pasar parámetros.
Hemos visto en el concepto anterior que un programa puede tener más de
una ventana representando cada ventana con una clase que hereda de
Activity.
Una situación muy común es que la primer ventana necesite enviar datos a
la segunda para que a partir de estos proceda a efect uar una acción.
Problema:
Confeccionar un programa que solicite el ingrese de una dirección de un
sitio web y seguidamente abrir una segunda ventana que muestre dicha
página.
Para resolver este problema utilizaremos el control visual WebView que nos
permite mostrar el contenido de un sitio web.
Crearemos un nuevo proyecto llamado proyecto010 y lo almacenaremos
en el package name: com.androidya.proyecto010.
1 - Nuestro primer Activity tendrá la siguiente interfaz visual (ver controles y
ID de los controles):
Tenemos un control de tipo TextView (tv1), otro de tipo EditText y finalmente
otro de tipo Button (button1)debemos inicializar las propiedades de cada
uno de estos tres objetos.
El código fuente de esta Activity es:
package com.androidya.proyecto010;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
public class MainActivity extends Activity {
private EditText et1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1 = (EditText) findViewById(R.id.et1);
}
@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;
}
public void ejecutar(View view) {
Intent i = new Intent(this, Actividad2.class);
i.putExtra("direccion", et1.getText().toString());
startActivity(i);
}
}
Como podemos ver la diferencia con el concepto anterior es que
llamamos al método putExtra de la clase Intent. Tiene dos parámetros de
tipo String, en el primero indicamos el nombre del dato y en el segundo el
valor del dato:
public void ejecutar(View view) {
Intent i = new Intent(this, Actividad2.class );
i.putExtra("direccion", et1.getText().toString());
startActivity(i);
}
La segunda interfaz visual (recordemos que debemos presionar el botón
derecho sobre la carpeta layout y seleccionar la opción New -> Android
XML File) la llamaremos actividad2.xml:
En esta interfaz disponemos primero un control de tipo Button (button1)y
un objeto de la clase WebView (se encuentra en la pestaña "Composite") y
lo dejamos con el ID por defecto llamado webView1
Tenemos que crear el archivo Java donde dispondremos la funcionalidad
de la segunda ventana (Activity)
Creamos una nueva clase al proyecto desde el menú
contextual(presionamos el botón derecho del mouse sobre el paquete
com.androidya.proyecto010)
Al nombre de la clase la llamamos Actividad2 y debemos especificar que
hereda de la clase android.app.Activity
Ahora tenemos que modificar el archivo Java generado agregando del
método onCreate con esto:
package com.androidya.proyecto010;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
public class Actividad2 extends Activity {
private WebView webView1;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad2);
webView1 = (WebView) findViewById(R.id.webView1);
Bundle bundle = getIntent().getExtras();
webView1.loadUrl("http://" + bundle.getString("direccion"));
}
public void finalizar(View view) {
finish();
}
}
En esta clase definimos una variable de tipo Bundle y la inicializamos
llamando al método getExtras()de la clase Intent (esto lo hacemos para
recuperar el o los parámetros que envió la otra actividad (Activity)):
Bundle bundle=getIntent().getExtras();
webView1.loadUrl("http://"+bundle.getString("direccion"));
El método loadUrl de la clase WebView permite visualizar el contenido de
un sitio web.
Otro paso fundamental es registrar el Activity en el archivo
"AndroidManifest.xml" que se encuentra en la raiz principal del proyecto.
Seleccionamos el archivo y activamos la pestaña : "Application",
presionamos el botón "add" y seleccionamos "Activity".
Por último seleccionamos en "Application Nodes" la actividad creada y
definimos la propiedad Name con el nombre de la clase que la
implementa (en nuestro caso se llama Actividad2)
Como nuestra aplicación debe acceder a internet debemos hacer otra
configuración en el archivo "AndroidManifest.xml", debemos ir a la pestaña
"Permissions" presionar el botón "Add" y seleccionar "Uses Permissions":
Luego fijar en la propiedad name el valor android.permission.INTERNET
Ahora nuestro programa debería estar funcionando completamente.
La primer ventana debería ser algo similar a esto:
La segunda ventana debería ser algo similar a esto otro:
Adelanto de los temas de android (introduccion-10)

Contenu connexe

Similaire à Adelanto de los temas de android (introduccion-10)

Similaire à Adelanto de los temas de android (introduccion-10) (20)

Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
 
Manual de android parte 1
Manual de android parte 1Manual de android parte 1
Manual de android parte 1
 
manual de eclipse
manual de eclipse manual de eclipse
manual de eclipse
 
Tutorial eclipse3
Tutorial eclipse3Tutorial eclipse3
Tutorial eclipse3
 
Tutorial de eclipse
Tutorial de eclipseTutorial de eclipse
Tutorial de eclipse
 
Tutorial eclipse 1
Tutorial eclipse 1Tutorial eclipse 1
Tutorial eclipse 1
 
Empezando eclipse
Empezando eclipseEmpezando eclipse
Empezando eclipse
 
File (1)
File (1)File (1)
File (1)
 
MANUAL DE ECLIPSE
MANUAL DE ECLIPSEMANUAL DE ECLIPSE
MANUAL DE ECLIPSE
 
Tutorial Eclipse 2
Tutorial Eclipse 2Tutorial Eclipse 2
Tutorial Eclipse 2
 
File
FileFile
File
 
Manual de eclipse
Manual de eclipseManual de eclipse
Manual de eclipse
 
Tutorial eclipse
Tutorial eclipse Tutorial eclipse
Tutorial eclipse
 
Manual de eclipse
Manual de eclipseManual de eclipse
Manual de eclipse
 
Tutorial Eclipse
Tutorial EclipseTutorial Eclipse
Tutorial Eclipse
 
Tutorial 1
Tutorial 1Tutorial 1
Tutorial 1
 
Tutorial eclipse3
Tutorial eclipse3Tutorial eclipse3
Tutorial eclipse3
 
Tutorial de eclipse
Tutorial de eclipseTutorial de eclipse
Tutorial de eclipse
 
Tutorial Eclipse
Tutorial EclipseTutorial Eclipse
Tutorial Eclipse
 
Tutorial 1
Tutorial 1Tutorial 1
Tutorial 1
 

Plus de equipotresamp

Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2equipotresamp
 
Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2equipotresamp
 
Tabla comparativa de lmss
Tabla comparativa  de lmssTabla comparativa  de lmss
Tabla comparativa de lmssequipotresamp
 
Diapositivas de Elearning
Diapositivas de ElearningDiapositivas de Elearning
Diapositivas de Elearningequipotresamp
 

Plus de equipotresamp (7)

Tutorial de Java
Tutorial de JavaTutorial de Java
Tutorial de Java
 
Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2
 
Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2Glosario 50 definiciones Unidad 2
Glosario 50 definiciones Unidad 2
 
Equipo 3
Equipo 3Equipo 3
Equipo 3
 
50 Definiciones
50 Definiciones50 Definiciones
50 Definiciones
 
Tabla comparativa de lmss
Tabla comparativa  de lmssTabla comparativa  de lmss
Tabla comparativa de lmss
 
Diapositivas de Elearning
Diapositivas de ElearningDiapositivas de Elearning
Diapositivas de Elearning
 

Dernier

Algoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdfAlgoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdfdarosario3d
 
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdfHerramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdfdaa100407
 
03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdf03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdfRodrigo Cerón
 
02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdf02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdfRodrigo Cerón
 
Virus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdfVirus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdfMiSpotify
 
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...AlexaRamirez39
 
Los mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizarLos mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizarjosuesj13
 
Simuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdfSimuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdfLeonardoOa4
 
Formato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdfFormato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdfjuanrubenc78
 

Dernier (9)

Algoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdfAlgoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdf
 
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdfHerramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
 
03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdf03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdf
 
02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdf02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdf
 
Virus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdfVirus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdf
 
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
 
Los mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizarLos mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizar
 
Simuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdfSimuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdf
 
Formato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdfFormato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdf
 

Adelanto de los temas de android (introduccion-10)

  • 1. Instalación de Java Para poder hacer este curso debemos instalar el compilador de Java y la máquina virtual de Java. Estas herramientas las podemos descargar de: Java SE Development Kit (JDK). Una vez que tenemos el JDK (Java Development Kit) procedemos a instalarlo: Instalación de java La versión a instalar conviene que sea la última (en este momento disponemos la versión 6. Aceptamos los términos:
  • 2. Términos de instalación de java Haremos la instalación por defecto por lo que presionamos el botón next:
  • 3. Configuración instalación de java Esperamos unos minutos mientras se procede a la instalación de Java: Proceso instalación de java Luego aparece un diálogo donde debemos especificar el directorio donde almacenar el JRE y también procedemos a efectuar la instalación por defecto presionando el botón "next":
  • 4. Proceso instalación de JRE Una vez finalizado el proceso de instalación debe aparecer un diálogo similar a este: Fin de instalación java Instalación del editor Eclipse En el concepto anterior procedimos a instalar el lenguaje Java (con dichas herramientas podemos ejecutar y compilar programas codificados en java), pero ahora necesitamos instalar el Eclipse que es un editor para codificar los programas (si bien podemos utilizar otros editores, nosotros utilizaremos este para seguir el curso) Para la descarga del editor Eclipse lo hacemos del sitio: Eclipse IDE for Java Developers.(Esta es la que más se adecua a nuestro estudio) Una vez que descargamos el Eclipse su instalación es muy sencilla, creamos una carpeta llamada eclipse y procedemos a descomprimir el archivo descargado indicando solamente la unidad donde se instala (ejemplo c:).
  • 5. Ahora nos dirigimos a la carpeta donde se instalaron los archivos y procedemos a ejecutar el programa eclipse.exe Primero aparece un mensaje de inicio del Eclipse: Inicio eclipse Luego la primera vez que ejecutemos el editor Eclipse aparece un diálogo para seleccionar la carpeta donde se almacenarán los programas que desarrollaremos (podemos crear una carpeta donde almacenaremos todos los proyectos que desarrollaremos en el curso):
  • 6. Carpeta inicio eclipse Luego de configurar la carpeta donde se crearán los proyecto aparece el editor con una pantalla de presentación (Welcome): Pantalla inicial eclipse
  • 7. Esta ventana de bienvenida la podemos cerrar seleccionando el ícono: "Workbench", con lo que aparece el entorno de trabajo del Eclipse (si queremos nuevamente ver la ventana de bienvenida podemos activarla desde el menú de opciones: Help -> Welcome" El entorno de trabajo del Eclipse es: Entorno de trabajo eclipse Descarga de herramientas necesarios para programar para Android. 1 - Primero debemos instalar el compilador de Java y la máquina virtual. Estas herramientas las podemos descargar de: Java SE Development Kit (JDK).
  • 8. 2 - El segundo paso es la descarga del ADT (que contiene todo lo necesario para comenzar el desarrollo de aplicacionesen Android), lo hacemos del sitio (descargar el de 32 o 64 bit según el JDK de Java que ya tenemos instalado del paso anterior): Android SDK. 3 - El tercer paso es descomprimir el ADT, por ejemplo en la raiz de c: 4 - El cuarto paso es ejecutar el Eclipse: Nos dirigimos a la carpetas creadas cuando descomprimimos el ADT y vemos que tenemos dos carpetas: eclipse sdk Entramos a la carpeta eclipse y ejecutamos eclipse.exe Debe aparecer una ventana de inicio similar a esta: Nos pide seguidamente la carpeta donde deseamos ir almacenando los proyectos que desarrollemos:
  • 9. Ahora ya estamos en el entorno que tiene una vista similar a esta (recordemos que es el Eclipse con algunos cambios desarrollados por Google), la primera vez que ingresamos nos aparece una pantalla de bienvenida pero podemos cerrarla haciendo clic en la cruz de la pestaña y ya tenemos el entorno de trabajo: 7 - Por último debemos crear el AVD (Android Virtual Device) para ello nos dirigimos a la opción Window -> Android Virtual Device Manager. En este diálogo debemos crear el emulador de Android (presionamos el botón New...):
  • 10. En este diálogo asignamos un nombre a nuestro AVD, elegimos un dispositivo (que no sea tan grande ya que no entrara en pantalla, podemos probar con WVGA(480,800)), lo enlazamos con la versión de SDK respectivo, fijamos un
  • 11. tamaño al SD Card: Ya tenemos todo configurado para el desarrollo de aplicacionesAndroid. Pasos para crear el primer proyecto Android. Ya se encuentra disponible el nuevotutorial para aprender android con el nuevo entorno Android Studio propuesto por Google y que remplaza a Eclipse. Ya tenemos todo lo necesario instalado para implementar el primer proyecto. Desde el menú de opciones: File -> New -> Android Application Project
  • 12. creacion proyecto android En este diálogo especificamos el nombre de la aplicación y proyecto (pueden ser iguales) y el nombre del paquete java donde se almacenarán los archivos java que creemos (normalmente la url de su empresa al revés). Ahora empezaremos a presionar el botón next para pasar a otras configuraciones de nuestra aplicación, por el momento dejaremos todos los valores por defecto en cada una de los diálogos que aparece (son 5 diálogos actualmente), en el último diálogo debe aparecer el botón "Finish" el cual presionamos. El ADT nos genera todos los directorios y archivos básicospara iniciar nuestro proyecto:
  • 13. Archivos y directorios de un proyecto android
  • 14. No haremos en este momento un análisis del significado y objetivo de cada uno de estos directorios y archivos generados, sino a medida que avancemos con este curso iremos viendoen forma puntual y profunda. La interfaz visual de nuestro programa para Android se almacena en un archivo XML en la carpeta res, subcarpeta layout y el archivo se llama activity_main.xml. En esta carpeta tenemos creada nuestra primer pantalla. Al seleccionar estearchivo el ADT nos permite visualizar el contenido en "vista de diseño (Graphical Layout)": archivo xml graphical layout Si seleccionamos la otra pestaña podemos visualizar el archivo activity_main.xml en formato de texto:
  • 15. Archivoxml en modo texto El ADT ya insertó un control de tipo RelativeLayout que permite ingresar controles visuales alineados a los bordes y a otros controles que haya en la ventana (más adelante analizaremos este layout) Ya veremos que podemos modificar todo este archivo para que se adapte a la aplicación que queremos desarrollar. Luego contenido en el control RelativeLayout hay otro control de tipo TextView que es básicamente una etiqueta o label que mostrará en pantalla el valor almacenado en la propiedad text. Podemos modificar directamente el archivoxml o en "vista de diseño" modificar los valores de las propiedades. Elegimos nuevamente la pestaña "Graphical Layout" y seleccionamos el TextView con el mouse y vemos que en la parte derecha de la pantalla aparece una ventana llamada "properties":
  • 16. properties Y estando seleccionado el TextView buscamos la propiedad Text y cargamos: "Mi primer programa para Android" y presionamos enter, podemos ver que se actualiza la vista:
  • 17. properties Con esto ya podemos probar nuestra primer aplicación para un dispositivo Android. SELECCIONAMOS con el mouse en la ventana de la izquierda (Package Explorer) el proyecto001 y presionamos el ícono de Run (triángulo verde) o desde el menú. Seleccionamos que se ejecute como aplicación "Android Application". Ahora se abrirá el AVD(Android Virtual Device) esto tarda bastante tiempo, es muy importante recordar que luego de ver ejecutándose el programa NO debemos cerrar el AVD para que la próxima ejecución se inicie más rápido (podemos minimizar el AVD) Ahora podemos ver nuestra primer aplicación corriendo en el emulador de Android: AVD con programa Android en ejecucion Como hemos visto el ADT nos genera en forma automática todas las carpetas y archivosbásicos que necesitamos en un principio. En el siguiente concepto
  • 18. podremos empezar a programar verdaderamente. El único objetivo de este ejercicio es recordar los pasos para crear un proyecto. Problemas con la última versión del entorno de desarrollode Android ADT
  • 19. Si cuando crea un proyecto para Android se encuentra que en la carpeta layout se crean dos archivos XML en lugar de uno, es que tiene la último versión y este tutorial todavía no está adaptado: ADT actual Con esta versión del ADT Google propone utilizar Fragment aunque realicemos un programa "Hola Mundo", hasta que se actualice este tutorial podemos realizar estos pasos para trabajar sin Fragment en los ejercicios iniciales. Veamos entonces que pasos debemos dar para dejar el proyecto que se adapte a todos los ejercicios propuestos en esta web y demás libros que se hayan publicado hasta marzo de 2014:
  • 20. Pasos Borrar el archivo activty_main.xml de la carpeta layout de nuestro proyecto (presionamos el botón derecho del mouse sobre el archivo y seleccionamos Delete:
  • 21. ADT actual Renombramos el archivo fragment_main.xml por el el nombre activity_main.xml presionando el botón derecho del mouse y seleccionando la opción Refactor - > Rename y cargamos en dicho dialogo activity_main.xml (por más que nos muestre un mensaje de warning lo ejecutamos al cambio):
  • 22. ADT actual Ahora nos dirigimos a la carpeta src y entramos al paquete donde se encuentra el archivo MainActivity.java (en este momento nos está mostrando un mensaje de error que lo solucionaremos) ADT actual Ahora borramos la clase PlaceholderFragment:
  • 23. ADT actual Y las cinco líneas que crean el objeto de la clase PlaceholderFragment: ADT actual
  • 24. Es decir que nuestro archivo MainActivity queda con la siguiente estructura(como vemos cuando lo grabamos ahora desaparecen los errores y podemos ejecutar nuestro programa): ADT actual Captura del clic de un botón. Problema: Realizar la carga de dos números en controles de tipo EditText. Mostrar un mensaje que solicite la carga de los valores. Disponer un Button para sumar los dos valores ingresados. Mostrar el resultado en un tercer TextView.
  • 25. La interfaz visual debe quedar algo semejante a esto: Veamos paso a paso como creamos la interfaz visual de nuestro programa. Primero borramos el TextView que aparece por defecto cuando se crea un proyecto con el ADT. Ahora desde la ventana "Palette" seleccionamos de la pestaña "Form Widgets" el control "TextView" y lo arrastramos a la ventana de diseño de nuestra interfaz:
  • 26. Ahora lo seleccionamos y en la ventana de propiedades especificamos la propiedad text (como habíamos visto anteriormente)disponemos el texto
  • 27. "Ingrese el primer valor:": También vamos a especificar la propiedad "Id", la misma aparece primera en la paleta de propiedades y le asignaremos el valor @+id/tv1 (el nombre es el que se indica luego de la barra es decir cambiamos textView1 por tv1)Cuidado de no borrar @+id/
  • 28. Hemos entonces asignado como nombre a este objeto: tv1 (recordemos que se trata de un objeto de la clase TextView) Ahora de la paleta de componentes seleccionamos la pestaña "Text Fields" y arrastramos el primero (el que tiene la etiqueta abc)
  • 29. En la ventana de properties estando seleccionado el EditText configuramos la propiedad Id... con el nombre et1 (este nombre haremos referencia posteriormente desde Java) Efectuamos los mismos pasos para crear el segundo TextView y EditText (inicializamos las propiedades respectivas) Definimos los id con los nombres tv2 y et2, el resultado visual debe ser algo semejante a esto:
  • 30. De la pestaña "Form Widgets" arrastramos un control de tipo "Button":
  • 31. Inicializamos la propiedad text con el texto "Sumar" y la propiedad id la dejamos con el valor ya creado llamado "button1". Para terminar con nuestra interfaz visual arrastramos un tercer objeto de tipo TextView y definimos la propiedad id con el valor "tv3" y la propiedad text con el texto "resultado", recordemos que la interfaz final debe ser semejante a esta:
  • 32. Si en este momento ejecutamos la aplicación aparece la interfaz visual correctamente pero cuando presionemos el botón no mostrará la suma. Es fundamental una vez finalizada la interfaz visual proceder a grabarla (icono de los diskettes) o la opción File->Save para que se actualicen los archivos que se generan automáticamente. Hasta ahora hemos trabajado solo con el archivo xml (activity_main.xml) donde se definen los controles visuales de la ventana que estamos creando. Abrimos seguidamente el archivo MainActivity.java que lo podemos ubicar en la carpeta src: La clase MainActivity hereda de la clase Activity. La clase Activity representa una ventana de Android y tiene todos los métodos necesarios para crear y mostrar los objetos que hemos dispuesto en el archivo xml. El código fuente de la clase MainActivity.java es:
  • 33. package com.javaya.proyecto002; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @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; } } Como mínimo se debe sobrescribir el método onCreate heredado de la clase Activity donde procedemos a llamar la método setContentView pasando como referencia una valor almacenado en una constante llamada activity_main contenida en una clase llamada layout que a su vez la contiene una clase llamada R (veremos más adelante que el ADT se encarga de crear la clase R en forma automática y sirve como puente entre el archivo xml y nuestra clase MainActivity) Luego veremos el otro método onCreateOptionsMenu. Captura de eventos. Ahora viene la parte donde definimos variables en java donde almacenamos las referencias a los objetos definidos en el archivo XML. Definimos tres variables, dos de tipo EditText y finalmente una de tipo TextView (estas dos clases se declaran en el paquete android.widget, es necesario importar dichas clases para poder definir las variables de dichas clases): package com.javaya.proyecto002;
  • 34. import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends Activity { private EditText et1,et2; private TextView tv3; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @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; } } La forma más fácil de importar las clases EditText y TextView es tipear las dos líneas: private EditText et1,et2; private TextView tv3; y luego presionar las teclas Control-Shift-O Esto hace que se escriban automáticamente los dos import: import android.widget.EditText; import android.widget.TextView; Los nombres que le dí a los objetos en este caso coinciden con la propiedad id (no es obligatorio): private EditText et1,et2; private TextView tv3;
  • 35. No definimos TextView para los dos mensajes "Ingrese el primer valor" e "Ingrese el segundo valor" ya que no necesitaremos interactuar con ellos. También veremos que el objeto de la clase Button no es necesario definir un atributo sino que desde el archivo XML inicializaremos la propiedad OnClick. En el método onCreate debemos enlazar estas variables con los objetos definidos en el archivo XML, esto se hace llamando al método findViewById: public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.main); et1=(EditText)findViewById(R.id.et1); et2=(EditText)findViewById(R.id.et2); tv3=(TextView)findViewById(R.id.tv3); } Al método findViewById debemos pasar la constante creada en la clase R (recordemos que se crea automáticamente esta clase) el nombre de la constante si debe ser igual con el nombre de la propiedad del objeto creado en el archivo XML. Como la clase findViewById retorna una clase de tipo View luego debemos utilizar el operador cast (es decir le antecedemos entre paréntesis el nombre de la clase) Ya tenemos almacenados en las variables las referencias a los tres objetos que se crean al llamar al método:setContentView(R.layout.main); . Ahora planteamos el método que se ejecutará cuando se presione el botón (el método debe recibir como parámetro un objeto de la clase View) En nuestro ejemplo lo llamé sumar: package com.javaya.proyecto002; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends Activity {
  • 36. private EditText et1,et2; private TextView tv3; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); et1=(EditText)findViewById(R.id.et1); et2=(EditText)findViewById(R.id.et2); tv3=(TextView)findViewById(R.id.tv3); } @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 sumar(View view) { } } Debemos importar lar clase View (Control-Shift-O) Ahora debemos ir al archivo XML e inicializar la propiedad OnClick del objeto button1 con el nombre del método que acabamos de crear (este paso es fundamental para que el objeto de la clase Button pueda llamar al método sumar que acabamos de crear):
  • 37. Finalmente implementaremos la lógica para sumar los dos valores ingresados en los controles EditText: public void sumar(View view) { String valor1=et1.getText().toString(); String valor2=et2.getText().toString(); int nro1=Integer.parseInt(valor1); int nro2=Integer.parseInt(valor2); int suma=nro1+nro2; String resu=String.valueOf(suma); tv3.setText(resu); } Extraemos el texto de los dos controles de tipo EditText y los almacenamos en dos variables locales de tipo String. Convertimos los String a tipo entero, los sumamos y el resultado lo enviamos al TextView donde se muestra la suma (previo a convertir la suma a String)
  • 38. La clase completa queda entonces como: package com.javaya.proyecto002; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends Activity { private EditText et1,et2; private TextView tv3; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); et1=(EditText)findViewById(R.id.et1); et2=(EditText)findViewById(R.id.et2); tv3=(TextView)findViewById(R.id.tv3); } @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 sumar(View view) { String valor1=et1.getText().toString(); String valor2=et2.getText().toString(); int nro1=Integer.parseInt(valor1); int nro2=Integer.parseInt(valor2); int suma=nro1+nro2; String resu=String.valueOf(suma); tv3.setText(resu); }
  • 39. } Si ejecutamos nuestro programa podemos ver ahora que luego de cargar dos valores al presionar el botón aparece en el tercer TextView el resultado de la suma de los dos EditText: Controles RadioGroup y RadioButton. El objetivo de este concepto 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
  • 40. 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):
  • 41. 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
  • 42. 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.
  • 43. 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); et2=(EditText)findViewById(R.id.et2); tv3=(TextView)findViewById(R.id.tv3); r1=(RadioButton)findViewById(R.id.r1); r2=(RadioButton)findViewById(R.id.r2); } @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(); String valor2=et2.getText().toString(); int nro1=Integer.parseInt(valor1); int nro2=Integer.parseInt(valor2); if (r1.isChecked()==true) { int suma=nro1+nro2; String resu=String.valueOf(suma); tv3.setText(resu); } else if (r2.isChecked()==true) { int resta=nro1-nro2; String resu=String.valueOf(resta); tv3.setText(resu);
  • 44. } } } 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: r1=(RadioButton)findViewById(R.id.r1); r2=(RadioButton)findViewById(R.id.r2); 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: public void operar(View view) { String valor1=et1.getText().toString(); String valor2=et2.getText().toString(); int nro1=Integer.parseInt(valor1); int nro2=Integer.parseInt(valor2); if (r1.isChecked()==true) { int suma=nro1+nro2; String resu=String.valueOf(suma); tv3.setText(resu); } else if (r2.isChecked()==true) { int resta=nro1-nro2; String resu=String.valueOf(resta); tv3.setText(resu); } } Control CheckBox. El objetivo de este concepto es practicar lo visto hasta ahora e incorporar el control visual CheckBox
  • 45. 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 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":
  • 46. No olvidemos inicializar la propiedad OnClick del objet o 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.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.CheckBox; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends Activity {
  • 47. private EditText et1,et2; private TextView tv3; private CheckBox checkBox1,checkBox2; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); et1=(EditText)findViewById(R.id.et1); et2=(EditText)findViewById(R.id.et2); tv3=(TextView)findViewById(R.id.tv3); checkBox1=(CheckBox)findViewById(R.id.checkBox1); checkBox2=(CheckBox)findViewById(R.id.checkBox2); } @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(); String valor2=et2.getText().toString(); int nro1=Integer.parseInt(valor1); int nro2=Integer.parseInt(valor2); String resu=""; if (checkBox1.isChecked()==true) { int suma=nro1+nro2; resu="La suma es: "+ suma; } if (checkBox2.isChecked()==true) { int resta=nro1-nro2; resu=resu + " La resta es: "+ resta; } tv3.setText(resu); } }
  • 48. 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: checkBox1=(CheckBox)findViewById(R.id.checkBox1); checkBox2=(CheckBox)findViewById(R.id.checkBox2); 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=""; if (checkBox1.isChecked()==true) { int suma=nro1+nro2; resu="La suma es: "+ suma; } if (checkBox2.isChecked()==true) { int resta=nro1-nro2; 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. Problema: Realizar la carga de dos números en controles de tipo EditText. Mostrar un mensaje que solicite la carga de los valores. Disponer un control de tipo Spinner que permita seleccionar si queremos sumar, restar, multiplicar o
  • 49. dividir dichos valores. Finalmente mediante un control de tipo Button efectuamos la operación respectiva. Mostramos el resultado en un TextView. 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:
  • 50. 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: package com.javaya.proyecto005; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.ArrayAdapter; import android.widget.EditText; import android.widget.Spinner; import android.widget.TextView; public class MainActivity extends Activity { private Spinner spinner1; private EditText et1,et2;
  • 51. private TextView tv3; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); et1=(EditText)findViewById(R.id.et1); et2=(EditText)findViewById(R.id.et2); tv3=(TextView)findViewById(R.id.tv3); spinner1 = (Spinner) findViewById(R.id.spinner1); String []opciones={"sumar","restar","multiplicar","dividir"}; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, opciones); spinner1.setAdapter(adapter); } @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(); String valor2=et2.getText().toString(); int nro1=Integer.parseInt(valor1); int nro2=Integer.parseInt(valor2); String selec=spinner1.getSelectedItem().toString(); if (selec.equals("sumar")) { int suma=nro1+nro2; String resu=String.valueOf(suma); tv3.setText(resu); } else if (selec.equals("restar")) { int resta=nro1-nro2; String resu=String.valueOf(resta); tv3.setText(resu); } else if (selec.equals("multiplicar")) { int multi=nro1*nro2;
  • 52. 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> adapter = new 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:
  • 53. 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; String resu=String.valueOf(suma); tv3.setText(resu); } else if (selec.equals("restar")) { int resta=nro1-nro2; String resu=String.valueOf(resta); 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.
  • 54. 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: package com.javaya.proyecto006; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ArrayAdapter; import android.widget.ListView;
  • 55. import android.widget.TextView; public class MainActivity extends Activity { 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 TextView tv1; private ListView lv1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tv1=(TextView)findViewById(R.id.tv1); 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 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; } } 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:
  • 56. private TextView tv1; private ListView lv1; En el método onCreate obtenemos la referencia a los dos objetos: tv1=(TextView)findViewById(R.id.tv1); 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> adapter = new 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:
  • 57. Control ImageButton. Hemos visto la creación de objetos de la clase Button, ahora veremos otra clase muy similar a la anterior
  • 58. llamada ImageButton que tiene la misma filosofía de manejo con la diferencia que puede mostrar una imagen en su superficie. Problema: Disponer un objeto de la clase ImageButton que muestre una imagen de un teléfono. Cuando se presione mostrar en un control TextView el mensaje "Llamando". Primero crearemos un proyecto llamado proyecto007 y luego debemos buscar una imagen en formato png que represente un telefono de 50*50 píxeles. Nombre del archivo: telefono.png Ahora copiamos el archivo a la carpeta de recursos de nuestro proyecto : resdrawable-mdpi Desde el Eclipse en la ventana "Package Explorer" navegamos hasta la carpeta res y entramos al directorio drawable-mdpi y vemos que todavía no está el archivo que acabamos de copiar. Para que se actualice el proyecto presionamos el botón derecho del mouse sobre esta carpeta y seleccionamos la opción "Refresh": Vemos que se actualizó el contenido de la carpeta y aparece la imagen que copiamos previamente. Ahora insertaremos el objeto de la clase ImageButton en el formulario de nuestra aplicación. La clase ImageButton se encuentra en la pestaña "Image & Media":
  • 59. Aparece un diálogo de donde seleccionamos el archivo telefono. Luego de esto podemos ver que la superficie del objeto de la clase ImageButton muestra la imagen que almacenamos previamente en la carpeta de res. Si queremos cambiar el archivo a mostrar debemos modificar la propiedad src (aparece nuevamente el diálogo que nos permite seleccionar la imagen) Inicializamos la propiedad ID con el nombre bi1 Agreguemos un TextView a nuestra aplicación y configuremos sus propiedades ID (con tv1)y text. Luego la interfaz visual debe ser similar a:
  • 60. Código fuente: package com.javaya.proyecto007; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.TextView;
  • 61. public class MainActivity extends Activity { private TextView tv1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tv1=(TextView)findViewById(R.id.tv1); } @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 ImageButton public void llamar(View view) { tv1.setText("Llamando"); } } Definimos el atributo de tipo TextView: TextView tv1; Enlazamos el control definido en el archivo XML y la variable de java: tv1=(TextView)findViewById(R.id.tv1); Implementamos el método que se ejecutará cuando se presione el el objeto de la clase ImageButton: public void llamar(View view) { tv1.setText("Llamando"); } No olvidemos inicializar la propiedad OnClick del objeto ib1 con el nombre del método "llamar" (recordemos que esto lo hacemos accediendo a la propiedad On Click en la ventana de "Properties") Comentarios extras de este control. Cuando copiamos el archivo lo hicimos a la carpeta: drawable-mdpi
  • 62. Pero vimos que hay otras carpetas con nombres similares: drawable-ldpi drawable-hdpi El objetivo de estas otras carpetas es guardar las mismas imágenes pero con una resolución mayor si la guardamos en drawable-hdpi y con una resolución menor al guardarla en drawable-ldpi. Esto se hace si queremos que nuestra aplicación sea más flexible si se ejecuta en un celular, en un tablet, en un televisor etc. Debemos tener en cuenta estos tamaños: En la carpeta res/drawable-mdpi/ (guardamos la imagen con el tamaño original) En la carpeta res/drawable-ldpi/ (guardamos la imagen con el tamaño del 75% con respecto al de la carpeta drawable- mdpi) En la carpeta res/drawable-hdpi/ (guardamos la imagen con el tamaño del 150% con respecto al de la carpeta drawable- mdpi) Lanzar un segundo "Activity". Hasta ahora todos los programas han tenido una sola ventana (Activity) Es muy común que una aplicación tenga más de una ventana. Para implementar esto en Android debemos plantear una segunda clase que también herede de la clase Activity (tengamos en cuenta que cuando utilizamos ADT automáticamente cuando creamos un proyecto nos crea el archivo XML y java de la primer Activity) Vamos a ver en este concepto los pasos que debemos dar para crear otro Activity y como activarlo desde el Activity principal. Problema: Confeccionar un programa que muestre en la ventana principal un botón que al ser presionado muestre otra ventana (Activity)mostrando un
  • 63. TextView con el nombre del programador de la aplicación y un botón para cerrar la ventana o actividad. 1 - Primero creamos un nuevo proyecto que lo llamaremos proyecto008 y en la ventana principal creamos la siguiente interfaz: Es decir que nosotros queremos que cuando se presione el botón "Acerca De" nos abra otra ventana (Activity)y nos muestre el nombre del programador. 2 - Ahora tenemos que crear el segundo Activity. Crearemos primero el archivo XML. Presionamos el botón derecho sobre la carpeta layout y
  • 64. seleccionaremos la opción New -> Android XML File Aquí tenemos que definir el nombre del archivo XML (debe estar en minúsculas), lo llamaremos acercade:
  • 65. Implementamos ahora la interfaz visual de esta segunda ventana (Activity) disponiendo un objeto de la clase TextView donde mostramos el nombre del autor de este programa y un Button para cerrar la ventana.
  • 66. 3 - Tenemos ahora que crear el archivo Java donde dispondremos la funcionalidad de la segunda ventana (Activity) Creamos una nueva clase al proyecto desde el menú contextual(presionamos el botón derecho del mouse sobre el paquete com.androidya.proyecto008): Al nombre de la clase la llamamos AcercaDe y debemos especificar que hereda de la clase Activity (podemos presionar el botón Browse que está en la misma fila de SuperClass y buscamos la clase Activity para que disponga el nombre del paquete donde se encuentra):
  • 67. El código que nos genera es: package com.javaya.proyecto008; import android.app.Activity; public class AcercaDe extends Activity { } Debemos sobreescribir el método onCreate donde enlazamos esta clase con el archivo XML que diseñamos.
  • 68. Si no recordamos cual es la sintaxis exacta de este método podemos también generarlo automáticamente con la ayuda de nuestro editor, elegimos Source -> Override/Implement methods: Buscamos el método onCreate y presionamos el botón Ok, ahora ya tenemos la clase con el método onCreate: package com.javaya.proyecto008; import android.app.Activity; import android.os.Bundle; public class AcercaDe extends Activity {
  • 69. @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); } } Ahora solo falta llamar al método setContentView para enlazar el archivo XML: package com.javaya.proyecto008; import android.app.Activity; import android.os.Bundle; public class AcercaDe extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.acercade); } } Como podemos ver la clase AcercaDe hereda de la clase Activity e implementa el método onCreate para enlazar el archivo XML que creamos anteriormente. 4 - Otro paso fundamental es registrar el Activity en el archivo "AndroidManifest.xml" que se encuentra en la raiz principal del proyecto. Seleccionamos el archivo y activamos la pestaña : "Application", presionamos el botón "add" y seleccionamos "Activity":
  • 70. Por último seleccionamos en "Application Nodes" la actividad creada y definimos la propiedad Name con el nombre de la clase que la implementa (en nuestro caso se llama AcercaDe): 5 - Ahora implementaremos la funcionalidad en la actividad (Activity) principal para que se active la segunda ventana. Inicializamos la propiedad OnClick del objeto de la clase Button con el valor "lanzar", este es el método que se ejecutará cuando se presione. El código fuente de la actividad principal queda:
  • 71. package com.javaya.proyecto008; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.View; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @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; } public void lanzar(View view) { Intent i = new Intent(this, AcercaDe.class ); startActivity(i); } } En el método lanzar creamos un objeto de la clase Intent y le pasamos como parámetros la referencia del objeto de esta clase (this)y la referencia del otro Activity (AcercaDe.class) Llamamos posteriormente al método startActivity pasando el objeto de la clase Intent (con esto ya tenemos en pantalla la ventana del segundo Activity: public void lanzar(View view) { Intent i = new Intent(this, AcercaDe.class ); startActivity(i); } Si ejecutamos el programa podemos ver que cuando presionamos el botón "Acerca De" aparece la segunda ventana donde se muestra el TextView con el valor "Autor de este programa: Diego" y un botón con el texto "Finalizar" (si presionamos este botón no sucede nada, esto debido a que no hemos asociado ningún evento a dicho botón)
  • 72. 6 - Debemos codificar el evento OnClick de la segunda actividad. Seleccionemos el botón "Finalizar" y definamos en la propiedad OnClick el nombre de método que se ejecutará al presionarse el botón (en nuestro caso lo llamaremos cerrar") : El código fuente de la actividad AcercaDe queda: package com.javaya.proyecto008; import android.app.Activity; import android.os.Bundle; import android.view.View; public class AcercaDe extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.acercade); } public void cerrar(View view) { finish(); } } Cuando se presiona el botón finalizar llamando al método finish() que tiene por objetivo liberar el espacio de memoria de esta actividad y pedir que se active la actividad anterior. Ahora nuestro programa está funcionando completamente: Primer Activity:
  • 73. Segundo Activity: Ahora ya tenemos el programa funcionando en forma completa.
  • 74. Problema propuesto 1. Realizar un programa que contenga dos Activity. En el primero que solicite el ingreso de una clave (control Password) Si ingresa la clave "abc123" activar el segundo Activity mostrando en un TextView un mensaje de bienvenida (mostrar en un TextView si se ingrese la clave incorrecta). Llamar al proyecto: proyecto009. En tiempo de ejecución los dos Activity deben mostrarse algo similar a esto:
  • 75. Lanzar un segundo "Activity" y pasar parámetros. Hemos visto en el concepto anterior que un programa puede tener más de una ventana representando cada ventana con una clase que hereda de Activity. Una situación muy común es que la primer ventana necesite enviar datos a la segunda para que a partir de estos proceda a efect uar una acción. Problema: Confeccionar un programa que solicite el ingrese de una dirección de un sitio web y seguidamente abrir una segunda ventana que muestre dicha página. Para resolver este problema utilizaremos el control visual WebView que nos permite mostrar el contenido de un sitio web. Crearemos un nuevo proyecto llamado proyecto010 y lo almacenaremos en el package name: com.androidya.proyecto010. 1 - Nuestro primer Activity tendrá la siguiente interfaz visual (ver controles y ID de los controles):
  • 76. Tenemos un control de tipo TextView (tv1), otro de tipo EditText y finalmente otro de tipo Button (button1)debemos inicializar las propiedades de cada uno de estos tres objetos. El código fuente de esta Activity es: package com.androidya.proyecto010; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.widget.EditText; public class MainActivity extends Activity { private EditText et1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
  • 77. et1 = (EditText) findViewById(R.id.et1); } @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; } public void ejecutar(View view) { Intent i = new Intent(this, Actividad2.class); i.putExtra("direccion", et1.getText().toString()); startActivity(i); } } Como podemos ver la diferencia con el concepto anterior es que llamamos al método putExtra de la clase Intent. Tiene dos parámetros de tipo String, en el primero indicamos el nombre del dato y en el segundo el valor del dato: public void ejecutar(View view) { Intent i = new Intent(this, Actividad2.class ); i.putExtra("direccion", et1.getText().toString()); startActivity(i); } La segunda interfaz visual (recordemos que debemos presionar el botón derecho sobre la carpeta layout y seleccionar la opción New -> Android XML File) la llamaremos actividad2.xml:
  • 78. En esta interfaz disponemos primero un control de tipo Button (button1)y un objeto de la clase WebView (se encuentra en la pestaña "Composite") y lo dejamos con el ID por defecto llamado webView1 Tenemos que crear el archivo Java donde dispondremos la funcionalidad de la segunda ventana (Activity) Creamos una nueva clase al proyecto desde el menú contextual(presionamos el botón derecho del mouse sobre el paquete com.androidya.proyecto010) Al nombre de la clase la llamamos Actividad2 y debemos especificar que hereda de la clase android.app.Activity Ahora tenemos que modificar el archivo Java generado agregando del método onCreate con esto: package com.androidya.proyecto010; import android.app.Activity; import android.os.Bundle;
  • 79. import android.view.View; import android.webkit.WebView; public class Actividad2 extends Activity { private WebView webView1; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.actividad2); webView1 = (WebView) findViewById(R.id.webView1); Bundle bundle = getIntent().getExtras(); webView1.loadUrl("http://" + bundle.getString("direccion")); } public void finalizar(View view) { finish(); } } En esta clase definimos una variable de tipo Bundle y la inicializamos llamando al método getExtras()de la clase Intent (esto lo hacemos para recuperar el o los parámetros que envió la otra actividad (Activity)): Bundle bundle=getIntent().getExtras(); webView1.loadUrl("http://"+bundle.getString("direccion")); El método loadUrl de la clase WebView permite visualizar el contenido de un sitio web. Otro paso fundamental es registrar el Activity en el archivo "AndroidManifest.xml" que se encuentra en la raiz principal del proyecto. Seleccionamos el archivo y activamos la pestaña : "Application", presionamos el botón "add" y seleccionamos "Activity". Por último seleccionamos en "Application Nodes" la actividad creada y definimos la propiedad Name con el nombre de la clase que la implementa (en nuestro caso se llama Actividad2) Como nuestra aplicación debe acceder a internet debemos hacer otra configuración en el archivo "AndroidManifest.xml", debemos ir a la pestaña "Permissions" presionar el botón "Add" y seleccionar "Uses Permissions":
  • 80. Luego fijar en la propiedad name el valor android.permission.INTERNET Ahora nuestro programa debería estar funcionando completamente. La primer ventana debería ser algo similar a esto:
  • 81. La segunda ventana debería ser algo similar a esto otro: