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

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.