Desarrollo en Android (IV): creación de interfaces y acceso a recursos

Ahora me toca hablar de las interfaces, los componentes gráficos de las aplicaciones. Como dije en otra entrada anterior, los diseños o layouts se encuentran en el directorio res/layout.

Para crear un nuevo diseño hacemos click en el botón derecho y vamos a la opción New > Android XML File. A continuación tenemos que poner nombre a nuestro diseño y seleccionar, si no viene por defecto, el tipo layout:

Después de eso sólo tenemos que abrir el nuevo fichero para ver la vista del editor de interfaces. Es posible editar el fichero como texto, pero por comodidad suelo usarla (aunque algunas veces impida hacer cosas que puedas hacer editando a mano).

La vista de edición de interfaces muestra a la izquierda la lista de componentes que podemos arrastrar a la pantalla, en el centro, y del tamaño que seleccionemos en las opciones de arriba, y a la derecha se muestra el árbol de elementos:

Para empezar hay que echar un ojo al apartado de Layouts. Por ahora he utilizado dos tipos:

• LinearLayout: funciona como un vector de elementos gráficos al que podemos fijar orientación vertical u horizontal. Yo antes combinaba varios de este tipo para crear filas y columnas, como si se tratara de una tabla.
• RelativeLayout: permite definir las posiciones de unos elementos a partir de otros. Para empezar arrastramos un componente de la interfaz a uno de sus cuatro márgenes para alinearlo. Después de esto podemos arrastrar los otros unos sobre otros empleando una cuadrilla que nos permite decir donde se sitúan. La ventaja es que permite crear diseños complejos empleando sólo un layout (NOTA: conviene dar un ID a un elemento antes de colocar y añadir otro). Aquí un ejemplo de lo de la cuadrilla:

Y el resultado de soltar el botón sobre su esquina inferior derecha:

Las interfaces no tienen mayor misterio, es echarle un rato a añadir botones, campos de texto, imágenes, fondos, etc, etc, yo iré poniendo en el blog trucos que aprenda. ¡Hay que jugar mucho con la pestaña de properties de cada componente, tienen de todo! (Nota2: para alinear elementos dentro de los layouts, emplear el atributo Gravity). Pestaña de properties de un campo de texto (EditText):

Y para acabar me voy a crear un label (TextView), un botón (Button) y un campo de texto dentro de un LinearLayout y voy a enseñaros como llamar a los elementos desde la actividad. Mi árbol de elementos queda así:

Y el código de la actividad HelloAndroid:

package com.example.helloandroid;
 
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
 
public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.new_layout);
 
        //Cargo los elementos de la interfaz haciendo un casting y usando los IDs con R
        TextView mi_etiqueta = (TextView) findViewById(R.id.mi_etiqueta);
        EditText mi_texto = (EditText) findViewById(R.id.mi_texto);
        Button mi_boton = (Button) findViewById(R.id.mi_boton);
 
        //Cambio el texto del label
        mi_etiqueta.setText("Introduce un texto");
        //NOTA: El hint es la sugerencia que se ve antes de teclear
        mi_texto.setHint("El texto debe ir aquí");
        //Fijo el color de fondo del boton
        mi_boton.setBackgroundColor(Color.YELLOW);
 
    }
}

Hasta ahora he hablado por encima de como instalar el SDK y correr un emulador, como crear un proyecto nuevo, que es una actividad, como cambiar entre ellas y como crear una interfaz y llamar a sus elementos.

Creo que a partir de ahora voy a escribir trucos y otras cosas que vaya encontrando y que me hagan falta, como descarga y envio de ficheros, galerias, eventos, degradados y efectos de la intefaz, etcs. Un saludo!