Una vez que terminamos el obligatorio 🙂 «Hola mundo«, podemos crear aplicaciones un tanto más elaboradas, pero para nada complicadas, solo para ir entendiendo poco a poco la forma de trabajo en android.
En este post, desarrollaremos una aplicación para sumar dos números enteros y mostrar su resultado en pantalla, utilizaremos las herramientas gráficas que nos brinda eclipse para crear el código de la aplicación evitando escribir directamente la gran parte del código java y XML. En futuros post y con la practica necesaria podremos crear aplicaciones escribiendo código puro si lo deseáramos.
Herramientas
– Eclipse Indigo con Android instalado y configurado.
– Conocer java obviamente 🙂
Nivel: Novato Android, Intermedio Java
1. Crea una aplicación android, si no recuerdas como date una vuelta por aquÃ.
Activity: Blank Activity
Activity Name:Â MainActivity
Layout Name:Â activity_main
2. Eclipse crea los archivos del proyecto «Suma 2 numeros«, tenemos una etiqueta «Hello World!», selecciónala y presiona SUPRIMIR.
Debemos eliminar también el string, ve a RES/VALUES/strings.xml y ábrela con doble clic, entonces selecciona «hello_word (String)» y presiona REMOVE…, acepta (YES) para terminar su eliminación.
3. Vuelve a activity_main.xml, al diseñador, debemos crear la interfaz, para hacer esto, añadiremos 4 textView, 2 editText y 1 button, para añadir un objeto de la paleta, solo debes arrastrarla con clic sostenido hacia la vista previa, trata de que te quede como la imagen de abajo, no nos molestaremos mucho por el momento de que nuestra app sea atractiva, nos interesa más su funcionamiento interno.
Vemos que los objetos de nuestra interfaz, tiene pequeños iconitos de «advertencia»  de color amarillo, en la pestaña de PROBLEMS puedes ver en detalle cada una de esas advertencias. debemos corregirlas.
4. Selecciona el textView A, clic derecho -> Edit Text... presiona el botón New string… y coloca en
String: 1er Sumando
y en
New R.String: strA
presiona OK para crear el nuevo string y de nuevo OK para asignar ese string a nuestro textView A. Presiona «CTRL+S» para guardar los cambios.
String es el valor de la cadena que se ve en pantalla, R.string es el identificador único de esa cadena
Realiza los mismos pasos para textView C, los valores son:
String:Â 2do Sumando
New R.string:Â strC
Para textView F:
String:Â RESULTADO
New R.string:Â strF
Finalmente para textView G:
String: 0
New R.string:Â strG
pero a textView G, debemos cambiar también su ID, para ello clic derecho -> Edit ID, colocamos «txtResultado» y presionamos OK.
Cuando cambiamos el ID de algún objeto, es porque queremos identificarlo dentro del código para poder usarlo más fácilmente a la hora de programar.
5. Para el único botón de la aplicación, cambiamos su ID por «btnSumar» y añadimos un texto, los valores son:
String: Sumar
New R.string:Â strSumar
6. Finalmente las configuraciones para los editText.
Para editText B y D, clic derecho -> Input type -> NumberÂ
Cambiamos también los IDs para ambos editText por txtSumando1 y txtSumando2 respectivamente.
Hasta aquà debes tener algo como esto:
Si tienes algún error, revisa todos los pasos :/ , sino ya puedes correr tu aplicación, no hace nada, le falta código 🙂 eso es lo que haremos a continuación.
7. Abre el archivo MainActivity.java que se encuentra en la carpeta SRC, debes tener este codigo:
package com.tutorial.s2nu; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { //code here @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //code here } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }
donde dice CODE HERE 🙂 lo agregue yo porque es ahà donde añadiremos código 🙂
Nuestra aplicación suma dos números enteros y muestra el resultado en pantalla, el archivo MainActivity.java queda de la siguiente forma:
package com.tutorial.s2nu; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends Activity { //object EditText sumando1, sumando2; TextView sumatotal; Button boton; int suma_total = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //-->new code // se relaciona object this.sumando1 = (EditText) findViewById( R.id.txtSumando1 ); this.sumando2 = (EditText) findViewById( R.id.txtSumando2 ); this.sumatotal = (TextView) findViewById( R.id.txtResultado ); //valor inicial this.sumando1.setText("0"); this.sumando2.setText("0"); this.sumatotal.setText("0"); //se relaciona boton boton = (Button) findViewById( R.id.btnSumar ); //event OnClick listener boton.setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { //validacion if( sumando1.getText().length()>0 && sumando2.getText().length()>0 ) { //se suman ambos numeros suma_total = Integer.valueOf( sumando1.getText().toString() ) + Integer.valueOf( sumando2.getText().toString() ) ; //se muestra en pantalla sumatotal.setText( String.valueOf(suma_total) ); } else { //ocurrio un error, no se muestra nada sumatotal.setText( "" ); } } }); //-->end new code } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }
Te aconsejo que no realices un copy/paste sino que estudies el código nuevo que se añade 🙂 si sabes de java lo entenderas con facilidad.
Ejecuta y prueba la aplicación
enjoy!!!
Los códigos QR del inglés Quick Response Code o código de respuesta rápida es un tipo de código para el almacenamiento d[...]
Hace tiempo pidieron un video tutorial sobre como crear sus propios componentes swing java, lamentablemente debo decir q[...]
JavaFX implementa el control webview que nos permite agregar contenido HTML cargado mediante la clase WebEngine. El comp[...]
Java Media Framwork ademas de permitir reproducir archivos multimedia, tambien permite trabajar con dispositivos de capt[...]
Matando dos pájaros de un solo tiro :), doy respuesta a un par de preguntas que están relacionadas, en este post veremos[...]
En este post crearemos una aplicación android que nos permitirá compartir una imagen con Facebook, whatsapp, bluetooth,[...]