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.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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: