Introducción al desarrollo de aplicaciones con Android Studio (II)

Este post es una continuación de reciente artículo Introducción al desarrollo de aplicaciones con Android Studio (Parte I),en la primer entrega, mostramos paso a paso como crear una aplicación a través de un asistente y analizamos la estructura general de un proyecto; ahora, en la segunda parte realizaremos modificaciones al proyecto recién creado, que si bien son pequeñas, también son significativas, ya que representan un avance para aquellos que recién se inician en este tema, realizando las actividades con poca dificultad y  apreciando la ejecución de estos cambios de manera inmediata. Abrimos entonces, el proyecto original para iniciar el presente tutorial.

La interfaz grafica

Los archivos para la interfaz gráfica se localizan dentro de la ruta src\main\res\layout y son archivos con extensión .xml. Nuestro ejemplo contine el archivo activity_inicio.xml:

activity_android_atudio

Archivo XML con la definición de la Interfaz Grafica

Se aprecia que el contenido de este archivo define el aspecto visual. Nos detenemos justo en el recuadro naranja donde resaltamos el uso de un Widget (control) de tipo TextView, el cual permite mostrar etiquetas de texto y define los valores para tres atributos:

  • text: Texto de la etiqueta
  • layout_width: El ancho de la etiqueta,  cuyo valor wrap_content indica que el ancho del control se ajustara al contenido de la etiqueta
  • layout_height: El largo de la etiqueta, cuyo valor wrap_content indica que el largo del control se ajustara al contenido de la etiqueta
Vamos a modificar el texto, el cual en realidad, no es simple texto sino que define el uso de una variable (recurso string) llamada hello_world, por lo tanto es necesario modificar el texto de dicha variable, la cual se encuentra en el archivo strings.xml localizado en la ruta  src\main\res\values.  Tecleamos el nuevo texto “Hola PoderPDA.com
android_strings

Recursos string

El uso de los recursos string no es necesario, pero si recomendable, exigiendo el uso de variables para los valores de texto en lugar de escribir de manera directa el valor de la cadena.

 

El icono de la aplicación

El icono se encuentra  definido en cada una de las carpetas drawable para cada una de las resoluciones con el nombre de ic_launcher.png:
  • mdpi (48×48)
  • hdpi (72×72)
  • xhdpi (96×96)
  • xxhdpi (144×144)
icono_drawable

Icono original

 

La siguiente acción consistirá en sustituir este icono, seleccionando nuestra propia imagen y a pesar de que la edición puede realizarse con cualquier editor de imágenes, utilizando una herramienta disponible en la web  llamada Android Asset Studio para generar los archivos en diferentes resoluciones de una manera sencilla:

  • Accedemos a la página  Android Asset Studio
  • Seleccionamos la opción  Launcher icons
  • Seleccionamos la opción  Foregroud e Image. Con ello, nos solicitara una imagen, la cual fungirá  como icono.
  • Después de elegir el archivo, la aplicación generara los iconos necesarios y, solo  basta descargar el archivo comprimido (zip) con todas las resoluciones y copiar los archivos en sus correspondientes carpetas (carpetas drawable)
icono_android

Usando Android Asset Studio

Ahora notamos los pequeños cambios que hemos realizado tanto en la parte del texto de la etiqueta como en el icono de la aplicación. Importante notar que por ahora dejaremos el icono con el mismo nombre, aunque es posible modificar esta propiedad.

Código Java

Es momento de  agregarle funcionalidad, insertando un botón y codificando el evento click:

  • Abrir el archivo Inicio.java que se encuentra dentro de la carpeta java y el paquete cia.holaas
  • Seleccionar la pestaña Design a fin de mostrar el archivo en modo diseño
  • Al seleccionar el modo diseño, aparecen una serie de controles para ser insertados en la pantalla de la interfaz
  • Seleccionar un botón y arrastrarlo al centro de la pantalla, tal y como se muestra en la figura
boton_Android_Ejejemplo

Agregando un Widget (botón)

Ahora cambiaremos el texto que muestra el boton e indicaremos el nombre del metodo que se ejecutara al presionar el boton (evento click)
  • Seleccionar la pestaña Text, con ello, se mostrara el codigo XML.
  • Buscamos el codigo correspondiente al boton  y modificamos la propiedad text con el valor “Ir a PoderPDA”
  • Agregamos una propiedad llamada onClick y le asigamos el valor evento_Click
android:text=”Ir a PoderPDA”

android:onClick=”evento_Click”

 

botonfinal

Modificando propiedades

 

Finalmente, es necesario insertar código Java, a fin de que el evento click funcione al presionar el botón.

  • Abrirnos el archivo Inicio.java, localizado en la ruta src\main\java\cia.holaas
  • Agregamos las referencias a las clases:
import android.view.View;
import android.content.Intent;
import android.net.Uri;

 

    • android.view.View. Necesaria porque el método del evento click recibe un objeto de tipo View (en este caso un boton)
    • android.content.Intent. Permitir la ejecución de tareas, en este caso, el redirigirnos a un navegador
    • android.net.Uri. Para parsear una dirección de internet
  • Crear el método para el evento click
public void evento_Click(View vw){
String link = “http://www.poderpda.com”;
Intent intent = null;
intent = new Intent(intent.ACTION_VIEW, Uri.parse(link));
startActivity(intent);

}

donde:

    • Declaramos una cadena que contiene la dirección del portal
    • Creamos un objeto de tipo Intent
    • Iniciamos en intent, redireccionando la ejecución de  la aplicación hacia el navegador
codigo_click

Agregando código Java

Hemos finalizado el presente apartado  y con ello, la aplicación se encuentra lista para ser ejecutada, acciones que mostraremos a detalle en la entrega número III del tutorial.

Introducción al desarrollo de aplicaciones con Android Studio (I)

Introducción al desarrollo de aplicaciones con Android Studio (III)

Introducción al desarrollo de aplicaciones con Android Studio (IV)

  • mi segunda aplicación en android studio

  • introduccion a los intent