Para facilitar el aprendizaje y familiarización con la plataforma vamos a comenzar el desarrollo de otra pequeña aplicación, vamos a realizar otra versión del Hola Mundo más completa
Nuestra aplicación ahora se va a dividir en dos pantallas distintas. En una introduciremos un texto y en la otra se visualizará el resultado al pulsar un botón.
Como hicimos anteriormente generaremos un nuevo proyecto que llamaremos Postales. Elegiremos ahora una versión de la API mínima 4.0.3 por ejemplo (si la queremos probar en nuestro terminal en vez de en el emulador podríamos configurar otra versión de la API más baja si ésta no es compatible). Para futuras aplicaciones con intenciones comerciales usaremos versiones de la API 2.3.3 o más bajas, no siendo recomendable bajar de la versión 2.2 ya que apenas existen ya usuarios activos con estas versiones de Android.
En el proceso de creación del proyecto generamos una actividad con sus correspondientes ficheros java y xml que definen el código y la vista de la interfaz. Ahora nos dirigiremos a la carpeta app/ src/main/java y generamos una clase Java que llamaremos Postales.java y en la carpeta app/ src/main/res/layout su interfaz gráfica que llamaremos activity_postales.xml.
Si nos dirigimos a la carpeta app/ src/main/java podemos con el botón derecho sobre el paquete dónde está MainActivity.java y crear una nueva clase que llamaremos Postales.java El contenido de dicha clase será lo que sigue a continuación:
Atención: En este caso el paquete se llama aplicaciones.postales pero en tu caso has podido llamarlo de otra forma, ten esto en cuenta y cámbialo.
Ahora nos dirigiremos a la carpeta app/ src/main/res/layout y en dicha carpeta crearemos un nuevo archivo xml que se llamará activity_postales.xml, el cual añadiremos su código más adelante
Para cambiar entre el editor de xml y el editor gráfico en la interfaz sólo debemos pulsar sobre las pestañas Desing y Text para cambiar entre ambos modos. Estas pestañas se encuentran, sobre la salida de la consola y debajo del editor principal.
Hasta este punto tenemos dos clases y dos actividades iguales, compuestas por un cuadro de texto que pone Postales. Vamos a proceder a cambiar ambas interfaces.
Nos vamos a dirigir a la carpeta app/ src/main/res/values para definir un nuevo String, abriremos el fichero strings.xml y se nos mostrará algo así como:
Para añadir un nuevo String, añadiremos una nueva linea en la cual indicaremos: em el campo Name ponemos el título del String, que será titulo1 y luego en el campo valor pondremos el valor del String, que en nuestro caso será: Introduzca el saludo de su postal.
Ahora nos dirigiremos al fichero activity_main.xml y nos dirigiremos al editor XML. Vamos a sustituir todo lo que contenga por el código que se muestra a continuación:
Y su aspecto gráfico será:
El campo TextView es la parte del código dónde definiremos el texto en la interfaz, si nos fijamos ahora hace referencia al string app_name:
Pues bien, cambiaremos ese valor por el de nuestro nuevo string, titulo1. Ahora quedará así:
Y en el editor gráfico:
Ahora en el editor gráfico de activity_main.xml vamos a añadir un cuadro para ingresar texto, pero esta vez en vez de declararlo en el código haremos uso del editor.
Para ello nos dirimos a la derecha a la barra de herramientas Palette y una vez allí al apartado Text Fields y luego arrastraremos el primer elemento de ellos al centro de nuestra interfaz gráfica.
Y quedará algo así en el editor gráfico:
Y si nos vamos al editor textual veremos que ahora tenemos un nuevo campo llamado Edit Text que se corresponde con nuestro nuevo cuadro de texto, nos aseguramos que tenga las mismas propiedades que las que se muestran a continuación:
Ahora volveremos al editor gráfico y vamos a irnos de nuevo a la paleta y vamos a añadir un botón. Éstos se encuentran en el primer apartado Widgets, en este caso usaremos el que pone Button.
Ahora nos fijamos en la línea del botón:
Pues bien, ahora cambiaremos el texto “Button” por “Continuar”
Hecho esto nos dirigiremos a la clase principal de nuestro proyecto -> MainActivity.java, allí vamos a crear la funcionalidad necesaria para capturar el texto de nuestro EditText y para que nuestro botón nos lleve a la siguiente activity.
Ahora vamos conectar nuestro Edit Text y nuestro botón desde el código para que podamos capturar el texto y lanzar la siguiente actividad cuando se pulse el botón (además de enviar el texto).
Para ello declaramos una variable Button para el botón y una EditText para el EditText, lo haremos dentro de la función onCreate, que se invoca cuando se crea nuestra vista, así realizaremos dicha ligadura de las variables con sus elementos en la Vista cuando se cree el objeto de esta clase. Nótese que hacemos uso de la función findViewById que nos permite localizar un elemento en una Vista por su Id (nombre de variable). Quedaría nuestra clase ahora tal que así:
Cuando usemos objetos de una clase que no tenemos incluida en el proyecto se nos mostrará una advertencia en forma de bombilla, sólo tenemos que pulsar sobre ella con un doble click y ya veremos que nos sugiere importar la clase Button en este caso, le damos a que la importe y así haremos con todas las advertencias por importaciones que nos lance Android Studio.
Ahora el siguiente paso es crear una función que nos permita modelar el comportamiento del botón, esto se hace creando otra función asociada a un evento, en este caso un onClickListener que literalmente estará a la espera para actuar cuando se realice un click. También la definiremos en el mismo método onCreate. Notará el alumno que parte del código se autogenerará cuando vaya creando el método.
Ya tenemos creado el método que se llamará cuando hagamos un click sobre el botón, ahora deberemos crear un intent, que como ya comentamos anteriormente será el encargado de comunicar una vista con otra.
El funcionamiento de este método es muy sencillo, el primer argumento del constructor del Intent es la clase de la vista que invoca al método, esto es, la vista en la que se encuentra el usuario, en nuestro caso es MainActivity (asegúrese de nombrarla con MainActivity.this para que devuelva el tipo de dato necesario) y el segundo parámetro se corresponde con la clase de la vista a la que queremos ir, en nuestro caso Postales, (el nombre que damos al parámetro es el nombre de la clase compilada Postales.class ).
Ahora es el momento de añadir el contenido del EditText que el usuario habrá añadido antes de pulsar el botón “Continuar”. Para ello usaremos un objeto de la clase Bundle al que añadiremos el texto con la etiqueta “SALUDO”. Este bundle lo adjuntaremos a nuestro intent y lanzaremos la siguiente actividad.
Si nos fijamos en la declaración de la variable edt del tipo EditText no hemos fijado sobre ella ningún modificador al principio, ahora debemos modificarla y añadirle final para que podamos añadirla correctamente a nuestro “bundle”. Con todos los cambios nuestra debe de quedar así:
Ahora nos dirigiremos a activity_postales.xml y añadiremos un TextView de tamaño, concretamente el que en la paleta se titula Large
Si nos vamos al editor del xml vemos que este nuevo TextView se llama textView en este caso, en vuestro caso puede llamarse de otra forma, podemos localizarlo aquí:
El siguiente paso es irnos a la clase Postales.java y allí vamos a crear un nuevo TextView que asociaremos como antes hicimos en la clase MainActivity.java, pero ahora lo asociaremos con la el TextView que acabamos de crear en su layout: textView
Ahora vamos a recuperar el string que añadimos al bundle para cambiar el contenido de nuestro textView por el valor que acabamos de pasarle desde la otra actividad.
Y ahora cambiamos el texto de nuestro TextView por el texto que hemos recuperado del bundle y nuestro método queda tal que así:
Ahora vamos a dar el último paso en nuestro diseño de la activity_postales.xml y es que le vamos a añadir una imagen de fondo.
El primer paso que haremos será importar una imagen a la carpeta drawable. Así que arrastraremos una imagen a la carpeta drawable desde el explorador de Windows.
Como podemos observar mi imagen se llama atardecer.jpg
Ahora nos vamos a editar el archivo xml del layout de nuestra actividad (activity_postales.xml ) y vamos a añadir un nuevo apartado merge que nos servirá para unir nuestro RelativeLayout existente con un ImageView (que contendrá la imagen de la postal). El código de este archivo quedará tal que así:
Nota: Hemos movido las líneas xmlns… a la declaración del merge.
Ahora el último paso es añadir la actividad que añadimos nosotros mismos al proyecto al manifiesto, así que abriremos el archivo AndroidManifest.xml
Nos dirigimos dentro del manifiesto a la pestaña Application, ahí añadiremos una nueva actividad:
En el apartado name ponemos el nombre de nuestro activity, Postales. Y con esto ya podemos guardar los cambios y probar nuestra aplicación.
Todos los pasos realizados:
Por si se ha perdido en algún paso, a continuación tendrá el resultado final de todas las modificaciones en MainActivity.java, Postales.java, activity_main.xml y activity-postales.xml
MainActivity.java
Postales.java
Activity_main.xml
activity_postales.xml
Ahora unos pantallazos de la ejecución en el emulador para comparar el resultado:
Lo más importante
- Al crear un nuevo proyecto Android Studio se genera automáticamente la estructura de carpetas necesaria para poder generar posteriormente la aplicación. Esta estructura será común a cualquier aplicación, independientemente de su tamaño y complejidad.
- Todo el código que pongamos en las carpetas fuente será compilado cuando se requiera. Y también como en los proyectos tradicionales de java el código se organizará en carpetas que resultarán en paquetes. Recordad que durante el proceso de creación del proyecto definimos el paquete que lo identificará. Por norma general la estructura de nuestros proyectos partirá de esta raíz tal como se ve en la imagen.
- Un Layout es un conjunto de vistas agrupadas de una determinada forma. Vamos a disponer de diferentes tipos de Layouts para organizar las vistas de forma lineal, en cuadrícula o indicando la posición absoluta de cada vista. Los Layouts también son objetos descendientes de la clase View. Igual que las vistas los Layouts pueden ser definidos en código, aunque la forma habitual de definirlos es utilizando código XML.
- Una aplicación en Android va a estar formada por un conjunto de elementos básicos de visualización, coloquialmente conocidos como pantallas de la aplicación. En Android cada uno de estos elementos, o pantallas, se conoce como actividad. Su función principal es la creación del interfaz de usuario. Una aplicación suele necesitar varias actividades para crear el interfaz de usuario.