Ing.

Edgar Lizrraga Ugarte

Prctica Nro. 1 Creacin del primer proyecto ANDROID

La aplicacin constar de dos pantallas, por un lado la pantalla principal que solicitar
un nombre al usuario y una segunda pantalla en la que se mostrar un mensaje
personalizado para el usuario. As de sencillo,
sencillo, pero aprenderemos muchos conceptos
concept
bsicos,
s, que para empezar no est mal.

Para entender mejor lo que queremos conseguir, sera algo tan sencillo como lo
siguiente:

Vamos a partir del proyecto de ejemplo que creamos en un apartado anterior, al que
casualmente llamamos App1.
App1

Como ya vimos Eclipse haba creado por nosotros la estructura

estructura de carpetas del proyecto
y todos los ficheros necesarios de un Hola Mundo bsico, es decir, una sola pantalla
donde se muestra nicamente un mensaje fijo.
fijo

Lo primero que vamos a hacer es disear nuestra pantalla principal modificando la que
Eclipse nos ha creado por defecto. Aunque ya lo hemos comentado,
comentado, recordemos dnde y
cmo se define cada pantalla de la aplicacin. En Android, el diseo y la lgica
l de una
pantalla estn separados en dos ficheros distintos. Por un lado, en el
fichero /res/layout/activity_main.xml
/res/layout/activity_main.xm tendremos el diseo puramente visual de la
pantalla definido como fichero XML y por otro lado, en el
fichero /src/paquete.java/MainActivity.java,
/src/paquete.java/MainAct , encontraremos el cdigo java que
determina la lgica de la pantalla.
pantalla

Para realizar la prctica, seguiremos los siguientes pasos:

 Ing. Edgar Lizrraga Ugarte

1.- Vamos a modificar en primer lugar el aspecto de la ventana principal de la aplicacin

aadiendo los controless necesarios.
necesarios. Para ello, vamos a sustituir el contenido del
fichero activity_main.xml
activity_main.xm por el siguiente:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android "http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
"http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
"@+id/LinearLayout1"
android:layout_width
android:layout_width="match_parent"
android:layout_height
android:layout_height="match_parent"
android:orientation=
="vertical" >

<TextView
android:id="@+id/LblNombre"
"@+id/LblNombre"
android:layout_width
android:layout_width="wrap_content"
android:layout_height
android:layout_height="wrap_content"
android:text="@string/strNombre"
"@string/strNombre" >
</TextView>

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

<Button
android:id="@+id/BtnHola"
"@+id/BtnHola"
android:layout_width
android:layout_width="wrap_content"
android:layout_height
android:layout_height="wrap_content"
android:text="@string/strAceptar"
"@string/strAceptar" />

</LinearLayout>

En este XML se definen los elementos visuales que componen la interfaz de nuestra
pantalla principal y se especifican todas sus propiedades. No nos detendremos mucho por
ahora en cada detalle, pero expliquemos un poco lo que vemos en el fichero.

Lo primero que nos encontramos es un elemento LinearLayout

t. Los layout son
elementos no visibles que determinan cmo se van a distribuir en el espacio los controles
que incluyamos en su interior. Los programadores java, y ms concretamente de Swing,
conocern este concepto perfectamente. En este caso, un LinearLayout
LinearLayou distribuir los
controles simplemente uno tras otro y en la orientacin que indique su
propiedad android:orientation,
android:orientatio que en este caso ser vertical.

Dentro del layout hemos incluido 3 controles: una etiqueta (TextView),

), un cuadro de texto
(EditText), y un botn (Button).
( ). En todos ellos hemos establecido las siguientes
propiedades:
 Ing. Edgar Lizrraga Ugarte

android:id. ID del control, con el que podremos identificarlo ms tarde en

nuestro cdigo. Vemos que el identificador lo escribimos precedido de @+id/.

Esto tendr como efecto que al compilarse el proyecto se genere automticamente
una nueva constante en la clase R para dicho control. As, por ejemplo, como al
cuadro de texto le hemos asignado el ID TxtNombre,, podremos ms tarde
acceder al l desde nuestro cdigo haciendo referencia a la
constante R.id.TxtNombre.
R.id.TxtNombre

android:layout_height y android:layout_width. Dimensiones

Dimens del control
con respecto al layout que lo contiene (<LinearLayout>).. Esta propiedad tomar
normalmente los valores wrap_content para indicar que las dimensiones
del control se ajustarn al contenido del mismo,
mismo o bien match_parent
match_parent para
indicar que el ancho o el alto
alto del control se ajustar al ancho o alto del layout
contenedor respectivamente.

