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

Autor: | Posteado en Android Sin comentarios

Ya hemos estado mirando muchos 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 inventar una 2.ª aplicación muy parecido en la que seamos nosotros mismos quienes introduzcamos vuestro nombre en un cuadro de texto para que al teclear sobre un botón nos aparezca un saludo personalizado.

Para construir esta aplicación podemos aprovechar el proyecto “Hello World!” que creamos en un artículo previo o inventar uno nuevo. En vuestro caso vamos a inventar 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(tres) elementos básicos de una aplicación Android

Lo 1.º que debemos inventar es inventar un renovado proyecto de Android. No vamos a profundizar en este aspecto porque lo hemos visto anteriormente. Si tenemos dudas debemos repasar los manuales anteriores.

En vuestro caso, los valores que asignaremos a vuestro renovado proyecto serán:

  • Application Name: Hola Personalizado
  • Company Domain: movilzona.es
  • Package Name: es.movilzona.holapersonalizado
  • SDK API(Interfaz Programación Aplicaciones) 16

Una vez inventado el proyecto observaremos una ventana parecido a la siguiente.

Lo 1.º que vamos a inventar es borrar código innecesario. Este paso es opcional, sin embargo 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 parecido 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 señala al programa el layout que vamos a utilizar. Dicho layout, en este caso activity_main, define la ocupación 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 inventar 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 móvil 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 1.º que haremos será abrir el modo “diseño” del archivo “content_main.xml” y borrar ahí el cuadro de texto “Hello World!” que nos aparece al haber inventado el proyecto por 1.ª vez.

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

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

Una vez arrastrados los 3(tres) elementos debemos colocarlos como más nos guste. En vuestro caso vamos a hacerlo que en la parte superior nos pregunte el nombre y tengamos el hueco para escribirlo, abajo 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 mirar el programa con una apariencia parecido a la siguiente.

Configurar textos e IDs de los elementos

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

Esto podemos hacerlo de muchas formas, sin embargo la más sencilla es inventar doble click 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 seguir con el crecimiento del programa.

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

Programar el funcionamiento de la aplicación

Ahora es cuando empezaremos a programar en Java. Lo que queremos inventar en 1.er lugar es que cuando pulsemos el botón, este haga algo, por lo que lo 1.º que debemos inventar es asignarle una referencia (para asignarla al código correspondiente) y escribir el código de lo que va a inventar 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 programar 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 inventar es compilarlo y cargarlo en la máquina virtual para confirmar que, efectivamente, funciona.

Si teneis alguna duda, pásate por el Foro de MovilZona donde hemos inventado un post(artículo) para las consultas al respecto de este tema.

Enlaces

El capítulo Curso de Desarrollo Android. Tema 9: mi 2.ª Apps para Android, ¡Hola Mundo! personalizado se publicó en MovilZona.

MovilZona


Fuente del contenido original se encuentra más arriba (enlace), respetando todos los derechos de autor.

La prensa de Core i7

También puedes revisar estas noticias relacionadas.

Agrega tu comentario