Fundamentos Android ejemplo Intent "Hola Usuario"

Bienvenidos a otra nueva lección del curso gratuito en www.AprendeAndroid.com Últimamente estoy viendo que hay muchas webs/blogs que se están apropiando de mi trabajo gratuitamente, pero en fin... espero que les salga un grano en el culito de esos que no te dejan sentarte! ;P.

Después de todo lo que hemos ido viendo, ejemplos de HolaMundo y Holamundo2, los fundamentos de Android y sus componentes, creo que esta nueva aplicación de ejemplo os va a encantar!! vamos a hacer un "Hola Usuario", es casi igual de sencillo que el "hola mundo" (bueno, casi, casi...;P) pero usaremos uno de los elementos que mas vamos a usar desarrollando aplicaciones Android ¿que cual es? pos el elemento intent que vimos justo en la lección anterior, este intent lo usaremos para iniciar otra actividad (una segunda pantalla) y también lo usaremos para enviar datos entre las distintas actividades, y así poder saludarnos de una forma mas personalizada y/o molona! ¿que te parece? jejejeje

Esta nueva aplicación, constará de dos activity (pantallas). Una Activity (pantalla) principal que solicitará tu nombre, y al pulsar sobre el botón "Hola" lanzará, la segunda Activity (pantalla) que recibirá los datos de la primera (donde pusimos nuestro nombre) por lo que nos mostrará nuestro saludo personalizado molón!. Sencillo, inútil, pero ¡muy molón! ;P. Mas adelante ya veras como agradecerás este ejemplo!

Puedes descargar el proyecto aquí>> descargar HolaUsuario Hola Usuario.

Eclipse, Java, Android Eclipse, Java, Android

Aunque tienes el ejemplo completo para descargar, yo te recomendaría hacer este ejemplo paso a paso, y si algo no te sale bien, siempre puedes contrastarlo con el ejemplo ya hecho. ¡comencemos! en primer lugar vamos a crear el nuevo proyecto Android, selecciona: File -> New Proyect...

Eclipse, Java, Android

Después selecciona el tipo de proyecto que vamos a hacer, en nuestro caso, selecciona Android, y pulsa siguiente.

Eclipse, Java, Android

llama al proyecto “HolaUsuario”, indica como target por ejemplo Android 2.1 (API 7) ¡ojo! recuerda que tienes que haberla descargado antes con el SDK Manager, pon el nombre a la aplicación y al paquete (el Package Name es como el dni de la aplicación, puedes codificar con pais.tunombre.proyecto).

Eclipse, Java, Android

Si en la pantalla anterior chequeaste "create custom launcher icon" ahora tendrás la oportunidad de editar de forma muy básica y sencilla el icono.

Eclipse, Java, Android

El siguiente paso nos pregunta si queremos crear la Activity. Si le decimos que si, generara el fichero xml que contendrá el diseño gráfico de una pantalla sencilla.

Eclipse, Java, Android

Por ultimo, introduce los nombres del Activity (pantalla) y del Layout (el fichero java que contendrá la lógica de nuestra aplicación).

Eclipse, Java, Android

Después de todo este asistente, Eclipse, nos creara la estructura de carpetas básica del proyecto y todos los ficheros necesarios del clásico "Hola Mundo", es decir, una sola pantalla donde se mostraría únicamente un mensaje fijo por defecto.

 

Paso1. Como crear el diseño del Interface gráfico Android

Ahora nos toca modificar el diseño de la ventana principal añadiendo los controles que necesitamos, que serán: Un cuadro de texto de tipo TextView (solo visualización de texto, que será donde veamos el texto "pon aquí tu nombre") y un cuadro de texto de tipo EditText (para editar texto, que será donde escribamos nuestro nombre).

Abre el fichero /res/layout/main.xml y pon lo siguiente:

Eclipse, Java, Android

Como ya hemos dicho en las lecciones anteriores, en este XML se definen todos los elementos visuales que componen la interfaz gráfica de nuestra pantalla principal y se especifican todas sus propiedades! (puedes consultar el Tema4 para ver mas detalles de esto), voy a explicar un poco lo que vemos en este xml.

Lo primero que vemos es un elemento LinearLayout (se inicia en la linea3 y se cierra en la linea24), los layout son elementos no visibles que determinan cómo se van a distribuir en ellos los controles que incluyamos en su interior (son como los contenedores de los elementos), este LinearLayout en concreto, distribuirá los controles uno bajo el otro, por que esta indicado en su propiedad android:orientation="vertical" (linea5).

Para intentar esquematizarlo todo voy a resumir, dentro del layout hay 3 controles:

 una etiqueta de texto (TextView)
 un cuadro de texto editable (EditText).
 Un botón (Button).

En todos ellos hemos establecido las siguientes propiedades:

 android:id. ID del control, es como el DNI, con el, podremos identificarlo más tarde en nuestro código JAVA. Esto se hace con la siguiente sintasis: “@+id/ElNombreQueQuieras”.
 android:text. Texto que mostrara el control. En Android, el texto de un control se puede especificar de dos formas:

