You are on page 1of 33

Un ejemplo bsico de aplicacin para Android

Vamos a ver los pasos bsicos para crear una aplicacin para un smartphone o
tablet Android. Dar por sentado que ya est instalado el JDK, Eclipse y el
SDK de Android. Si no fuera as, puedes seguir estos pasos.
Para llegar a algn sitio, primero conviene saber lo que buscamos. En nuestro
caso, vamos a hacer ua aplicacin que tenga algn botn, alguna casilla
para introducir texto y alguna etiqueta de texto. Si queremos que, adems de
usar componentes bsicos, sirva para algo til, podemos orientarla por ejemplo
a un programa de realizacin de sumas sencillas, pensado para nios de corta
edad.
Podemos hacer un prototipo con alguna herramienta de diseo, como "The
Pencil Project", que nos ayude a planificar el diseo que buscamos. Podra ser
as:

En primer lugar, deberemos abrir Eclipse y crear un nuevo proyecto:

Obviamente, deber ser un proyecto de Android:

Se nos preguntar el nombre de la aplicacin y las versiones de Android de
destino y de compilacin:
Ads by OnlineBrowserAdvertisingAd Options

Yo compilar para la 2.2:

Y esta aplicacin tendr una nica "Activity" (una "ventana"), a partir del patrn
para "Actividad en blanco":

Obtendremos un esqueleto de aplicacin bsica:
Ads by OnlineBrowserAdvertisingAd Options

Que podramos ejecutar para comprobar que todo est instalado correctamente:

Si todo ha ido bien, podemos usar este esqueleto, borrar ese texto de ejemplo, y
aadir dos etiquetas de texto grande ("Large text") y una casilla de texto ("Text
field") que permita introducir valores numricos:

Y finalmente, un botn:
Ads by OnlineBrowserAdvertisingAd Options

El fichero XML que corresponde a la descripcin de esa ventana (activity) tendr
posiblemente algunos avisos (warnings), que nos digan que dejar los textos de los
botones y los "textView" prefijados no es una opcin muy elegante. Como somos
novatos, lo dejaremos as por ahora.

Aun as, seguiremos adelante y modificaremos el "text" de esos textView, para
que muestren dos nmeros, por ejemplo "5" y "3":

Y lo mismo para el botn, al que pondremos el texto "Comprobar":
Ads by OnlineBrowserAdvertisingAd Options

Si volvemos a la vista en modo grfico, la aplicacin debera estar quedando as:

Llega el momento de aadir comportamientos. Tenemos que hacer que el botn
responda a pulsaciones por parte del usuario, y que lance una cierta funcin. Una
forma sencilla de hacerlo, aunque un tanto "artesanal", es modificar el fichero
XML para aadir android:onClick="comprobarRespuesta" (o el nombre que
queramos dar a la funcin que se va a llamar cuando se pulse el botn... y que
todava no hemos creado).

Ahora deberamos abrir el cdigo fuente del programa, para aadir esa funcin
"comprobarRespuesta", as como los dems datos que sean necesarios (atributos,
alguna otra funcin -mtodo- auxiliar, etc). Lo podemos hacer desde la ventana
de la izquierda, el "Package Explorer". Estar en la carpeta "src", y en nuestro
caso se llamar "Sumas.java":
Ads by OnlineBrowserAdvertisingAd Options

Deberiamos aadir algunos atributos (variables): dos nmeros enteros, que
generaremos al azar, y el resultado de su suma. Tambin tendremos
un generador de nmeros aleatorios (Random):

Posiblemente la lnea de "Random" se nos marcar en rojo, porque nos faltar
una orden "Import"; no es un gran problema, basta acercarnos a la palabra
Ranom y se desplegar una serie de posibles soluciones, la primera de las cuales
ser aadir el "Import Random":

Ahora podemos crear una funcin "generarNumeros", que cree el objeto Random
(el generador de nmeros aleatorios) y que genere dos nmeros al azar entre 0 y
5. Podemos llamar a esta funcin tambin desde el final de "onCreate":

Para comprobar que est funcionando, podemos hacer que se nos muestren esos
valores, cambiando el texto de los textView. Usaramos construcciones como:
TextView tv1 = (TextView)findViewById(R.id.textView1);

tv1.setText( ""+n1 );


Nuevamente, se nos puede marcar en rojo ciertas lneas, para indicar que no
hemos detallado lo que es un "TextView", pero si acercamos el ratn se nos
propondr el Import corespondiente.
Podemos volver a lanzar nuestra aplicacin, que ahora ya debera mostrar una
apariencia mucho ms cercana a la final, con dos nmeros generados al azar:

Si todo ha ido bien, podemos completar el cdigo fuente.
La funcin "generarNumeros" est casi completa. Slo falta

void generarNumeros() {
generador = new Random();
n1 = Math.abs(generador.nextInt() % 6);
n2 = Math.abs(generador.nextInt() % 6);
resultado = n1 + n2;
TextView tv1 = (TextView)findViewById(R.id.textView1);
tv1.setText( ""+n1 );
TextView tv2 = (TextView)findViewById(R.id.textView2);
tv2.setText( "+ "+n2 );
EditText ed1 = (EditText)findViewById(R.id.editText1);
ed1.setText( "" );
}
Por otra parte, la funcin "comprobarRespuesta" (la que se llamar al pulsar el
botn) debera comprobar si el nmero que se ha tecleado en la casilla
coincide con el nmero que se haba generado al azar, mostrar un aviso
(usando un "AlertDialog") que nos siga si hemos acertado o no (ya que es un
juego para nios, en vez de texto podran ser los iconos ":-)" o ":-(".
Finalmente, deber volver a generar nmeros:

public void comprobarRespuesta(View v) {
EditText ed1 = (EditText)findViewById(R.id.editText1);
String respuesta = ":-(";
try {
int valor = Integer.parseInt ( ed1.getText().toString() );
if (valor == resultado)
respuesta = ":-)";
}
catch (NumberFormatException e) {

}
AlertDialog ad = new AlertDialog.Builder(this).create();
ad.setCancelable(false); // Para no mostrar el botn de cancelar
ad.setMessage( respuesta );
ad.setButton("Volver", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
ad.show();

generarNumeros();
}
Y podemos volver a lanzar el programa. Si hacemos clic en la casilla de texto,
aparecer un teclado numrico:

Y si introducimos la respuesta correcta y pulsamos el botn "Comprobar", una
carita sonriente debera decirnos que lo hemos hecho bien:

Por supuesto, podemos equivocarnos...

Y entonces la cara debera ser triste:

Es todo por hoy. A seguir experimentando! ;-)

Vamos a hablar sobre como programar una aplicacin para un dispositivo con Android que se
va a tratar de una sencilla calculadora.
Como todos sabemos, Android se programa mediante el lenguaje de programacin Java. Este
ejemplo de la calculadora puede parecer demasiado bsico, pero con una idea inicial de como
hacer una pequea aplicacin para Android y nociones sobre Java, veremos que desarrollar un
programa ms complejo es muy fcil.
En primer lugar, necesitaremos el Android SDK que lo podemos descargar
dehttp://developer.android.com/sdk/index.html
Tras instalarlo deberemos ejecutar el archivo android dentro de la carpeta tools y hacer lo
siguiente:
Instalar la plataforma de la versin Android a emular, lo haremos desde la
pestaa Available packages y elegiremos la versin que queramos (2.1, 2.2, 2.3, etc)
Crear un dispositivo virtual, pestaa Virtual devices, que ser nuestro dispositivo a
emular.
Como segundo paso, haremos uso de la plataforma Eclipse y su plugin ADT para el desarrollo
de Android bajo Eclipse. Podemos hacerlo desde la
direccinhttp://developer.android.com/sdk/eclipse-adt.html
Ahora nos quedara configurar Eclipse para que supiera la ruta hasta el SDK de Android y
tendramos todo preparado para trabajar. Lo podemos hacer desde el men Window ->
Preferences y dentro de la ventana en la pestaa Android tenemos la opcin SDK Location.
Ahora tenemos todo preparado y configurado para empezar a crear aplicaciones. La web del
SDK de Android contiene varios ejemplo de como empezar a programar y el ejemplo ms
sencillo es el del "Hola Mundo" donde viene todo el proceso indicado arriba de forma ms
detallada (lo podis encontrar aqu http://developer.android.com/resources/tutorials/hello-
world.html).
Nosotros nos vamos a basar en uno un poco ms avanzado y lo vamos a ampliar hasta crear
una aplicacin con cierta utilidad. Este ejemplo es el de como posicionar elementos con
tamaos y posiciones relativas http://developer.android.com/resources/tutorials/views/hello-
relativelayout.html y vamos a aadir algunos elementos y funcionalidades para crear nuestra
sencilla calculadora.
Creando nuestra primera aplicacin para Android
Para ver cual queremos que sea la interfaz final e intuir el funcionamiento, vamos a mostrar
una captura de pantalla del resultado final en el emulador:

donde podemos ver tres elementos: TextView (objeto para mostrar texto), EditText (caja de
entrada de texto) y Button (botn).
Empezaremos creando en Eclipse un proyecto para Android, modificaremos el
archivores/layout/main.xml en su vista de cdigo de fuente y pegaremos el siguiente cdigo
XML:
01 <?xml version="1.0" encoding="utf-8"?>
0
2
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro
id"
03 android:layout_width="fill_parent"
04 android:layout_height="fill_parent">
05 <TextView
06 android:id="@+id/label_a"
07 android:layout_width="fill_parent"
08 android:layout_height="wrap_content"
09 android:text="Operando A:"/>
10 <EditText
11 android:id="@+id/op_a"
12 android:layout_width="fill_parent"
13 android:layout_height="wrap_content"
14 android:background="@android:drawable/editbox_background"
15 android:layout_below="@id/label_a"/>
16 <TextView
17 android:id="@+id/label_b"
18 android:layout_width="fill_parent"
19 android:layout_height="wrap_content"
20 android:layout_below="@id/op_a"
21 android:text="Operando B:"/>
22 <EditText
23 android:id="@+id/op_b"
24 android:layout_width="fill_parent"
25 android:layout_height="wrap_content"
26 android:background="@android:drawable/editbox_background"
27 android:layout_below="@id/label_b"/>
28 <Button
29 android:id="@+id/sumar"
30 android:layout_width="wrap_content"
31 android:layout_height="wrap_content"
32 android:layout_below="@id/op_b"
33 android:layout_alignParentLeft="true"
34 android:layout_marginLeft="1dip"
35 android:onClick="cSumar"
36 android:text="+" />
37 <Button
38 android:id="@+id/restar"
39 android:layout_width="wrap_content"
40 android:layout_height="wrap_content"
41 android:layout_toRightOf="@id/sumar"
42 android:layout_alignTop="@id/sumar"
43 android:onClick="cRestar"
44 android:text="-" />
45 <Button
46 android:id="@+id/multiplicar"
47 android:layout_width="wrap_content"
48 android:layout_height="wrap_content"
49 android:layout_toRightOf="@id/restar"
50 android:layout_alignTop="@id/restar"
51 android:onClick="cMultiplicar"
52 android:text="*" />
53 <Button
54 android:id="@+id/dividir"
55 android:layout_width="wrap_content"
56 android:layout_height="wrap_content"
57 android:layout_toRightOf="@id/multiplicar"
58 android:layout_alignTop="@id/sumar"
59 android:onClick="cDividir"
60 android:text="/" />
61 <TextView
62 android:id="@+id/texto_resultado"
63 android:layout_width="fill_parent"
64 android:layout_height="wrap_content"
65 android:layout_below="@id/dividir"
66 android:text="Resultado:"/>
67 <TextView
68 android:id="@+id/resultado"
69 android:layout_width="fill_parent"
70 android:layout_height="wrap_content"
71 android:layout_below="@id/texto_resultado"
72
android:text="Realice operacin para obtener
resultado"/>
73 </RelativeLayout>
Los atributos relevantes para este ejemplo de cada elemento son:
android:id identificador de cada objeto
android:layout_width y android:layout_height, anchura y altura respectivamente
android:layout_below: indica si el objeto est debajo de otro
android:layout_toRightOf y android:layout_alignTop: indican si estn varios
elementos en la misma fila sobre qu objeto se coloca a su derecha y su
posicionamiento en altura
android:text es el texto por defecto en cada elemento
android:onClick es el nombre del mtodo pblico a ejecutar al pulsar ese botn. Este
mtodo debe ser obligatoriamente pblico y tener como parmetro de entrada la vista,
ejemplo public void function cSumar(View view) { ... }.
ahora vamos a programar el funcionamiento de los objetos descritos en el archivo de extensin
java creado para el proyecto:
01 package com.android.calculadora;
02
03 import android.app.Activity;
04 import android.os.Bundle;
05 import android.widget.*;
06 import android.view.*;
07
08 public class Calculadora extends Activity {
09
10 // Instancias de objetos a usar
11 private double valor_a, valor_b;
12 private EditText op_a, op_b;
13 private TextView resultado;
14
15 public void onCreate(Bundle savedInstanceState) {
16 super.onCreate(savedInstanceState);
17 setContentView(R.layout.main);
18
19 // Asignamos los objetos
20 this.op_a = (EditText) findViewById(R.id.op_a);
21 this.op_b = (EditText) findViewById(R.id.op_b);
22
this.resultado = (TextView)
findViewById(R.id.resultado);
23 }
24
25 public void cSumar(View view) {
26
if(this.op_a.getText().toString().length() > 0 &&
this.op_b.getText().toString().length() > 0) {
27
this.valor_a =
Double.parseDouble(this.op_a.getText().toString());
28
this.valor_b =
Double.parseDouble(this.op_b.getText().toString());
29
this.resultado.setText(Double.toString((this.valor_a +
this.valor_b)));
30 }
31 }
32
33 public void cRestar(View view) {
34
if(this.op_a.getText().toString().length() > 0 &&
this.op_b.getText().toString().length() > 0) {
35
this.valor_a =
Double.parseDouble(this.op_a.getText().toString());
36
this.valor_b =
Double.parseDouble(this.op_b.getText().toString());
37
this.resultado.setText(Double.toString((this.valor_a -
this.valor_b)));
38 }
39 }
40
41 public void cMultiplicar(View view) {
42
if(this.op_a.getText().toString().length() > 0 &&
this.op_b.getText().toString().length() > 0) {
43
this.valor_a =
Double.parseDouble(this.op_a.getText().toString());
44
this.valor_b =
Double.parseDouble(this.op_b.getText().toString());
45
this.resultado.setText(Double.toString((this.valor_a *
this.valor_b)));
46 }
47 }
48
49 public void cDividir(View view) {
50
if(this.op_a.getText().toString().length() > 0 &&
this.op_b.getText().toString().length() > 0) {
51
this.valor_a =
Double.parseDouble(this.op_a.getText().toString());
52
this.valor_b =
Double.parseDouble(this.op_b.getText().toString());
53 if(this.valor_b != 0) {
54
this.resultado.setText(Double.toString((this.valor_a /
this.valor_b)));
55 }
56 else {
57 this.resultado.setText("Infinito");
58 }
59 }
60 }
61 }
El mtodo onCreate se ejecuta al crear la aplicacin y es donde asignamos los objetos
declarados en el XML a objetos Java. Tras ello declaramos las funciones definidas en los
atributos onClick de cada botn.
Por ltimo nos quedara ejecutarlo y probar el funcionamiento.
Conclusiones
Como hemos dicho, este ejemplo de una calculadora es un ejemplo muy sencillo pero podemos
ver que con un poco de cdigo y unas pequeas nociones sobre Android SDK podemos sacar
muchsimo provecho de nuestros conocimientos sobre Java.

You might also like