CURSO DE DESARROLLO

ANDROID. TEMA 9: MI
SEGUNDA APP PARA
ANDROID, ¡HOLA MUNDO!
PERSONALIZADO
Portada » Tutoriales » Android » Cómo crear una app Android paso a paso y desde cero » 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 ) + "" + Ente
redName;
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