Por @RoberVs Roberto von Schoettler.

Continuación de la Parte II

Una vez preparada cualquier aplicación para ser probada, es necesario iniciar una Máquina Virtual de Android (AVD) para correr las aplicaciones. Para ello haremos lo siguiente:

Creamos una máquina virtual. Nos dirigimos a la barra de menú superior -> Window -> Android SDK and AVD manager:

Nos abrirá una ventana que nos muestra una lista de las máquinas virtuales disponibles. Si no tenemos ninguna, procedemos a crearla

Una ventana emergerá que nos permitirá fijar un nombre, la versión que tendrá el dispositivo y el tamaño en la memoria SD (opcional). En éste caso llamaremos la máquina virtual SrDroid2.2, de versión, Android 2.2 y la memoria SD podría fijarse de 512, con eso será suficiente.

Clic en “Create AVD”. Ahora, aparecerá en lista. La seleccionamos y damos clic a “Start…” Aparece una ventana de opciones, es recomendable que demos “check” a “Scale display to real size” y fijemos un tamaño de pantalla de 7 pulgadas.

Una vez hecho ésto, se iniciará nuestro emulador de Android:

En éste estado, la máquina virtual está lista para trabajar, damos clic derecho al proyecto “Test001” -> Run As -> Android Application:

Al correr la aplicación, podemos probar lo que hemos hecho. Si escribimos algo en el área de texto y le damos clic al botón, vemos que el TextView que se encuentra debajo cambia su texto por lo escrito en el área de texto.

Para hacer ésto más divertido, provoquemos un error. Comentemos la línea que relacionamos el botón declarado en la clase Java con el botón creado en main.xml por medio de su ID en R. Ésto provocará un error en tiempo de ejecución porque a la hora de asignar el evento OnClickListener, el botón no estará relacionado en la interfaz.

    ET = (EditText)findViewById(R.id.editText1);
    TV = (TextView)findViewById(R.id.textView1);
//  BTN = (Button)findViewById(R.id.button1);

Si corremos la aplicación nuevamente, nos encontraremos con ésto:

Así es como se manifiesta un error en tiempo de ejecución (Force Close, vete a bañar). Para saber qué salió mal, necesitamos la pestaña de “LogCat”. La buscamos en las Views, yendo al menú superior Window -> Show View -> Other

Ahora desplegamos la carpeta Android y buscamos LogCat

Por medio de éste Log, podemos hacer seguimiento a lo que hace el emulador. Es ideal para detectar errores en tiempo de ejecución. Si corremos la aplicación una vez más y prestamos atención al Log, podemos ver como nos muestra el error en letras rojas. Si nos enfocamos en la línea que dice “Caused by:” nos dice “java.lang.NullPointerException”, donde haciendo doble clic en la línea que le sigue, nos mostrará qué provocó el error. Nos apunta a la línea en donde asignamos el evento OnClickListener al botón.

Con ésto termina éste tutorial que solo echa un vistazo a la programación para Android en el ambiente Eclipse, cubiertos los aspectos principales, es cuestión de investigación para extender lo aquí demostrado y hacer algo más grande.

Espero que les sea de utilidad :). No duden contactarme por Twitter.

Por @RoberVs Roberto von Schoettler.

Se recomienda tener un conocimiento básico en programación en Java para éste tutorial.

Al tener la interfaz lista para ésta prueba, desde la Parte I

Ahora procederemos a conocer el Activity, que se encuentra en la carpeta src como una clase Java.

Al abrir el archivo, por defecto nuestro entorno Eclipse para desarrollo Android auto-genera éste código:

package com.test;

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