1. Directamente. Se pone el texto entre comillas ¡y listo!
2. Fichero de Recursos. Utilizar una cadena de texto definida en los ficheros de recursos del proyecto (fichero strings.xml). Esto nos vendrá genial, si queremos que nuestra aplicación tenga soporte a varios idiomas. Para hacer esto tendremos que indicar su identificador precedido del prefijo “@string/NombreDeVariable”.

 android:layout_height y android:layout_width. Esta propiedad indica la dimensiones del control con respecto a su layout padre (contenedor que lo contiene). Esta propiedad tomará normalmente los valores “wrap_content” para indicar que las dimensiones del control se ajustarán al contenido del mismo, o bien “fill_parent” para indicar que el ancho o el alto del control se ajustará al ancho o alto del layout que lo contiene (vamos, que se ajusta a todo lo que de el contenedor).

Con esto ya tendremos definida la interface gráfica del activity (pantalla) principal. Ahora crearemos la segunda pantalla donde mostraremos el mensaje personalizado de nuestro saludo molón!. Para ello crearemos un nuevo fichero gráfico (activity) llamado saludo.xml.

Para esto, haz click con el botón derecho sobre la carpeta Layout de tu proyecto, en el menú contextual selecciona new y luego Other...

creando nuevo layout

Te aparecerá un asistente, es bastante intuitivo, primero hay que seleccionar el tipo de fichero que queremos crear (xml). Sigue los pasos para crear este nuevo Layout con nombre "saludo".

crear nuevo layout paso1 crear nuevo layout paso2

 

Una vez terminado, tendremos en la carpeta Layout 2 ficheros de tipo xml (main.xml y saludo.xml). Ahora lo modificaremos como hicimos con el anterior, añadiendo esta vez tan solo una etiqueta de tipo TextView (un cuadro de texto no editable por el usuario) que nos mostrara el pedazo de saludo personalizado.

Veamos cómo quedaría nuestra segunda pantalla:

ejemplo viewText

Como ves, este xml es como el anterior, contiene un Layout principal (líneas 3 a 12), que contiene el componente TextView (líneas 8 a 10) ambos con propiedades para que se ajuste el tamaño al contenido del componente, y para el caso del TextView un ID para poder identificarlo en el codigo Java. ¿fácil verdad? ;p

 

Paso2. Como crear la "Logica Java" de nuestro programa Android

Ahora vamos a implementar la lógica que les va a dar la funcionalidad a nuestras pantallas, como ya comente en el tema de estructura básica de un programa Android, la lógica de la aplicación se define en los ficheros JAVA ubicados en la carpera SRC en nuestro caso buscala en: /src/paquetejava/HolaUsuario.java

Allí encontraras ya un fichero llamado HolaUsuario.java (que es el que nos genero automáticamente el asistente de Eclipse). Ahora, lo que tenemos que editar ese JAVA para añadir la funcionalidad del botón, recuerda, que escribiremos nuestro nombre en el editText y al pulsar el botón, se nos abrirá la pantalla de saludo.xml que nos mostrara el saludo molón. Deberías conseguir tener algo parecido a esto, he comentado las líneas para que comprendas mejor que es lo que hace cada una de ellas.

Eclipse, Java, Android

 

Las pantallas (Activity) de una aplicación Android se definen mediante objetos de tipo Activity. Por esto, lo primero que vemos en el fichero.java es la definición de una clase llamada HolaUsuario que extiende a la clase Activity (esto de que extiende quiere decir, que esta clase que estamos creando llamada HolaUsuario, va a heredar todas las instrucciones predefinidas y existentes en Android de la clase ya creada Activity) esto es otra cosa buena de Android, que usamos el codigo o instrucciones ya existentes para crear nuestra aplicación.

Bueno, empecemos ya! ¿no te parece? cuando se inicie nuestra Activity, lo primero que se ejecutara será el codigo escrito en el método OnCreate que como ves es poquito (linea12 y 13). Básicamente lo que se dice hay es: Creame un espacio donde meter el diseño de pantalla main.xml mediante el método setContentView(R.layout.main) y aquí ya no hay nada mas.

Lo que realmente dará la funcionalidad a esta aplicación es el codigo contenido en el método public void btn_hola(View v) que solo se ejecutara cuando pulsemos nuestro botón.

En este método lo que hacemos es localizar el editText que definimos en el xml de nuestra pantalla ¿recuerdas el atributo ID del control? pues mediante la función findViewByID(R.id.TxtNombre) asignaremos a una variable de tipo EditText, para mas adelante extraerle el texto que introdujimos en el.

Ahora toca construir el intent que como dije en la lección anterior, se usa para la comunicación entre los distintos componentes y aplicaciones en Android. Esto es algo que me costaba mucho entender, ya que la traducción del ingles seria hacer "intentos", por lo que me llevaba a confusión, pero en fin... estos de Google creo que a veces no son mu finos para poner nombres a cosas... :s.

Este objeto principalmente se usa para "intentar" iniciar otras Activity, pero como además, lo que queremos es que la otra activity (pantalla) nos muestre el nombre que introduzcamos en la pantalla que estamos actualmente, a este objeto de tipo intent, le pasaremos un dato de tipo texto que contendrá el nombre que introduzca el usuario en el cuadro de texto editText (joe como me lio!!). Para hacer esto usamos la instrucción putExtra, al que pasamos 2 parámetros ("nombre de la variable donde se va a guardar" y el "valor o dato que queremos guardar ") en nuestro caso seria "nombre", "kike" (es justo la linea28 del codigo que hay arriba). En este caso, como dije, el dato es de tipo String (texto), por lo que usaremos el método putString("nombre de la clave", "valor").

Por ultimo, vamos a utilizar ese mismo intent (con la información ya añadida del nombre) para llamar a la segunda activity (pantalla) haciendo referencia a la propia actividad desde donde la estamos llamando (HolaUsuario.this), y la clase de la actividad a la que queremos iniciar (saludo.class) que es la linea31. La linea34 sirve para iniciar la propia actividad mediante el método startActivity() pasándole como parámetro el intent que hemos ido creando justo en las líneas anteriores.

Se que todo esto suena muy engorroso, pero a medida que vayas viendo ejemplos esto se comprende mejor ¡animo!

Ahora vamos a crear el codigo JAVA para la segunda Actividad (pantalla), para lo que necesitamos crear una nueva clase Saludo.java que también extenderá de la clase Activity y que implementara el método onCreate indicando que utilizaremos el diseño gráfico definido en el xml R.layout.saludo.xml

codigo de ejemplo para el saludo molon

Como vemos, ahora el código lo incluimos dentro del método OnCreate porque nos interesa que el código se ejecute nada mas iniciar esta Actividad. Vamos a empezar obteniendo una referencia al cuadro de texto (localizándolo en el diseño gráfico del xml) donde se mostrara nuestro mensaje personalizado. Para ello utilizaremos como antes el método findViewById() indicando el ID del control.

Ahora viene la madre del cordero.... ¿como recuperamos la información que hemos introducido antes en los intent y asignarla como texto de la etiqueta de texto?. pufff ¡agarrate que vienen curvas! Para esto accederemos en primer lugar al intent que ha originado la actividad actual mediante el método getIntent() y lo metemos en la variable de tipo Bundle que la hemos llamado "b" volcando toda la información contenida en el objeto Bundle "b" mediante el método getExtras().

Después de todo esto ya solo nos queda asignar el texto al control TextView mediante su propio método setText(texto) y recuperando el valor que almacenamos en el objeto "b" mediante getString("nombre de la clave que pusimos en la activity anterior")

Joeeeee me repito mas que el ajo! se que todo suela lioso! pero te repito ¡son tus primeros pasos! ya veras como poco a poco vas cogiendo la filosofía, ten paciencia, yo tampoco me enteraba de nada a estas alturas! ;p

 

Paso3. Crear los Recursos de texto en Android

Ahora vamos a configurar nuestros recursos de texto, este fichero sirve para guardar las variables de tipo texto que usaremos para dar o poner el texto por ejemplo a los botones, cuadros de texto..., es lo que explique antes sobre que por ejemplo en un botón pones en su propiedad:

android:text= “@string/NombreDeVariable”.

crea un fichero (quizás ya lo tengas creado) en res/values/string.xml como ves la estructura es sencilla, crea unas etiquetas con una propiedad de name, y se pone el texto que quieres entre la etiqueta y su cierre.

ejemplo fichero de recursos Android

Paso4. Modificar AndroidManifest de nuestro proyecto Android

Ya tan sólo nos queda un paso importante para finalizar nuestra aplicación, toda aplicación Android utiliza un fichero especial en formato XML (AndroidManifest.xml) para definir, entre otras cosas, los diferentes elementos que la componen. Una de las cosas mas importantes que tendremos que definir, será la de declarar todas las actividades de nuestra aplicación aquí.

Al usar el asistente de Eclipse, este ya nos habrá incluido la actividad principal, por lo que ahora debemos añadir tan solo la segunda Actividad, la del saludo molón! ;p. Fíjate en la linea20, usamos las etiquetas de <activity android:name"nombre de la actividad"/> y así de sencillo definimos la segunda Activity!! ¡¡esto si que es fácil ¿eh?!!

aplicacion sencilla Hola Usuario

Una vez llegado aquí, y si todo ha ido bien, deberíamos poder ejecutar el proyecto sin errores y probar nuestra aplicación en el emulador.

Espero que disfrutes con este saludo molón! ;p recuerda que el objetivo de esta aplicación es que te ayude a entender mejor estos elementos básicos de Android, como te dije antes, esto lo agradecerás mas adelante, este ejemplo tan básico lo usaras casi casi en todas tus apps ¡¡ya lo veras!!. De todas formas no te preocupes!! En las próximas lecciones veremos estas cosas de forma mucho más específica.

Si te a gustado este sitio, puedes hacer click en me gusta en Facebook, Google+, Tweeter... es el único precio que te pido por este trabajo! ;P. Compartiendo, ayudaras a otros a encontrar esta web! GRACIASSSS.