Tema: Programación en Android: Parte IV introducción Layouts XML

Programación en Android: Parte IV –Introducción a los Layouts XML

Introducción al tema

Continuando con esta serie de tutoriales, ya tenemos todas las herramientas necesarias para poder desarrollar aplicaciones más complejas, teniendo aprendidos los conceptos básicos de la programación en android. Por lo tanto, vamos a ver conceptos más específicos como son las interfaces gráficas, las cuales usan Layouts (Diseños o disposición de los elementos dentro de las actividades).

Aunque es técnicamente posible desarrollar aplicaciones creando desde código Java los controles de aplicación tales como botones, checkbox, textbox (desde ahora los denominaremos Widgets), el enfoque más utilizado es utilizar un fichero XML para definir el Layout de la aplicación.

¿XML?

XML es un lenguaje diseñado para transportar y guardar información, a diferencia de HTML el cual se utiliza para desplegar información, aunque ambos lenguajes están emparentados.

XML son las siglas para Extensible Markup Language o Lenguaje extendió de Marcado, es un lenguaje autodescriptivo y utilizado como metalenguaje (porque es un lenguaje que se emplea para hacer referencia a otro lenguaje, en nuestro caso para darle una estructura a la información que vamos a usar).

Como esta serie de tutoriales está dirigido a personas de todas las áreas trataremos de simplificar la explicación con un pequeño ejemplo

Código:

<?xml version=" 1.0 " encoding=" UTF-8 " standalone= " yes "?>
<ficha>
<nombre> Gabriel </nombre>
<apellido> Molina </apellido>
<direccion> Alfredo Vargas #36 </direccion>
</ficha>

Este pequeño segmento de código se ha definido una estructura básica para guardar la información de una persona en una ficha, respetando siempre los tags y la estructura básica, esto también podría ser escrito de la siguiente manera:

Código:

<?xml version=" 1.0 " encoding=" UTF-8 " standalone= " yes "?>
<ficha nombre = “Gabriel” Apellido=”Molina” Direccion=”Alfredo”> </ficha>

Se nos hace conocido la estructura de este último ejemplo?, pues es bastante similar a HTML, ya que HTML es un sublenguaje de XML.
Por lo tanto, XML nos da la posibilidad de estructurar la información, y almacenarla para que pueda ser utilizada por una serie de aplicaciones y servicios, XML es la base para el intercambio de información entre distintos dispositivos y servicios web mediante SOAP.

No obstante, por el momento no nos vamos a meter con SOAP, eso se verá adelante cuando consumamos un Servicio Web mediante Android.

¿Qué es un Layout basado en XML?

Es una especificación de la relación entre Widgets y sus contenedores, con la actividad en la que estamos trabajando, básicamente es una pequeña descripción de la estructura que tendrá nuestra interfaz de usuario, utilizando XML.

Cada fichero XML contiene un árbol de elementos especificando el lugar de los widgets y los contenedores que resultan en la jerarquía de vista, en palabras simples el fichero XML define como se va a ver nuestra aplicación.

El Android SDK tiene una herramienta denominada aapt que usa estos layouts, esta herramienta se invoca automáticamente y permite el acceso a los widgets de nuestra actividad directamente desde nuestro código JAVA.

Es preferible utilizar Layouts basados en XML por que existen aplicaciones que nos ayudan a la creación de Layouts que hacen nuestra vida un poco más fácil, si elegimos hacerlo directamente por código podría llegar a complicarse este proceso.

Por otro lado, el uso de interfaces XML va de la mano con los estándares de la industria que utilizan estándares similares como Microsoft XAML, Adobe Flex y Mozilla XUL, incluso los que trabajamos con ASP.net podemos ver que en un fichero definimos la interfaz de usuario y en otro el code behind o la lógica de la aplicación (funciones, variables, métodos, etc.), de forma bastante similar a como lo hacemos en Android.

Creando un Botón mediante un XML Layout

Ahora vamos a ver el botón del ejemplo anterior, pero creado utilizando un Layout XML.
Siguiendo los pasos para crear un nuevo proyecto detallados en el post anterior (Parte III), tenemos que crear un nuevo proyecto denominado HelloWorld2.

Cuando ya lo tengamos creado, abrimos el árbol de directorio y navegamos el directorio res\layout, ahí encontramos el fichero del Layout XML denominado main.xml.

Hacemos click sobre Main.xml, se abre una nueva ventana donde se ve una interfaz gráfica donde podemos arrastrar y soltar elementos, pero vamos a hacer click en la pestaña inferior que dice “main.xml” al lado de “Graphical Layout”, y reemplazamos el contenido de ese archivo por lo siguiente:

Código:

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button"
    android:text=""
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

Si ejecutamos la aplicación, podemos ver que se ha creado el botón, sin embargo tenemos que poder manipular este botón desde código, como lo hacemos?

Lo hacemos de la siguiente manera:

Código:

package Neoteo.Android;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.util.Date;
public class HelloWorld2 extends Activity
  implements View.OnClickListener {
  Button btn;
  @Override
  public void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    
    setContentView(R.layout.main);
    btn=(Button)findViewById(R.id.button);
    btn.setOnClickListener(this);
   btn.setText("Hola Mundo!");
  }
  public void onClick(View view) {
    updateTime();
  }
  private void updateTime() {
    btn.setText(new Date().toString());
  }
}

Mediante la sentencia

Código:

 setContentView(R.layout.main);

Para decirle a la actividad que el layout se encuentra en el fichero main.xml de la carpeta layout.

Posteriormente utilizamos

Código:

 btn=(Button)findViewById(R.id.button);

Para que encuentre el botón en el fichero XML y lo asigne como referencia a la variable btn que hemos creado, mediante este simple proceso podemos definir un componente de la aplicación o Widget desde el fichero XML, y podemos asignarlo a una variable para poder manipularlo.

A partir de ahora podemos cambiar el texto del botón, cambiar su color, tamaño, etc.

Tarea para los estudiantes

Se me ocurrió darles una pequeña tarea para que investiguen y la resuelvan, ahora tan solo les pido que me digan, como cambio el color del botón del ejemplo anterior?

Fin de la Transmisión

Al parecer las cosas se complican un poco, pero no lo vean asi, veanlo como que obtenemos mas herramientas para ser buenos desarrolladores de Android, en breve vamos a ver con más detalle acerca de los distintos tipos de Layouts y Widgets. Por lo tanto, señores a hacer su tarea y publicar imágenes acerca de la misma en el hilo de preguntas, vamos a dar una mención especial al primero que lo haga.

Links

Parte 1 - Introducción a la Plataforma : Programación en Android: Parte I - Introducción a la plataforma
Parte 2 - Fundamentos de Java : Programación en Android: Parte II - Fundamentos de Java
Parte 3 - Hello World: Programación en Android: Parte III – Hello World
Parte 4 - Introducción a los Layouts XML: Programación en Android: Parte IV introducción Layouts XML

Genial el tutorial!!
A la espera de más!!

Gracias!!!