jueves, 17 de octubre de 2013

Calculadora en Android

Tutorial Android Studio - Calculadora Android en 10 Pasos


1. Tener instalado lo siguiente:
  • Android Studio, descarga la ultima versión de aquí y escoja uno para tu sistema operativo.
  • JDK: (Java Development Kit), descarga la ultima versión de aquí

2. Abrir Android Studio y escoger New Project...
Entorno (IDE) de Android Studio

3. Configurar el nuevo proyecto, para el ejercicio solo ponemos el nombre de la aplicación "MiCalculadora", está aplicación corre en Android 2.1 hasta 4.2.
Nuevo Proyecto Android


4. En esta pantalla escoger un icono en el label image file, dar click en next, next, next y esperar  a que el IDE se muestre para empezar la programación.
setear icono

5. En esta pantalla unos de los archivos más importantes son:
  • AndroidManifest.xml.- Propiedades de la aplicación, aquí puedes, desde cambiar el nombre a la aplicación hasta otorgarle permisos a la aplicación para que pueda usar internet, gps etc.
  • MainActivity.java.- Esta es nuestra clase java, contiene toda la lógica.
  • activity_main.xml.- El layout, es decir este archivo es la pantalla de la aplicación.
archivos mas importantes


6. Abrimos activity_main.xml usar la vista diseño para empezar a dibujar la calculadora arrastrando los controles, (al inicio es un poco difícil el hacer que los controles se posicionen donde uno quiere) se usó un TextView que mostrará el resultado del cálculo y los demás son Buttons. Debe quedar algo como esto:
layout

7. Abrir MainActivity.java y programar la lógica:
Se crean métodos para cada botón. ( no olvidar importar las librerías necesarias)
package com.example.micalculadora;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    @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;
    }

    Double numero1,numero2,resultado;
    String operador;

    public void onClickIgual(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        numero2 = Double.parseDouble(tv.getText().toString());

        if(operador.equals("+"))
        {
            resultado= numero1+numero2;
        }
        else if(operador.equals("-"))
        {
            resultado= numero1-numero2;
        }
        else if(operador.equals("*"))
        {
            resultado= numero1*numero2;
        }
        else if(operador.equals("/"))
        {
            resultado= numero1/numero2;
        }
        tv.setText(resultado.toString());
    }

    public void onClickSuma(View miView)
    {
        operador="+";
        onClickOperacionCapturaNumero1(miView);
    }
    public void onClickResta(View miView)
    {
        operador="-";
        onClickOperacionCapturaNumero1(miView);
    }
    public void onClickMultiplicacion(View miView)
    {
        operador="*";
        onClickOperacionCapturaNumero1(miView);
    }
    public void onClickDivision(View miView)
    {
        operador="/";
        onClickOperacionCapturaNumero1(miView);
    }

    public void onClickOperacionCapturaNumero1(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        numero1 = Double.parseDouble(tv.getText().toString());
        tv.setText("");
    }

    public void onClickLimpia(View miView)
    {
        numero1=0.0;
        numero2=0.0;
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText("");
    }

    public void onClickBtn1(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "1");
    }
    public void onClickBtn2(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "2");
    }
    public void onClickBtn3(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "3");
    }
    public void onClickBtn4(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "4");
    }
    public void onClickBtn5(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "5");
    }
    public void onClickBtn6(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "6");
    }
    public void onClickBtn7(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "7");
    }
    public void onClickBtn8(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "8");
    }
    public void onClickBtn9(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "9");
    }
    public void onClickBtn0(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + "0");
    }
    public void onClickBtnPunto(View miView)
    {
        TextView tv = (TextView) findViewById(R.id.txtNumero) ;
        tv.setText(tv.getText() + ".");
    }

}

8. Darle funcionalidad a cada botón: Volvemos a el layout activity_main.xml, seleccionamos el boton7, vamos a la parte de propiedades, buscamos la propiedad "onclick" y seleccionamos el método onCLickBtn7, así para cada botón. De esta manera de damos funcionalidad a cada botón.
eventos onclick


