Primera Aplicacion en android

Visita nuestra nueva pagina aqui: http://jamper91.byethost7.com/

Hoy vamos a crear nuestra primera y sencilla aplicación para android. Esta aplicacion constara de una pagina que contendra:

• Cuadro de texto
• Boton
• Visualizador de Texto

La aplicacion consistira en que se digite un texto en el cuadro, el cual al dar clic en el botón se visualizara el texto en pantalla

El esquema general de la aplicacion quedaria asi:

Creacion Aplicacion:

Ahora si vamos a lo nuestro, estos son los pasos para crear laaplicacion:

• Abrimos nuestro eclipse con Android y damos clic en "File->New->Android Aplication Project"

• Ahora digitamos algunos parametros como:
  
  • Application name: Es el nombre del proyecto, en este caso proyecto1
  • Project Name: Muy parecido a lo anterior.
  • Package name: Es el paquete donde se guardara el proyecto, en mi caso lo edite por com.jamper91.proyecto1, podeis editarlo de la siguiente manera "com.usario.nombreproyecto"
  • Minumun Required SDK: Eso hace referencia a la version minima de android que tiene que tener el dispositivo para que sea compatible la aplicacion

• En este paso debemos verificar que la opcion de "Create custom launcher icon" y "Create activity" esten seleccionadas

• En esta parte, es para personalizar el icono con que podremos acceder a la aplicacion, si queremos un icono damos clic en Image y seleccionamos alguna, pero para nuetro caso escojemos Text y digitamos p1

• En esta parte escojemos como sera nuestra Actividad principal, dejamos la que esta por defecto (BlackActivity)

• Debemos de colocarle un nombre a nuestra activida y a nuestro layour.
  
  • La actividad sera nuestra clase de java que contendra el codigo de la logica de la aplicacion
  • El layout es la parte que sera visible para el usario, es la cual manipularemos (con XML) para editar nuestra interfaz grafica

• Ya terminamos con la configuracion inicial, ahora nos saldra una pantalla con un mensaje en el medio, nos encargamos de borrar dicho para que nuestra pantalla quede en blanco como en esta imagen

Diseño Interfaz:

Ahora nos encagaremos de colocar los eementos correspondientes en la zona blanca para que el usuario pueda interactuar con ellos. Para nuestro caso usaremos 3 elementos (se encuentra en la Zona 1):

• TextView Large: Es el cual usaremos para visualizar el mensaje, lo encontraras en FormWidgets->Large
• Button Small: Es el boton que generara la accion, lo encontraras en FormWidgets -> Small
• EditText: Es donde el usuario digitara el texto, lo encontraras en TextFields->plainText (es el que tiene las letras abc)

Para colocarlo en nuestro layout simplemente los escojemos y los arrastramos hasta la zona blanca y los organizamos uno por uno, de tal manera que queden organizados como podemos ver abajo



Ahora fijate que en la zona de OutLine (Zona 2), podes ver los elementos que agregar y veras que yo les coloque un nombre especial para cada uno:

• TextView Large: txtMensaje
• Button Small: btnAccion
• EditText: lblTexto

Para colocarles ese nombre solo debes seleccionar el elemento de la zona de dibujo y en la parte de Properties (debajo de la de OutLine, Zona 3) hay un elemento llamado ID (Zona 4) dentro del cual esta el texto "+@+id/nombreElemento" cambiar lo que esta por delante de @+id/ y colocas el nombre que desees, o el que yo coloque (en la imagen anterior podes ver eso con detalles)

Si de casualidad tras cambiar el nombre de los elementos se te desordenana, revisa que el elemento lblTexto tenga en la propiedad Below el nuevo nombre del boton

Ahora vamos a realizar un pequeño truco para responder al evento clic sobre el boton, para eso:

• Nos vamos a la vista XML de nuestro layout, dando clic en "activity_inicio.xml"
• Buscamos el boton dentro del codigo xml y agregamos la linea como se muestra en la siguiente imagen

Codigo Fuente:

Tras haber terminado la parte de la interfaz grafica, no vamos a enfocar en desarrollar el codigo necesario para que nuestra aplicacion funcion. Primero que nada debemos buscar nuestra actvidad, la cual se encuentra en la carpeta src de nuestro proyecto

• La abrimos y podremos ver el codigo fuente que nos genero eclipse

• Debemos añadir algunas lineas las cuales explicare a continuacion
  

  //Declaramos los elementos a usar
   EditText txtMensaje;
   Button btnAccion;
   TextView lblTexto;
  
      //Inicialiamos los elementos
   txtMensaje=(EditText)findViewById(R.id.txtMensaje);
   lblTexto=(TextView)findViewById(R.id.lblTexto);
  
  //Creamos el metodo que respond al evento clic del boton, recibimos comoparametro un View
   public void accion(View v)
   {
    //Realizamos una accion basado en el elemento que llame a este codigo
    switch(v.getId())
    {
     //En caso de que el boton accion sea el detonador del evento
     case R.id.btnAccion:
      //Sacamos el texto del cuadro
      String mensaje=txtMensaje.getText().toString();
      //Muestro el texto en el TextView
      lblTexto.setText(mensaje);
      break;
    }
   }

• Al final nos queda este codigo

Ahora, para poder probarlo debemos seleccionar nuestro proyecto y luego dar clic en Run (flecha verde) y escoger que se ejecute como una aplicacion android





Tras el paso anterior, la aplicacion empezara a cargar el emulador, para desbloquear este, solo debemos mover el candao haci la imagen del candado abierto



Y ya tendremos nuestra primera aplicacion aplicacion de android corriendo