Programación Android III-Interfaz

En anteriores tutoriales de programación Android vimos como configurar el entorno de desarrollo y nuestro primer Hola Mundo. Ahora vamos a intentar realizar una interfaz gráfica para el usuario, donde utilizaremos etiquetas, texto, botones y añadiremos un activity nuevo. Para ello creamos un nuevo Proyecto Android al que le pondremos el nombre que queramos.
Vamos a utilizar varios “LinearLayout” (Contenedores) y conseguir poner un TextView y un EditText juntos en la misma línea.
Escribimos en el main.xml:
xml version=”1.0″ encoding=”utf-8″?>

android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>

android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>

android:layout_height=”wrap_content”
android:text=”@string/mitexto” />

android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />


Dentro de este LinearLayout tenemos los dos elementos, el primero:

android:layout_height=”wrap_content”
android:text=”@string/mitexto” />
Renderiza el contenido de la variable “mitexto” que definamos en strings.xml.
Por ello, en dicho fichero, escribimos:
Prueba de texto
El otro elemento que definimos en el main.xml :

android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />
Es un campo de entrada de texto con identificador probando.
Probamos a arrancar nuestro proyecto:

Ahora vamos a hacer, que al escribir un número en el campo de texto, y al darle a un botón, lo multiplique x2 y aparezca el resultado.
Escribimos en el código del fichero main.xml:


android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>

android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>

android:layout_height=”wrap_content”
android:text=”@string/numero” />

android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />


android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>

android:layout_height=”wrap_content”
android:text=”Resultado” />

android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />


android:text=”@string/multiplicar”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

Explicamos por partes:
Añadimos otro Layout, y dentro de él como hicimos anteriormente, ponemos un label (TextView), y un campo a rellenar(EditText), que en este caso será para mostrar el resultado de la multiplicación.

android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>

android:layout_height=”wrap_content”
android:text=”Resultado” />

android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />

A ambos le damos un “id” identificador que posteriormente añadiremos en el fichero de strings.xml
Luego, fuera de ese layout, añadimos un botón:

android:text=”@string/multiplicar”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

Este botón tiene un id que corresponde a “multiplicar” y un contenido que definimos en el fichero de strings.xml
Ahora en el fichero de strings.xml editamos:




Interfaz
Numero:
Cantidad
Multiplicar x2


Ahora debemos definir la acción determinada, para que cuando pulsemos el botón obtengamos los datos de un campo, lo multipliquemos y aparezca en el de resultado.Vamos a nuestro fichero interfaz.java:

Después de public class Interfaz extends Activity añadimos:

private EditText Minumero;
private EditText Miresultado;


Pulsamos Ctrl+shift+o  y automáticamente añadirá las librerías necesitadas.

Básicamente son “manejadores” que usaremos para entrelazar nuestras acciones en java con la interfaz definida en main.xml

Después de setContentView(R.layout.main), escribimos lo siguiente :


Minumero = (EditText) findViewById(R.id.numero);
Miresultado = (EditText) findViewById(R.id.resultado);

Lo que aquí hacemos, es asignar dichos manejadores a cada elemento definido en el main.xml (R.id.numero y R.id.resultado)
Ahora, añadimos un identificador para el botón justo después de las lineas anteriores:

Button Miboton = (Button) findViewById(R.id.multiplicar);

Que como se puede observar va definido al botón de nuestro xml.
Finalmente vamos a realizar la acción. Cada acción de los botones se define por la función setOnClickListener. Así que escribimos la función que hará que al presionar el botón obtendrá el valor de Minumero, lo multiplicará por dos y lo pondrá en Miresultado.


Miboton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Miresultado.setText(“”+Double.parseDouble(Minumero.getText().toString())*2);
}
});
Como se observa, setText es el método relacionado para añadir el valor y getText para obtenerlo. Ejecutamos nuestro programa:



Para acabar vamos a crear una nueva activity y vamos a ver como ir de una pantalla a otra. En el fichero manifest.xml, después de añadimos:

Aquí le decimos que aparte del Activity principal, también existe otro que se llama Activity2. Como un Activity, depende directamente de su propia interfaz (main.xml) y un fichero Java, tendremos que crear en cada carpeta unos nuevos para Activity2.En mi caso los he llamado main2.xml y Activity2.java
En nuestro main.xml añadimos un nuevo botón para pasar a la siguiente pantalla:

android:text=”Siguiente”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
Definimos está variable al inicio:
private static final int REQST_CODE = 0;
Y definimos un nuevo botón  junto al anterior:
Button Next = (Button) findViewById(R.id.pantalla);
Ahora escribimos la acción que al presionar dicho botón nos llevará a Actitivity2:
Next.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
startActivityForResult(new Intent(Interfaz.this,Activity2.class),REQST_CODE);
}
});
Así quedaría el código:

Arrancamos la aplicación y comprobamos que efectivamente al pulsar el botón pasamos de una pantalla a otra.

Si realizamos lo mismo añadiendo el botón y la acción correspondiente pero a la inversa en nuestro main2.xml y Activity2.java seremos capaces de ir de una ventana para otra.
Próximamente enseñaré como conectarnos a una página web mostrando una imagen, añadir iconos y cambiar el fondo de pantalla.