TUTORIAL #1 ANDROID En este tutorial crearemos un proyecto Android, en el cual diseñaremos 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 opción 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 botón Next.

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

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

el botón Next.

6.- En la ventana Create Activity - Select whether to create an activity, and if so, what kind of activity.

Seleccionar la opción Blank Activity y presionar el botón 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 botón 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 diseño 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 aplicación. 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 opción

Change Layout.

TUTORIAL #1 ANDROID 13.- Se mostrará una ventana que nos permitirá cambiar el RelativeLayout por alguno de la lista.

Seleccionamos la opción LinearLayout (Vertical).

14.- Pasamos al modo texto de nuestro archivo main_activity.xml y agregaremos el atributo gravity a nuestro

LinearLayout, nos ayudamos presionando simultáneamente 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 serán 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 continuación agregaremos los controles necesarios para completar el diseño de la pantalla de login de

usuario. Todos los controles que se agregarán deberán estar incluidos dentro del contenedor LinearLayout.

Para hacerlo de una forma práctica 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 diseño 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 botón que aparece a la derecha y se mostrará la siguiente ventana, donde presionaremos el

botón 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 botón OK y a continuación 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 botón 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 prediseñado para ingresar solamente texto y lo arrastramos hacia

nuestro layout ubicándolo por debajo del TextView con el título “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 después 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 título “Clave” y un nuevo EditText prediseñado para ingresar la contraseña del usuario. Modificaremos

los atributos id y text.

20.- Por último agregaremos un botón debajo del EditText de la clave. Modificamos sus propiedades: id, text,

layout_gravity (permite establecer una ubicación dentro del contenedor center, right, left, …).

Para mejorar el aspecto visual de nuestro layout de login aplicamos el atributo para dar márgenes 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 botón

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 diseño de la primer pantalla de nuestra aplicación. Ahora agregaremos algo de

lógica para navegar a otra pantalla. Para ello, vamos a realizar una validación de los campos editables

etxtUsuario y etxtClave. Capturaremos los controles android desde el código java (MainActivity.java), para

poder realizar la validación 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 botón Aceptar ejecutará la lógica de la validación, si la validación resulta exitosa (el usuario ingresó

nombre de usuario y contraseña) entonces mostraremos otra pantalla, si el usuario no ingresa alguno de los

campos, mostraremos un mensaje advirtiendo dicha situación (“Faltan Datos”).

Abriremos el archivo MainActivity.java y agregaremos el siguiente código seguido de la declaración de la clase.

TUTORIAL #1 ANDROID

En las líneas 11 y 12 se realiza la declaración de dos objetos de tipo EditText y un objeto de tipo Button, estos

objetos me permitirán recuperar los datos que ha ingresado el usuario y recuperar el botón que ejecutará la

acción de validación.

23.- Vamos a crear un método que realice la validación de los datos del usuario, el nombre del método

validarDatos(), como se muestra en la siguiente figura. En la sección del else nos va a marcar error porque aún

no hemos creado la SegundaActivity (ver paso 26)

24.- Volvemos al layout de login de usuario (activity_main.xml), seleccionamos el botón 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 método 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 aplicación.

Para ello, abrimos File -> New -> Other -> Seleccionamos dentro de la carpeta Android la opción Android

Activity, presionamos Next, seleccionamos la opción Blank Activity, presionamos Next, Le asignamos el nombre

a la nueva Activity “SegundaActivity” y presionamos Finish.

28.- Por último nos quedaría ejecutar nuestra aplicación Android para comprobar su funcionamiento. Vamos

al nombre de nuestro proyecto “Tutorial1” clic derecho y seleccionamos la opción “Run as” opción “Android

Application”.