Curso de Desarrollo Android. Tema 9: mi segunda App para Android, ¡Hola Mundo! personalizado

Ya hemos estado viendo varios de los elementos básicos de una aplicación para Android, así que ahora vamos a ponerlos en práctica. Basándonos en la aplicación básica de todo lenguaje de programación, «Hello World!», en esta ocasión vamos a crear una segunda aplicación muy similar en la que seamos nosotros mismos quienes introduzcamos nuestro nombre en un cuadro de texto para que al pulsar sobre un botón nos aparezca un saludo personalizado.

Para desarrollar esta aplicación podemos aprovechar el proyecto «Hello World!» que creamos en un artículo anterior o crear uno nuevo. En nuestro caso vamos a crear uno desde cero para tratar, paso a paso, todos los aspectos con los que nos podemos encontrar.

Caja de texto, etiqueta y botón, los 3 elementos básicos de una aplicación Android

Lo primero que debemos hacer es crear un nuevo proyecto de Android. No vamos a profundizar en este aspecto porque lo hemos visto anteriormente. Si tenemos dudas debemos repasar los tutoriales anteriores.

En nuestro caso, los valores que asignaremos a nuestro nuevo proyecto serán:

• Application Name: Hola Personalizado
• Company Domain: movilzona.es
• Package Name: es.movilzona.holapersonalizado
• SDK API 16

Una vez creado el proyecto veremos una ventana similar a la siguiente.

Lo primero que vamos a hacer es eliminar código innecesario. Este paso es opcional, aunque recomendable para tener una aplicación lo más optimizada posible. Para ello vamos a ir al archivo MainActivity.java y eliminamos (o comentamos) el código que no vayamos a utilizar, quedando el resultado similar al siguiente.

Como podemos ver, en el método onCreate() hemos dejado solo su llamada y la llamada al layout que vamos a utilizar, en este caso R.layout.activity_main.

/* Recordamos

En Android Studio, el fichero .java indica al programa el layout que vamos a utilizar. Dicho layout, en este caso activity_main, define la actividad que aparecerá en pantalla y, a su vez, hace referencia al fichero content.main que define los elementos que aparecerán y las características de estos.

*/

Añadir los elementos al Layout

A la hora de crear elementos en Android Studio podemos hacerlo tanto a mano, escribiendo todo el código en los ficheros correspondientes, como arrastrando los elementos deseados desde el panel IDE al smartphone que nos aparece para dar la apariencia deseada.

Nosotros, para no complicarnos, vamos a hacerlo por el modo sencillo, es decir, arrastrando los elementos y colocándolos en la interfáz según queramos. Para ello, lo primero que haremos será abrir el modo «diseño» del archivo «content_main.xml» y eliminar ahí el cuadro de texto «Hello World!» que nos aparece al haber creado el proyecto por primera vez.

A continuación, añadiremos los elementos deseados. En nuestro caso vamos a necesitar:

• Tres TextBox, donde aparecerá un texto.
• Un TextField, donde introduciremos nuestro nombre.
• Un Button para ejecutar la acción.

Una vez arrastrados los 3 elementos debemos colocarlos como más nos guste. En nuestro caso vamos a hacerlo que en la parte superior nos pregunte el nombre y tengamos el hueco para escribirlo, debajo de ello el botón de saludo y en la parte central de la pantalla que nos muestre el saludo personalizado.

Una vez colocados los elementos deberíamos ver el programa con una apariencia similar a la siguiente.

Configurar textos e IDs de los elementos

Una vez colocados los elementos, antes de continuar, vamos a configurar el identificador que vamos a dar a cada elemento y el texto que nos mostrará en la pantalla.

Esto podemos hacerlo de varias formas, aunque la más sencilla es hacer doble clic sobre el elemento en cuestión y rellenar los cuadros que nos aparecen.

El recomendable que cada elemento tenga un ID único y fácil de recordar, ya que lo necesitaremos más adelante para que todo funcione correctamente. Una vez tenemos la apariencia básica del programa y hemos vuelto a reordenar los elementos (si no encajaban bien) podemos continuar con el desarrollo del programa.

También os dejamos la configuración que hemos hecho nosotros de los elementos con sus correspondientes IDs para que podáis comprender mejor el código fuente:

Programar el funcionamiento de la aplicación

Ahora es cuando empezaremos a programar en Java. Lo que queremos hacer en primer lugar es que cuando pulsemos el botón, este haga algo, por lo que lo primero que debemos hacer es asignarle una referencia (para asignarla al código correspondiente) y escribir el código de lo que va a hacer dicho botón.

//Referencia

Button button = (Button)findViewById(R.id.BotonSaludo);

//Código del botón

button.setOnClickListener (new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 //Qué hará el programa cuando pulsemos el botón
 ...
 }
 } );

A continuación, debemos configurar el elemento desde el que se va a coger el nombre (donde lo hemos escrito) y dónde se va a copiar de manera que cuando pulsemos sobre el botón el programa coja el código del cuadro, lo copie al apartado de saludo y lo muestre por la pantalla.

En resumen, el código fuente del MainActivity.java será el siguiente:

public class MainActivity extends AppCompatActivity {

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 //añadimos el botón
 Button button = (Button)findViewById(R.id.BotonSaludo);
 button.setOnClickListener (new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 //Qué hará el programa cuando pulsemos el botón
 EditText text = (EditText) findViewById(R.id.CuadroNombre);
 String EnteredName = text.getText().toString();
 String salutation = getResources().getString(R.string.TextoSaludo ) + "" + EnteredName;
 TextView out = (TextView)findViewById(R.id.SaludoPersonalizado);
 out.setText(salutation);
 }
 } );
 }
 }

Más adelante subiremos los códigos a GitHub para que podáis descargarlos sin problemas. También publicaremos una guía de Git y GitHub para que podáis llevar el control sobre vuestros proyectos.

Ya tenemos el programa listo. Lo único que debemos hacer es compilarlo y cargarlo en la máquina virtual para comprobar que, efectivamente, funciona.

Si tienes alguna duda, pásate por el Foro de MovilZona donde hemos creado un post para las consultas al respecto de este tema.