Tutorial #1.pdf
-
Upload
antonio77981 -
Category
Documents
-
view
47 -
download
2
description
Transcript of Tutorial #1.pdf
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”.