Android: una caja de texto, un botón y un popup

Siguiendo con esta serie de post sobre Android les voy a compartir el siguiente: una aplicación que tiene un textbox donde se ingresa un texto, un botón “Mostrar” que muestra el texto ingresado en un popup que dura unos segundos.

Layout

En el archivo res/layout/main.xml definimos el layout de nuestra UI, en este caso vamos a definir el área de trabajo: LinearLayout, una caja de texto: EditText y un botón: Button.

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   3:     android:orientation="vertical"
   4:     android:layout_width="fill_parent"
   5:     android:layout_height="fill_parent">
   6:         
   7:     <EditText
   8:         android:id="@+id/txt_message"  
   9:         android:layout_width="fill_parent" 
  10:         android:layout_height="wrap_content" />
  11:     
  12:     <Button 
  13:         android:id="@+id/btn_showMessage"  
  14:         android:layout_width="fill_parent" 
  15:         android:layout_height="wrap_content"
  16:         android:text="@string/btn_showMessage" />
  17:  
  18: </LinearLayout>

Activity

Aquí vamos a definir el comportamiento de nuestra UI, en el evento onCreate de nuestra activity vamos a capturar las instancias del textbox y del botón por su Id en dos variables de instancia de la actividad, luego vamos a setear el listener para el OnClick del botón con un código que toma el texto del textbox y lo muestra como un popup por unos segundos mediante la clase Toast

   1: package com.neluz.MyUI;
   2:  
   3: import android.app.Activity;
   4: import android.os.Bundle;
   5: import android.view.View;
   6: import android.widget.Button;
   7: import android.widget.EditText;
   8: import android.widget.Toast;
   9:  
  10: public class MyActivity extends Activity {
  11:  
  12:     private EditText txtMessage;
  13:     private Button btnShowMessage;
  14:     
  15:     @Override
  16:     public void onCreate(Bundle savedInstanceState) {
  17:         super.onCreate(savedInstanceState);
  18:         setContentView(R.layout.main);
  19:         
  20:         txtMessage = (EditText) findViewById(R.id.txt_message);  
  21:         btnShowMessage = (Button) findViewById(R.id.btn_showMessage);
  22:  
  23:         btnShowMessage.setOnClickListener(new View.OnClickListener() {
  24:             public void onClick(View v) {
  25:                 String str = txtMessage.getText().toString() + "!";
  26:                 Toast.makeText(getBaseContext(), str, Toast.LENGTH_LONG).show();
  27:             }
  28:         });      
  29:     
  30:     }
  31: }

Si investigamos un poco, vamos a encontrar un archivo llamado R.java en la carpeta “gen” que contiene la relación entre los Id reales que van a tener nuestros controles con los nombres que nosotros indicamos que tengan. Esto nos relaciona el código de la activity con el layout.

AndroidManifest.xml

El manifiesto de nuestra aplicación debe lucir algo así como:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   3:       package="com.neluz.MyUI"
   4:       android:versionCode="1"
   5:       android:versionName="1.0">
   6:     <application android:icon="@drawable/icon" android:label="@string/app_name">
   7:  
   8:  
   9:     <activity android:label="@string/app_name" android:name=".MyActivity">
  10:         <intent-filter>
  11:             <action android:name="android.intent.action.MAIN" />
  12:             <category android:name="android.intent.category.LAUNCHER" />
  13:         </intent-filter>
  14:     </activity>
  15: </application>
  16:  
  17:  
  18: <uses-sdk android:minSdkVersion="3"></uses-sdk>
  19: </manifest> 

las líneas mas relevantes son de la 9 a la 15 donde definimos nuestra actividad, la acción y su categoría.

strings.xml

en este archivo definimos las cadenas de texto que vamos a usar en otras partes de la aplicación como puede ser el manifiesto, el layout, etc.

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <resources>
   3:     <string name="app_name">MyPopup</string>
   4:     <string name="btn_showMessage">Mostrar</string>
   5: </resources>

Resultado

image Una aplicación con una caja de texto y un botón que muestra el valor ingresado en la caja de texto al ser presionado.

Primer aplicación sobre Android

Configurar Eclipse como IDE

Primero debemos de instalar Eclipse IDE for Java Developer si es que aun no lo tenemos instalado y el SDK de Android desde los sitios oficiales (la instalación de estos dos software se trata simplemente de descomprimirlos).

Luego debemos instalar el plugin de Android en Eclipse –> Help –> Install New Software –> Add y utilizando la siguiente url como repositorio: https://dl-ssl.google.com/android/eclipse y seleccionando el Android Development Tools.

Y para finalizar, debemos configurar en Windows –> Preferences –> Android la ubicación donde se encuentra el SDK de Android y elegir la(s) versión(es) de Android para la(s) vamos a desarrollar.

Configurar el dispositivo virtual

En Windows –> Android SDK and AVD Manager podremos configurar nuestro dispositivo virtual, en mi caso le puse Touch Screen.

Desarrollando el Hola Mundo

Vamos a File –> New –> Project y elegimos “Android Proyect”, en la siguiente pantalla configuramos:

image

Project Name: el nombre del proyecto.

Build Target: Android 1.5 (en mi caso)

Application name: nombre amigable para el usuario de la aplicación bajo el SO Android.

Activity name: el nombre de la actividad que estamos creando.

luego, podemos navegar en el Package Explorer hasta llegar a nuestra clase HolaMundoActivity dentro de src, y en el método onCreate que ya está generado, esta clase debería lucir de la siguiente manera:

package com.neluz.holaMundo;

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

public class HolaMundoActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView tv = new TextView(this);      
        tv.setText("Hola Mundo");
        setContentView(R.layout.main);
    }
}

Run

Luego solo nos falta darle “Run”, si nos pregunta que como queremos ejecutarla le decimos que como Android Application y si nos pregunta por el dispositivo, elegimos el que creamos. La primera vez puede tardar un poco hasta que arranca el “teléfono” (dispositivo virtual). La aplicación debería ser lanzada automáticamente y deberíamos ver algo como la imagen de la derecha.

image

Referencias

http://www.devx.com/wireless/Article/39101