9. Correr la aplicación con shift + F10 o usando el icono respectivo. El IDE te dirá que necesitas un emulador, dar en launch emulator y escoger androidAVD o si ya tienes uno ejecutandose solo debes escogerlo en choose a running device. Esperar a que se cargue el emulador, solo el emulador consume 512mb de ram por default (se puede configurar).

Si no tienes un emulador, agregalo en Tools/Android/AVD Manager y configurarlo de la siguiente manera:

  • AVD: android virtual device
  • seleccionar por default el tamaño 3.4 240 x 432
  • dar en start.
  • seleccionar la maquina virtual y clic en start

escoja emulador
Escoger el emulador
Ejecutar aplicacion
Ejecutar la aplicación desde el emulador
10. En el emulador ejecuta la aplicación MiCalculadora, búscala con el icono que seteamos y pruebala.
probar

Pasar la APK a un teléfono o tablet android:

La apk la encuentras en el directorio del proyecto, ejemplo:
C:\Users\willy\AndroidStudioProjects\MiCalculadoraProject\MiCalculadora\build\apk\MiCalculadora-debug-unaligned.apk


Descarga la Fuente desde mi skydrive dando click AQUI

36 comentarios:

  1. Muy buen ejemplo, aunque sería más funcional sobreescribir el metodo onClick y capturar el id del view, me explico:

    @Override
    public void onClick(View v){
    switch(v.getId()){
    case R.id.botonsumar:
    //sumar
    break;
    }
    }

    De esa manera se administra mejor los onClick de los botones.

    ResponderEliminar
  2. No encuentro la implementación para el botón punto

    ResponderEliminar
  3. Buenas, soy novato en esto y quería ver si me podríais resolver un problema que tengo. He copiado el texto de MainActivity.java pero me sale cannot resolve symbol "txtNumero"y lo mismo pasa con "main". ¿Hay alguna forma de solucionarlo importando alguna otra clase o me faltará algún archivo para android.......?
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Verifica que el nombre del control txtNumero sea el mismo que en el layout

      Eliminar
  4. Muy buen aporte, pero al momento de colocar el punto genera un error, cerrandose la aplicacion a que se debe esto???

    ResponderEliminar
    Respuestas
    1. Si, es porque no está programado el controlador del evento onClick en la clase MainActivity.java, se me olvidó colocarlo, aquí está:
      public void onClickBtnPunto(View miView)
      {
      TextView tv = (TextView) findViewById(R.id.txtNumero) ;
      tv.setText(tv.getText() + ".");
      }

      Eliminar
  5. Mira carnal, si vas a enseñar, enseña bien! no me sirve y es para la escuela, tengo que sacar para la papa, luego que come mi esposa y mi amante, pues oyeme!
    :3 :* <3

    ResponderEliminar
    Respuestas
    1. jajaja xD ok! para la próxima lo haré mejor explicado.

      Eliminar
  6. Buenas! William muy bueno tu aporte. Te consulto lo siguiente, ¡se puedo programar un botón para que no haga nada? Por ejemplo el que el 6 no funcione de tal forma que al ingresar 106 registre solo el 10.
    Saludos, y gracias

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. muy buen aporte! pero creo q seria mucho mejor expresado en un video!!

    ResponderEliminar
  9. Hola, tengo un problema, es que la calculadora deja pinar mas de 1 punto
    Es decir: 1.2...3.4. Y así.

    ResponderEliminar
    Respuestas
    1. public void onClickBtnPunto(View miView)
      {
      TextView tv = (TextView) findViewById(R.id.txtNumero);
      if(!tv.getText().toString().contains(".")){
      tv.setText(tv.getText() + ".");
      }
      }
      Con este if, si el textView contiene un punto "." ya no podrás introducir otro

      Eliminar
  10. Veo comentarios negativos, pero esto de la programación no es nada fácil de explicar! Gracias por el aporte viejo

    ResponderEliminar
  11. colegas la calculadora da resultado en decimal para cambiarlo a entero es int pero como seria por q al modificar se daña todo

    ResponderEliminar
    Respuestas
    1. primero debes cambiar en valor de las variables auxiliares de double a int
      luego cuando haces la conversion de string a double en esta linea numero2 = Double.parseDouble(tv.getText().toString()); lo debes hacer es a entero seria algo como numero2 = Integer.parseInt(tv.getText().toString());

      Eliminar
  12. gracias por el aporte, me ayudo a aclarar dudas de ejecucion, la verdad esta simple pero muy practico y facil de entender.

    ResponderEliminar
  13. disculpen el onClickOperacionCapturaNumero1 a que boton le corresponde ese nombre, o como funciona????

    ResponderEliminar
    Respuestas
    1. a corresponde a los botones de suma, resta, multiplicación y división, solo se encarga de capturar y guardar en una variable (numero1) lo que se encuentra en el display de la calculadora. Esto sirve para posteriormente al presionar el botón "=" se realice la operación con las variables numero1 y numero2

      Eliminar
  14. Como hago que la calculadora en el TextView comience desde cero, y cuando se inserte un valor se quite y ponga el valor predeterminado? :c

    ResponderEliminar
  15. Como hago que la calculadora en el TextView comience desde cero, y cuando se inserte un valor se quite y ponga el valor predeterminado? :c

    ResponderEliminar
    Respuestas
    1. agregando esto en el evento onCreate al final.
      TextView tv = (TextView) findViewById(R.id.txtNumero);
      tv.setText("0");

      Eliminar
  16. como coloco la excepción para cuando oprimo igual al no tener ningún valor no se rompa la aplicación

    ResponderEliminar
    Respuestas
    1. Encierra el contenido del evento "onClickIgual" dentro de un try catch, algo así:
      try
      {
      ---
      ---
      } catch (Exception ex) {}

      Eliminar
  17. Muy buen aporte, pero tengo errores con el menu en la linea siguente en el que se encuentra entre *s:
    getMenuInflater().inflate(R.*menu*.main, menu);

    cannot resolve symbol menu

    y el link se encuentra roto

    ResponderEliminar
    Respuestas
    1. Debe ser un problema con el gradle, hazle clean a tu proyecto y luego build, eso debe solucionar el problema.

      Eliminar
  18. como cambiara lso metodos para realizar mas operaciones sin tocar =

    ResponderEliminar
  19. Gracias por el aporte William. Hay que hacer algunos ajustes para que no se puedan teclear dos puntos o para que no se pueda teclear una operación antes que un número, pero gracias de todas formas

    ResponderEliminar
    Respuestas
    1. Solo agregar una bandera global para el punto que cuando se presione no se vuelva a presionar, hay una forma mas optima de obtener que tecla se presiono y así evitar hacer muchos métodos.

      Saludos

      Eliminar
  20. Estuve checando tu código y se me hizo mucho desperdicio de memoria, y lo modifique y lo hice de una manera mucho mas compacta.

    if( v.getId() == R.id.btn_point && flag == 0){
    flag = 1;
    tv.setText(tv.getText() + ".");
    } else {
    for( int i=0; i< Numeros.length; i++){
    if( v.getId() == Numeros[i]){
    tv.setText(tv.getText()+""+i);
    }
    }
    }

    ResponderEliminar
    Respuestas
    1. Muy bien!, se nota que sabes programar, gracias por tu aporte. Este tutorial está enfocado a gente que están empezando en el mundo de la programación.

      Saludos

      Eliminar
    2. No se porque no sale mi nombre pero te conviene subirlo a un github, este es el mio debido a que estoy estudiando no he modificado lo que llevo pero pronto estará aquí! https://github.com/LeoCloser

      Saludos

      Eliminar