Adems de estas propiedades comunes a casi todos los controles que utilizaremos, en el
cuadro de texto hemos establecido tambin la propiedad
propied android:inputType,
android:inputTyp que
indica qu tipo de contenido va a albergar el control, en este caso texto normal (valor
text),
), aunque podra haber sido una contrasea (textPassword),), un telfono (phone),
una fecha (date)

2.- En values/strings.xml, aadir las siguientes lneas

l (dentro de <resources
resources>
</resources>):

<string name="strAceptar"
"strAceptar">Aceptar</string>
<string name="strNombre"
"strNombre">Escribe tu nombre: </string>

Por ltimo, en la etiqueta y el botn hemos establecido la propiedad android:text,

android:tex que
indica el texto que aparece en el control. Y aqu nos vamos a detener un poco, ya que
tenemos dos alternativas a la hora de hacer esto. En Android, el texto de un control se
puede especificar directamente como valor de la propiedad android:text,
android:tex o bien utilizar
alguna de las cadenas de texto definidas en los recursos del proyecto (como ya vimos, en
el fichero strings.xml), ), en cuyo caso indicaremos como valor de la
propiedad android:text su identificador precedido del prefijo @string
@string/. Dicho de otra
forma, la primera alternativa habra sido indicar directamente el texto como valor de la
propiedad, por ejemplo en la etiqueta de esta forma:
forma

<TextView
android:id="@+id/LblNombre"
"@+id/LblNombre"
android:layout_width
android:layout_width="wrap_content"
android:layout_height
android:layout_height="wrap_content"
android:text="Escribe nombre >
"Escribe tu nombre"
 Ing. Edgar Lizrraga Ugarte

</TextView>

Y la segunda alternativa, la utilizada en el ejemplo, consistira en definir primero una nueva

cadena de texto en el fichero de recursos /res/values/strings.xml,, por ejemplo con
identificador strNombre y valor Escribe tu nombre:

<string name="strNombre"
"strNombre">Escribe tu nombre: </string>

3.-.Con esto ya tenemos definida la presentacin

presentacin visual de nuestra ventana principal de
la aplicacin. De igual forma definiremos la interfaz de la segunda pantalla, creando un
nuevo fichero llamado activity_saludo.xml,
activity_saludo.xm , y aadiendo esta vez tan solo una etiqueta
(TextView)) para mostrar el mensaje
mens personalizado al usuario.

Para aadir el fichero, pulsaremos el botn derecho del ratn sobre la carpeta de
recursos/res/layout y pulsaremos la opcin New Android XML file.

En el cuadro de dilogo que nos aparece indicaremos como tipo de recurso Layout,
indicaremos el nombre del fichero (con extensin .xml) y como elemento
el raz
seleccionaremos LinearLayout.
LinearLayou Finalmente pulsamos Finish para crear el fichero.
fichero
 Ing. Edgar Lizrraga Ugarte

4.-. Eclipse crear entonces el nuevo fichero y lo abrir en el editor grfico, aunque
como ya indicamos, nosotros accederemos a la solapasolapa de cdigo para modificar
directamente el contenido XML del fichero.
fichero Para esta segunda pantalla el cdigo que
incluiramos sera el siguiente:
siguiente

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

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

<TextView
android:id="@+id/TxtSaludo"
"@+id/TxtSaludo"
android:layout_width
android:layout_width="wrap_content"
android:layout_height
android:layout_height="wrap_content"
android:text
android:text="" />

</LinearLayout>

Una vez definida la interfaz de las pantallas de la aplicacin deberemos implementar la

lgica de la misma. Como ya hemos comentado, la lgica de la aplicacin se definir en
ficheros java independientes. Para la pantalla principal ya tenemos creado un fichero
fic por
defecto llamadoMainActivity.jav
MainActivity.java.. Empecemos por comentar su cdigo por defecto:
defecto

Como ya vimos en un apartado anterior, las diferentes pantallas de una aplicacin Android
se definen mediante objetos de tipo Activity.. Por tanto, lo primero que encontramos
enco en
nuestro fichero java es la definicin de una nueva clase MainActivity
MainActivit que extiende
a Activity.. El nico mtodo que modificaremos de esta clase ser el
mtodo onCreate(),, llamado cuando se crea por primera vez la actividad. En este
mtodo lo nico que encontramos en principio, adems de la llamada a su implementacin
en la clase padre, es la llamada al mtod
mtodo setContentView
 Ing. Edgar Lizrraga Ugarte

(R.layout.activity_main. Con esta llamada estaremos

(R.layout.activity_main os indicando a Android que
debe establecer como interfaz grfica de esta actividad la definida en el
recursoR.layout.activity_mai
R.layout.activity_main,, que no es ms que la que hemos especificado en el
fichero/res/layout/activity_main.xm
/res/layout/activity_main.xml.. Una vez ms vemos la utilidad de las
diferentes constantes de recursos creadas automticamente en la clase R al compilar el
proyecto.

Adems del mtodo onCreate(),

onCreate( , vemos que tambin se sobrescribe el mtodo mtod
onCreateOptionsMenu() ),, que se utiliza para definir mens en la aplicacin. Por el
momento
ento no tocaremos este mtodo, ms adelante en el curso nos ocuparemos de este
tema.

5.- Ahora vamos a crear una nueva actividad para la segunda pantalla de la aplicacin
anloga a sta primera, para lo que crearemos una nueva clase Saludo Salud que extienda
tambin de Activity y que implemente el mtodo onCreate() pero indicando esta vez
que utilice la interfaz definida para la segunda pantalla en R.layout.activity_saludo.
R.layout.activity_salud Para
ello, pulsaremos el botn derecho sobre la carpeta /src/tu.paquete.java/
/src/tu.paquete.java y
seleccionaremos
remos la opcin de men New / Class.
Class

En el cuadro de dilogo que nos aparece indicaremos el nombre (Nam

Name) de la nueva
clase y su clase padre (Superclas
Superclass) como android.app.Activity.

Pulsaremos Finish y Eclipse crear el nuevo fichero y lo abrir en el editor de cdigo

java. Modificaremos por ahora el cdigo de la clase para que quede algo anlogo a la
actividad principal:

import android.app.Activity;
import android.os.Bundle;
 Ing. Edgar Lizrraga Ugarte

public class SaludoActivity

SaludoActi extends Activity {

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

6.- A partir de aqu nosotros tendremos que incluir el resto de la lgica de la aplicacin.

Y vamos a empezar con la actividad principal MainActivity,, obteniendo una referencia

a los diferentes controles de la interfaz que necesitemos manipular, en nuestro caso
cas slo
el cuadro de texto (EditText
EditText) y el botn (Button).. Para ello utilizaremos el
mtodo findViewById() indicando el ID de cada control, definidos como siempre en la
clase R.. Todo esto lo haremos dentro del mtodo
mtod onCreate() de la clase MainActivity,
justo a continuacin de la llamada a setContentView() que ya comentamos.

Para escuchar y tener referencia de un componente; realizar lo siguiente:

txtNombre = (EditText) this.findViewById(R.id.TxtNombre
TxtNombre);
btnHola = (Button) this.findViewById(R.id.BtnHola);

Para que las variables txtNombre y btnHola sean reconocidas, tendremos que
declararlas como globales:

EditText txtNombre;
txtNombre
Button btnHola;
;

7.- La aplicacin funcionar cuando hagamos clic en el botn, para lo cual tendr que
implementar una funcin:

btnHola.setOnClickListener(
.setOnClickListener(this);

La anterior funcin hace que el botn se encuentre como oyente de cualquier evento
sobre ese componente. Si el usuario hace clic sobre l, entonces
entonces tendr que hacer una
determinada accin y esa es:

@Override
public void onClick(View
onClick v) {
// TODO Auto-generated
Auto method stub

Toast toast1 =
Toast.
Toast.makeText(getApplicationContext(),
txtNombre.getText(), Toast.LENGTH_SHORT
LENGTH_SHORT);

toast1.show();

}
 Ing. Edgar Lizrraga Ugarte

Toast es una funcin que controla las notificaciones para el usuario

8.- Al final, el archivo MainActivity.java tendr que tener la siguiente estructura:

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu
android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

EditText txtNombre;
txtNombre
Button btnHola;
@Override
public void onCreate(Bundle savedInstanceState) {
.onCreate(savedInstanceState);
super.onCreate(savedInstanceState);
setContentView(R.layout.
setContentView(R.layout.activity_main);

txtNombre = (EditText) this.findViewById(R.id.TxtNombre

TxtNombre);
btnHola = (Button) this.findViewById(R.id.BtnHola);

btnHola.setOnClickListener(
.setOnClickListener(this);
}

@Override
public void onClick(View v) {
// TODO Auto-generated
Auto method stub

Toast toast1 =
Toast.
Toast.makeText(getApplicationContext(),
txtNombre.getText(), Toast.LENGTH_SHORT
LENGTH_SHORT);

toast1.show();
.show();

}
}