Segundo programa en Android

Realizaremos una aplicación en donde te va a decir Hola y tu tecleras tu nombre y te saldra Hola [nombre].

Abrimos eclipse y lo que haremos es modificar el proyecto que realizamos en la entrada anterior, por el momento solo le quitamos el nombre que le pusimos y la carita feliz en el string primero, el código era el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="hello">Escribe tu nombre</string>
    <string name="app_name">Hola </string>

</resources>

Lo primero que haremos sera modificar la pantalla principal en donde modificaremos la que nos creo eclipse al momento de crear el proyecto, recuerden que en el primer programa que realizamos solo le cambiamos el saludo o mensaje que nos desplegaba.

 En Android, el diseño y la lógica de una pantalla estan separados en dos ficheros distintos. Por un lado, en el fichero /res/layout/main.xml tendremos el diseño puramente visual de la pantalla definido como fichero XML y por otro lado, en el fichero /src/paquetejava/PrimeraAplicación.java, encontraremos el código java que determina la lógica de la pantalla.


Primer pantalla

Primero que nada entraremos al main pero en lapestaña de Graphical Layout para poner algunos botones, sera una interfaz grafica pequeña:

Ahora seleccionaremos los componentes que utilizaremos del siguiente menú:

Y de lado derecho nos aparece como se veria la interfaz y como se ve hasta el momento:

 Ocupamos un TextView del submenu Text Fields en este caso el primero:






 Para poder ponerlo en nuestro proyecto lo unico que tenemos que hacer es arrastrarlo de lado derecho a la pantalla del celular que mostramos anteriormente.

Ya arrastrado se nos muestra de la siguiente manera:

Ahora seleccionamos un button del siguiente menu:

Y realizamos lo mismo arrastramos el Button y queda asi:

Ahora nos checamos en pestaña main.xml y vemos el código y ahi se inserto lo que pusimo:

En este XML se definen los elementos visuales que componen la interfaz de nuestra pantalla principal y se especifican todas sus propiedades.

Código XML realizando los cambios necesarios para después realizar la lógica:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" /> 

    <EditText
        android:id="@+id/TxtNombre"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/buttonHola"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Enviar" />

</LinearLayout>

Quedara asi:

Como vemos primero que nos encontramos es un elemento LinearLayout. Los layout son elementos no visibles que determinan cómo se van a distribuir en el espacio los controles que incluyamos en su interior. Los programadores java, y más concretamente de Swing, conocerán este concepto perfectamente. En este caso, un LinearLayout distribuirá los controles uno tras otro y en la orientación que indique su propiedad android:orientation.

Dentro del layout hemos incluido 3 controles: una etiqueta (TextView), un cuadro de texto (EditText), y un botón (Button). En todos ellos hemos establecido las siguientes propiedades:

• android:id. ID del control, con el que podremos identificarlo más tarde en nuestro código.
• android:text. Texto del control.
• android:layout_height y android:layout_width. Dimensiones del control con respecto al layout que lo contiene.

Ahora ya tenemos definida la presentación visual de nuestra ventana principal de la aplicación.

Segunda pantalla

Después crearemos la interfaz de la segunda pantalla para poder hacer esto nos vamos al menu File--> New-->Other y nos saldra una ventana en la cual seleccionaremos  Android XML Layout File

 Nos aparecerá una pantalla en la que debemos indicar el tipo de archivo que crearemos y el nombre del mismo, en mi caso le di el nombre de msj y le damos finalizar:

Ahora vemos que ya nos sale en layout:

También ya vemos que nos sale de lado derecho para crear la interfaz.

En esta pestaña solo agregamos un TexView

Ynos genero este código xml dode ya lo arreglamos para la lógica:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$mensaje" />

</LinearLayout>

Ya que tenemos la interfaz definida de las dos pantallas de nuestra aplicación, ahora nos toca implementar lalógica de esta misma, se definira en ficheros java independientes, para la pantalla principal ya tenemos creado un fichero por defecto llamado PrimeraAplicacion.java. la cual el código es el siguiente:

package com.Hola;

import android.app.Activity;
import android.os.Bundle;

public class PrimeraAplicacion extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    
}

Las diferentes pantallas de una aplicación Android se definen mediante objetos de tipo Activity. Lo primero que encontramos en nuestro fichero java es la definición de una nueva clase PrimeraAplicacion que extiende a Activity. El único método que sobreescribiremos de esta clase será el método OnCreate, llamado cuando se crea por primera vez la actividad. En este método lo único que encontramos en principio, además de la llamada a su implementación en la clase padre, es la llamada al método setContentView(R.layout.main). Con esta llamada estaremos indicando a Android que debe establecer como interfaz gráfica de esta actividad la definida en el recurso R.layout.main, que no es más que la que hemos especificado en el fichero /res/layout/main.xml. vamos a crear una nueva actividad para la segunda pantalla de la aplicación análoga a ésta primera, para lo que crearemos una nueva clase Mensaje que exienda de Activity y que implemente el método onCreate indicando que utilice la interfaz definida en R.layout.frmmensaje. Para crear la clase nos vamos al menu Fule-->New-->Class y se nos abrira la siguiente ventan en donde ponemos el nombre de nuestra clase Mensaje y le damos finalizar:

Nos crea la clase y genera este código

package com.Hola;

import android.app.Activity;

public class Mensaje extends Activity {

}

Ahora lo modificaremos a lo siguiente:

package com.Hola;

import android.app.Activity;
import android.os.Bundle;

public class Mensaje extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);
  setContentView(R.layout.msj);
}
}

El código incluido por defecto en estas clases lo único que hace es generar la interfaz de la actividad. Ahora nosotros tendremos que incluir el resto de la lógica de la aplicación. Comenzamos con la actividad principal PrimeraAplición obteniendo una referencia a los diferentes controles de la interfaz que necesitemos manipular, en nuestro caso sólo el cuadro de texto y el botón. Para ello utilizaremos el método findViewById() indicando el ID de cada control, definidos como siempre en la clase R: