Está en la página 1de 17

TUTORIAL #1 ANDROID

En este tutorial crearemos un proyecto Android, en el cual disearemos los layouts necesarios para realizar el
login de un usuario.
1.- Abrimos el IDE Eclipse y creamos un nuevo proyecto Android. Accediendo desde el men de opciones File
-> New -> Other

2.- Seleccionamos la opcin que se encuentra dentro de la carpeta Android: Android Application Proyect.

TUTORIAL #1 ANDROID
3.- En la ventana New Android Application - Creates a new Android Application, completamos con los
siguientes datos que se muestran en la figura y presionamos el botn Next.

4.- En la ventana New Android Application - Configure Project, simplemente presionamos el botn Next.

TUTORIAL #1 ANDROID
5.- En la ventana Configure Launcher Icon Configure the attributes of the icon set, simplemente presionar
el botn Next.

6.- En la ventana Create Activity - Select whether to create an activity, and if so, what kind of activity.
Seleccionar la opcin Blank Activity y presionar el botn Next.

TUTORIAL #1 ANDROID
7.- En la ventana Blank Activity, dejamos por defecto el campo Activity Name en MainActivity (el nombre de
la clase java) y el campo Layout Name en activity_main (el nombre del archivo .xml). Por ltimo presionamos
el botn Finish.

8.- Revisamos las carpetas que fueron creadas dentro del proyecto. Identificamos donde se encuentra nuestra
primer Activity (el archivo java). Identificamos donde se encuentra el archivo de diseo del layout (el archivo
.xml). Identificamos donde se encuentra el archivo de recurso para declarar todas las cadenas de caracteres
(el archivo string.xml).

TUTORIAL #1 ANDROID

9.- Ahora construiremos la primer interfaz de usuario para nuestra aplicacin. Debe quedar de forma similar
como se muestra en la siguiente figura. Ser la pantalla que permita hacer el login del usuario.

TUTORIAL #1 ANDROID
10.- Hacemos doble clic sobre el archivo activity_main.xml que se encuentra en la carpeta layout.
Seleccionamos el texto que se agreg por defecto (Hello world) y lo eliminamos presionando la tecla Supr.

11.- Revisamos el panel Outline, debemos visualizar el contenedor RelativeLayout.

12.- Seleccionamos el contenedor RelativeLayout y hacemos un clic derecho y seleccionaremos la opcin


Change Layout.

TUTORIAL #1 ANDROID
13.- Se mostrar una ventana que nos permitir cambiar el RelativeLayout por alguno de la lista.
Seleccionamos la opcin LinearLayout (Vertical).

14.- Pasamos al modo texto de nuestro archivo main_activity.xml y agregaremos el atributo gravity a nuestro
LinearLayout, nos ayudamos presionando simultneamente las teclas Ctrl + barra espaciadora, para poder
visualizar las diferentes opciones de atributos que se pueden utilizar. El atributo gravity nos permite establecer
la forma en que sern alineados los controles que se encuentren dentro del LinearLayout, en este caso
estableceremos el valor de gravity en center_vertical.

TUTORIAL #1 ANDROID

15.- A continuacin agregaremos los controles necesarios para completar el diseo de la pantalla de login de
usuario. Todos los controles que se agregarn debern estar incluidos dentro del contenedor LinearLayout.
Para hacerlo de una forma prctica tomamos un primer control TextView (en la paleta en la carpeta Text
Widget seleccionamos el control TextView) y lo arrastramos y soltamos dentro del layout (LinearLayout que
agregamos en los pasos anteriores). El control TextView quedar alineado como se muestra en la figura gracias
al atributo gravity asignado al contenedor LinearLayout.

16.- Modificaremos algunos atributos del nuevo TextView para que se muestre como en el diseo de pantalla
visto en el paso N 9. Utilizamos el panel de propiedades para cambiar los atributos: id, text.
Para cambiar el id, buscamos en la lista en la primer columna el nombre del atributo id y modificamos el
valor para que el id quede como @+id/txtTituloUsuario.

TUTORIAL #1 ANDROID

Para cambiar el texto que se muestra desde el panel de propiedades, buscamos la propiedad text y
presionamos el botn que aparece a la derecha y se mostrar la siguiente ventana, donde presionaremos el
botn new string para crear una nueva variable que ser agregada al archivo de recursos string.xml.

En la ventana de nuevo String, colocaremos en el campo New R.string el nombre que tendr la variable en el
archivo string.xml. En el campo String colocaremos el valor para esa variable, como se muestra en la siguiente
figura.

TUTORIAL #1 ANDROID

Confirmamos con el botn OK y a continuacin se mostrar una ventana con la lista de todas las variables que
se encuentran declaradas en el archivo de recurso string.xml. Verificamos que nuestra variable strUsuario
aparezca en lista y presionamos el botn OK para confirmar.

TUTORIAL #1 ANDROID
17.- Agregaremos un control EditText para que el usuario pueda ingresar su nombre, para ello, seleccionamos
de la carpeta Text Fields el control EditText prediseado para ingresar solamente texto y lo arrastramos hacia
nuestro layout ubicndolo por debajo del TextView con el ttulo Usuario.

Una vez que lo soltemos dentro de nuestro layout se mostrar de la siguiente forma

TUTORIAL #1 ANDROID
18. Cambiaremos algunos atributos del nuevo EditText, modificaremos el atributo id. Lo haremos utilizando el
modo texto.

Modificamos el nombre que aparece despus de la barra diagonal, lo cambiamos por etxtUsuario.

TUTORIAL #1 ANDROID
19.- De la misma forma que agregamos el TextView y el EditText para Usuario agregaremos un nuevo TextView
para el ttulo Clave y un nuevo EditText prediseado para ingresar la contrasea del usuario. Modificaremos
los atributos id y text.
20.- Por ltimo agregaremos un botn debajo del EditText de la clave. Modificamos sus propiedades: id, text,
layout_gravity (permite establecer una ubicacin dentro del contenedor center, right, left, ).
Para mejorar el aspecto visual de nuestro layout de login aplicamos el atributo para dar mrgenes a los
controles, utilizamos el atributo layout_marginTop (margen superior), layout_marginBotton (margen
inferior), las unidades a utilizar son dp (pixeles independientes de la densidad). Por ejemplo para asignarle
margen superior de 20dp a mi botn

Para aplicar un color de fondo al contenedor LinearLayout utilizamos el atributo background, podemos
consultar una paleta de colores para obtener el valor hexadecimal, podemos consultar esta url:
http://www.w3schools.com/tags/ref_colorpicker.asp.

TUTORIAL #1 ANDROID

21.- Ya tenemos listo nuestro diseo de la primer pantalla de nuestra aplicacin. Ahora agregaremos algo de
lgica para navegar a otra pantalla. Para ello, vamos a realizar una validacin de los campos editables
etxtUsuario y etxtClave. Capturaremos los controles android desde el cdigo java (MainActivity.java), para
poder realizar la validacin de los datos del usuario.
La forma de validar los datos ingresados por el usuario consistir en lo siguiente:
El usuario debe ingresar ambos datos el nombre de usuario y la clave.
En caso de NO ingresar alguno de estos datos se debe mostrar un mensaje en pantalla advirtiendo la
falta de datos.
En caso de ingresar ambos datos debe mostrar la pantalla con un mensaje centrado en la pantalla que
diga Segunda Actividad.
22.- El botn Aceptar ejecutar la lgica de la validacin, si la validacin resulta exitosa (el usuario ingres
nombre de usuario y contrasea) entonces mostraremos otra pantalla, si el usuario no ingresa alguno de los
campos, mostraremos un mensaje advirtiendo dicha situacin (Faltan Datos).
Abriremos el archivo MainActivity.java y agregaremos el siguiente cdigo seguido de la declaracin de la clase.

TUTORIAL #1 ANDROID

En las lneas 11 y 12 se realiza la declaracin de dos objetos de tipo EditText y un objeto de tipo Button, estos
objetos me permitirn recuperar los datos que ha ingresado el usuario y recuperar el botn que ejecutar la
accin de validacin.
23.- Vamos a crear un mtodo que realice la validacin de los datos del usuario, el nombre del mtodo
validarDatos(), como se muestra en la siguiente figura. En la seccin del else nos va a marcar error porque an
no hemos creado la SegundaActivity (ver paso 26)

24.- Volvemos al layout de login de usuario (activity_main.xml), seleccionamos el botn y buscamos en el


panel de propiedades la propiedad Clickable y le asignamos el valor true.

TUTORIAL #1 ANDROID

25.-Seguimos buscando en el panel de propiedades. Ahora buscaremos la propiedad On Click y le asignaremos


como valor el nombre de nuestro mtodo validarDatos, que declaramos en la clase MainActivity.java.

TUTORIAL #1 ANDROID
26.- Ahora vamos a crear una nueva Actividad (Activity), que representara la segunda pantalla de mi aplicacin.
Para ello, abrimos File -> New -> Other -> Seleccionamos dentro de la carpeta Android la opcin Android
Activity, presionamos Next, seleccionamos la opcin Blank Activity, presionamos Next, Le asignamos el nombre
a la nueva Activity SegundaActivity y presionamos Finish.

28.- Por ltimo nos quedara ejecutar nuestra aplicacin Android para comprobar su funcionamiento. Vamos
al nombre de nuestro proyecto Tutorial1 clic derecho y seleccionamos la opcin Run as opcin Android
Application.