public class Test001Activity extends Activity {

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

Nótese que nuestra clase creada extiende a la clase Activity, quiere decir que hereda todas sus variables y métodos. He allí donde obtenemos los métodos auto-generados que se muestran en el código,

El método OnCreate se llama cuando la Activity es creada. Todo lo que queramos hacer cuando la Activity se inicie, se coloca dentro de éste método.

El método setContentView(int id); Es quién busca el id auto-generado de “main.xml” por medio de la clase R.java que mencionamos en la Parte I, de ésta manera se le indica que la interfaz del Activity será, en éste caso, main.xml.

setContentView(R.layout.main);

Una vez entendido ésto, podemos también, a través de la clase R crear componentes y relacionarlos con el layout que tenemos.

1. Importamos los paquetes necesarios y declaramos los componentes:

package com.test;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class Test001Activity extends Activity {

EditText ET;
TextView TV;
Button BTN;

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

2. Relacionamos los componentes creados en ésta clase con los creados en el layout (ésto debe hacerse dentro del método OnCreate)

    ET = (EditText)findViewById(R.id.editText1);
    TV = (TextView)findViewById(R.id.textView1);
    BTN = (Button)findViewById(R.id.button1);

Nota: Los IDs tales como editText1 pueden ser modificados desde main.xml, clic derecho en el componente, clic en Edit ID…

3. Ahora que ya tenemos relacionados los componentes, podemos hacer algo sencillo como que el botón haga que lo escrito en el EditText sea mostrado en el TextView. Para ello necesitamos un OnClickListener:

private OnClickListener MostrarTexto = new OnClickListener(){
        public void onClick(View v) {

               //TV mostrará el texto escrito en ET.
            TV.setText(ET.getText().toString()); 

        }
    };

Es importante recordar importar los paquetes necesarios, pero en caso de que lo olvidemos, Eclipse nos mostrará un error. Haciendo clic en la bombilla, nos sugiere el importe

Ahora simplemente procedemos a asignar el método OnClickListener creado al botón:

BTN.setOnClickListener(MostrarTexto);

Finalmente deberíamos tener algo como ésto en nuestro Activity:

package com.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class Test001Activity extends Activity {

EditText ET;
TextView TV;
Button BTN;

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

    ET = (EditText)findViewById(R.id.editText1);
    TV = (TextView)findViewById(R.id.textView1);
    BTN = (Button)findViewById(R.id.button1);

    BTN.setOnClickListener(MostrarTexto);
 }

private OnClickListener MostrarTexto = new OnClickListener(){
    public void onClick(View v) {
        TV.setText(ET.getText().toString());
        }
    };
}

En la próxima parte, aprenderemos a cómo probar aplicaciones Android por medio de máquinas virtuales (ADV, Android Virtual Machine) a través del Android SDK (Software Development Kit).

Parte III

Por @Rober_Vs Roberto von Schoettler.

Una vez que tengamos preparado el entorno de Eclipse, el ADT (Android Development Tools), el Android SDK (Software Development Kit) y el AVD Manager (Android Virtual Machine) para el desarrollo por medio de éste tutorial, podemos proceder a explorar las posibilidades que nos presenta Android.

1. Iniciamos Eclipse (en éste caso, usaré MOTODEV). Nos mostrará una ventana para elegir donde guardar los archivos de los proyectos:

Luego nos mostrará su ventana de inicio, para empezar a trabajar, damos click en “Workbench” y allí nos mostrará el entorno de trabajo.

2. Crear el nuevo proyecto. Nos dirigimos a la barra de menú superior:

Hacemos click en “File” -> “New” -> “Android Project”. En caso de no aparecer la opción de “Android Project”, nos dirigimos a “Other”

Se abre una nueva ventana. Desplegamos la carpeta “Android” y damos click a “Android Project”

Surge una ventana la cual nos pide datos del proyecto. Colocamos un nombre cualquiera, para éste tutorial usaré el nombre “Test001”.

Más abajo debemos declarar bajo qué versión trabajaremos. Para mayor compatibilidad, generalmente se selecciona una versión no mayor a Android 2.2, para éste tutorial seleccionaremos Android 1.6. Procedemos a darle el nombre al paquete (Nota: el paquete debe tener al menos 2 identificadores: algo.algomas), en éste caso “com.test”, aunque pudiese haber sido “test.com” o “foo.fighters” o “red.hot.chili.peppers”.

Click en “Finish”.

3. Empezando: Eclipse auto-generará carpetas y archivos para el proyecto. Para empezar nos enfocaremos en:

src: Donde se guardarán todos los archivos de código fuente.

gen: Carpeta que contiene la clase R.java, la cual se modifica automáticamente. Más adelante entenderemos un poco su función, el archivo en sí nos indica que no debe ser modificado manualmente.

/* AUTO-GENERATED FILE.  DO NOT MODIFY.
 *
 * This class was automatically generated by the
 * aapt tool from the resource data it found.  It
 * should not be modified by hand.
 */

res: Carpeta de recursos. Contiene las carpetas “drawable”, que es donde se guardarían íconos e imágenes contenidos en la aplicación, “layout” que serán las interfaces a usar y “values”, que serán valores que pueden ser usados como variables constantes (ej: strings) a utilizar en la app.

4. Interfaz: Empezaremos a crear la interfaz, para eso abrimos el archivo “main.xml”. Nos mostrará una pantalla negra para móvil que por defecto contendrá un LinearLayout con un TextView (mejor conocido como Label). Los LinearLayout pueden ser horizontales o verticales, son contenedores que resguardan sus componentes en una sola columna (para el caso del Vertical LinearLayout) o una sola fila (Horizontal).

Del costado izquierdo (Palette) desplegamos la carpeta “Layout” y agregamos un Horizontal LinearLayout. Ésto se hace estilo Drag & Drop (Mantener click sobre el componente, arrastrarlo adonde se desee y soltarlo).

De Palette, ahora desplegamos la carpeta “Text Fields”, agregamos un EditText sencillo y lo insertamos dentro del Horizontal LinearLayout.

.

Desde Palette, desplegamos “Form Widgets” e insertamos un botón junto al EditText. Es el Horizontal LinearLayout quién nos permite colocarlos lado a lado (en una misma fila).

Ajustamos el tamaño del botón al gusto. Para cambiarle el texto, que diga otra cosa que no sea “Button”, o cualquier otra propiedad de cualquier componente tenemos 2 alternativas:

4.1 Conociendo los Views: En la barra de menú superior, click a Window -> Show View -> Other…

Nos mostrará las diversas pestañas que podemos tener a disposición. Desplegamos la carpeta “General” y abrimos “Properties”. Automáticamente se agregará como pestaña al costado derecho junto a “Outline”

Éste View nos muestra todas las propiedades del componente seleccionado, buscamos la propiedad “Text” y la cambiamos.

(Nota: Las pestañas o Views, pueden ser colocadas en cualquier lado de acuerdo al gusto del consumidor, estilo Drag & Drop.)

4.2 Código XML: Justo debajo de las Palette podemos notar 2 pestañas “Graphical Layout” y “main.xml”. Hacemos click en “main.xml” para ir al código.

Podemos observar todo lo que nos muestra la pantalla gráfica en código. Buscamos la línea en donde se declara el Botón y cambiamos la propiedad “android:text” que por defecto es igual a “Button”.

Por último, agregamos un TextView (Palette -> Form Widgets) debajo del EditText y el Botón.

Aquí culmina la primera parte de éste tutorial para conocer el entorno de desarrollo para Android. En la próxima parte, interactuaremos con los Activity que son las clases de Java que le dan vida a las interfaces. Continuaremos a partir de la interfaz aquí realizada.

Parte II