Bienvenidos sean a este post, este va a ser nuestro primer post sobre la app Mis lugares, esta app sera para almacenar lugares en nuestro equipo, con distintos datos, si son habitues de mi blog ya hicimos una app para Java sobre este tema en este post, y en este otro post le agregamos mas funciones pero esto es como dato anecdotico y tengan en cuenta estos posts por si lo menciono mas adelante, sin mas preambulos empecemos.
Abramos Android Studio y seleccionamos Start a new Android Studio Project
En el siguiente cuadro pondremos como nombre de la app, Mis Lugares, y en dominio pueden ser cualquiera por ejemplo example.com, si tienen uno propio pueden usar ese como yo uso tinchicus.com, el resto queda como esta
Pulsamos Next y pasaremos al siguiente cuadro
En este cuadro elegimos Phone and Tablet, y seleccionen la opcion que se ve, si necesitan instalarlo pueden ver este post para ver como se hace y en este post hablo sobre como varia el porcentaje de alcance, cuando esta seleccionado pulsen Next
Aca debemos elegir Empty Activity y pulsar Next
En este cuadro debemos definir como Activity Name a MainActivity y para Layout Name a edicion_lugar, el resto lo dejan como esta y pulsan Finish para comenzar la creacion de nuestra app. Una vez terminada la compilacion quedara con una estructura de la siguiente forma
Ahora vamos a empezar la creacion de nuestro formulario, en este caso vamos a necesitar utilizar dos tipos de vistas, una de tipo ScrollView para obtener las barras de desplazamiento y por otro lado una de tipo LinearLayout para poder ubicar nuestros elementos, empecemos con la de ScrollView, si vamos a nuestro archivo edicion_lugar.xml en la solapa Design se vera de la siguiente forma
Ahora iremos hasta Containers y ahi seleccionaremos ScrollView (este nos permitira el scroll verticalmente) y presionamos Enter para agregarlo
Una agregado nos quedara de la siguiente forma
Como pueden ver nos agrego automaticamente el LinearLayout en sentido vertical, esto nos vendra ideal para agregar nuestros elementos, pueden utilizar otra vista, como vimos en este post, pero yo les recomiendo esta. Ahora vamos a comenzar a agregar los elementos de nuestra app
Primero movamos el elemento TextView dentro del LinearLayout tal como se ve en la imagen anterior, ahora a la derecha en las propiedades del elemento deberiamos ir a la opcion Text y modificarlo por Nombre, si necesitan saber cual es mas adelante lo mostrare con otro campo y si saben cual es pueden modificarlo ya
Nuestro siguiente paso es agregar el elemento para ingresar informacion en este caso vamos a utilizar el elemento Plain Text para ingresar texto nomal, esto lo aclaro porque ahora vamos a ver como es el caso en cada uno de los elementos restantes, por lo tanto eligen Plain Text y presionan Enter para que quede como la imagen anterior y ahora procederemos a ordenarlo
En este caso lo seleccionaremos y lo arrastraremos por debajo del item anterior porque el item TextView servira como etiqueta para nuestro nuevo item, en este caso el Plain Text, ahora agregaremos un nuevo item
Como pueden ver en este caso, agregamos un item del tipo spinner, lo seleccionamos y presionamos Enter quedando de la siguiente forma
En este caso, solamente vamos a agregarlo y no vamos a trabajarlo mas pero este item mas adelante lo utilizaremos para indicar el tipo de lugar almacenado, en este caso me falto un item el cual es TextView el cual sera utilizado para indicar el nombre de este elemento y en este caso debera llevar el valor de Tipo en la propiedad Text del elemento TextView
Como pueden ver en esta imagen, primero agregamos cuatro items textView los cuales seran utilizados como etiquetas, deberan ingresar en el campo Text de las propiedades de cada item el identificador, en este caso vamos a necesitar identificar estos:
- Telefono
- Direccion
- Url
- Comentario
Y si pueden ver en la imagen tambien vamos a agregar cuatro elementos del tipo EditText pero vamos a detallar cuales:
- Phone, para almacenar el telefono
- Postal Address, para almacenar la direccion
- Email, es para almacenar la direccion web
- Multiline Tool, es para almacenar un comentario
Si se fijan en la imagen anterior estan todos los items mencionados y solamente deben posicionarse sobre ellos y presionar Enter para agregarlos, si llegaron a verse como en la foto solamente deben reacomodarlos como a todos los items cada uno debajo de cada «etiqueta», quedara algo asi
Ahora si nosotros probamos nuestra app, funcionara como se ve en el siguiente video
Si ven el video, podran ver como a medida que pasamos por los distintos campos va cambiando el teclado, pasando por el de edicion normal, al teclado numerico en el campo del telefono o en el campo de la pagina web con el teclado con la arroba (@), ahora solo nos faltan los dos ultimos pasos, identificar cada uno de nuestro campos y agregar una pista, vamos a seleccionar el primer EditText, en este caso el que esta debajo de la etiqueta Nombre, si miramos en las propiedades el primer campo es ID, este sera el identificador de nuestro campo y ahi deberemos poner el nombre, en este caso utilizaremos nombre
Esto deberiamos hacerlo en todos y cada uno de los campos EditText, ahora vamos a ver un par de detalles mas, si observan hay un campo hint, el cual utilizaremos para crear nuestra pista, este sera utilizada para dejar un texto (el cual desaparecera cuando escribamos) que nos dara una pista sobre la funcion de ese campo, en este caso yo le puse «Un nombre para identificar este lugar» pero se puede usar cualquier texto, estos dos pasos deberian hacerlos en todos los items EditText, aca les paso un listado:
| Item | ID | Hint |
| Edit Text | nombre | «Un nombre para identificar este lugar» |
| Phone | telefono | «Telefono» |
| Postal Address | direccion | «Direccion del lugar» |
| web | «Pagina Web» | |
| Multiline Tool | notas | «Una descripcion» |
Y entre esos campos hay uno llamado text, el cual como dijimos antes debia ser utilizado para modificar el valor de las «etiquetas», aca les muestro una de ejemplo
En este caso seleccionamos el item textView4 el cual es la etiqueta para el campo web, y como pueden dentro de las propiedades de TextView existen dos campos llamados text pero observen el unico con texto, ese es el que siempre va a ser mostrado en pantalla, ese es el campo a modificar para mostrar las etiquetas, si ya hicieron todo, modificaron las etiquetas y los campos de texto debera quedar un proyecto similar al de la siguiente imagen
Ahora si nosotros lo probamos, en nuestro equipo veremos algo similar a esto
Si lograron algo similar a como se ve la imagen, Felicitaciones!!! ya tenemos el esqueleto base de nuestra primera app, en este caso un simple formulario para cargar la informacion pero por ahora no es funcional, no se hagan problemas en los proximos posts iremos completandolo.
En resumen hoy hemos creado una de las dos apps que utilizaremos para ir aprendiendo como programar en Android, hemos agregado nuevos items, en este caso los de ingreso de datos, hemos visto que dependiendo el tipo cada uno tiene su propio teclado y nos facilita el ingreso de la infornmacion, tambien hemos visto como trabajar con distintos items para tener una vista mas ordenada y accesible. Espero les haya gustado, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
El blog de Tinchicus 