epelpad

Programar una calculadora básica con Android Studio

Vamos a desarrollar en este tutorial una aplicación para Android que simule el funcionamiento de una calculadora muy básica, con dos campos de texto en los que el usuario podrá introducir los números a operar y cuatro botones para realizar las operaciones de suma, resta, multiplicación y división.

Configuración de un emulador

Una vez instalado, iniciamos el IDE para proceder a la creación de nuestras aplicaciones. Sin embargo, para poder probar nuestros programas necesitamos configurar un emulador sobre el que probar las aplicaciones, así que, una vez iniciado, nos iremos a la opción de menú Tools->Android->AVD Manager.

En el cuadro de diálogo que aparece a continuación, pulsaremos el botón “Create Virtual Device” para crear un nuevo emulador sobre el que probar nuestras aplicaciones. Seguidamente, nos aparecerá una ventana en la que debemos de elegir el tipo de dispositivo y el modelo del mismo:



En la siguiente vista se nos pedirá que elijamos la versión Android soportada en este emulador, mientras que en la última ventana le indicaremos las características del dispositivo; en esta dejaremos los valores que vienen marcados por defecto.

Creación de un proyecto

Ya tenemos todo listo para poder crear y probar nuestras aplicaciones Android. Las aplicaciones Android se crean como proyectos, para lo cual elegiremos la opción File->New Project. En nuestro caso, le asignaremos los valores que se indican en la imagen.



En la siguiente ventana, dejaremos marcada la opción “Phone and Table” y elegiremos como mínimo valor de SDK requerido el API 14 o Android 4.



Seguidamente, se nos pedirá si queremos añadir una actividad al proyecto. Dejaremos elegida la opción de añadir una actividad en blanco.

En el último paso, dejaremos los nombres por defecto que nos aparecen tanto para la actividad como para el archivo de plantilla de la misma.

Al finalizar el asistente, se nos mostrará el proyecto con el activity-main.xml en modo diseño, en el que podremos ver que se nos ha incluido un control de tipo TextView por defecto. En la siguiente figura te indicamos las principales ventanas que tenemos en el IDE:



Diseño de la interfaz gráfica

Lo primero que haremos será crear la interfaz gráfica de la aplicación. Su aspecto será similar al que se muestra en la siguiente imagen:



Para realizar el diseño, utilizaremos la técnica de arrastrar y soltar los elementos de la paleta (layouts y widgets) a la vista de diseño o bien al árbol de componentes. De cara a conseguir el diseño deseado, utilizaremos un layout principal de tipo LinearLayout con orientación vertical y sobre este, incluiremos un LinearLayout con orientación horizontal para cada fila de componentes.



Seleccionando los elementos gráficos en la plantilla de diseño, podremos establecer las diferentes propiedades de los mismos a través de la ventana de propiedades:



El contenido final de la plantilla xml de la actividad quedará como se indica en el siguiente listado:

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent”
    android:layout_height=”wrap_content” android:orientation=”vertical”>
    <LinearLayout
        android:orientation=”horizontal”
        android:layout_width=”fill_parent”
        android:layout_height=”fill_parent”>
        <TextView
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”Número1:”
            android:id=”@+id/textView” />
        <EditText
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:inputType=”number”
            android:ems=”10″
            android:id=”@+id/edtNum1″ />
    </LinearLayout>
    <LinearLayout
        android:orientation=”horizontal”
        android:layout_width=”fill_parent”
        android:layout_height=”fill_parent”>
        <TextView
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”Número2:”
            android:id=”@+id/textView2″ />
        <EditText
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:inputType=”number”
            android:ems=”10″
            android:id=”@+id/edtNum2″ />
    </LinearLayout>
    <LinearLayout
        android:orientation=”horizontal”
        android:layout_width=”fill_parent”
        android:layout_height=”fill_parent”>
        <Button
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”Sumar”
            android:id=”@+id/button”
            android:onClick=”sumar” />
        <Button
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”Restar”
            android:id=”@+id/button2″
            android:onClick=”restar” />
        <Button
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”Multiplicar”
            android:id=”@+id/button3″
            android:onClick=”multiplicar” />
        <Button
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:text=”Dividir”
            android:id=”@+id/button4″
            android:onClick=”dividir” />
    </LinearLayout>
</LinearLayout>


Implementación de la aplicación

Como podemos observar en el listado anterior, cada control botón se asocia al método manejador de evento click a través de su atributo onClick. Dicho método se implementará dentro del código de la actividad y su formato deberá ser el siguiente:

public void nombreMetodo(View v){
           //código de respuesta al evento
           }


En nuestro caso tendremos que implementar cuatro métodos en la actividad, uno por cada botón, que se encargará de realizar la operación correspondiente y mostrar el resultado de la misma en un mensaje de aviso o toast.

El código de nuestra actividad quedaría por tanto como se indica en el siguiente listado:

public class MainActivity extends ActionBarActivity {

      private EditText oper1,oper2;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          //recuperamos los objetos controles
          oper1 = (EditText)findViewById(R.id.edtNum1);
          oper2 = (EditText)findViewById(R.id.edtNum2);
      }

      public void sumar(View v){
          //convertimos a número los valores introducidos y operamos
          int n1 = Integer.parseInt(oper1.getText().toString());
          int n2 = Integer.parseInt(oper2.getText().toString());
          int sum = n1+n2;
          mostrar(sum);
      }

      public void restar(View v){
         //convertimos a número los valores introducidos y operamos
         int n1 = Integer.parseInt(oper1.getText().toString());
         int n2 = Integer.parseInt(oper2.getText().toString());
         int sum = n1-n2;
         mostrar(sum);
      }

      public void multiplicar(View v){
           //convertimos a número los valores introducidos y operamos
           int n1 = Integer.parseInt(oper1.getText().toString());
           int n2 = Integer.parseInt(oper2.getText().toString());
           int sum = n1*n2;
           mostrar(sum);
      }

      public void dividir(View v){
           //convertimos a número los valores introducidos y operamos
           int n1 = Integer.parseInt(oper1.getText().toString());
           int n2 = Integer.parseInt(oper2.getText().toString());
           int sum = n1/n2;
           mostrar(sum);
      }
      
      private void mostrar(int res){
          //mostramos resultado en un Toast
          Toast.makeText(this, “Resultado operación: ” + res, Toast.LENGTH_LONG).show();
      }
}


Como se puede apreciar, se obtiene la referencia a los objetos EditText desde el método onCreate. Después, cada método de respuesta a evento extrae los valores introducidos, los convierte a entero y realiza la operación correspondiente, para luego llamar a un método común que se encarga de mostrar el resultado.

Para probar nuestra aplicación en el emulador, simplemente elegiremos la opción de menú Run->Run app. Transcurridos unos cuantos minutos, se abrirá el emulador y se mostrará la aplicación en su interior para poder interaccionar con la misma.

4 comentarios - Programar una calculadora básica con Android Studio

raulspunky +1
Este programa es el que utilizo para compilar el .apk de los juegos android de Unity 3D
PepaPeolaRg +1
Muy buen post maquinola!! Está un poco desordenado, pero no hay de estas cosas en la Taringa de hoy en día.

Saludos desde la Virgocueva.
gonza0605
quiero ordenar la parte del codigo, mas que nada por si lo quieren probar y no lo tipean todo, gracias por la buena onda
odmercurio +1
me gusta la intension, quizas esta un poco desordenado y interpretar el codigo suelto es bastante complicado para el q no esta familiarizado y lo asusta... fijate si lo podes ordenar un poco mas

te dejo +5 maquinola, muy buen aporte... saludos
b4jo_ll4v3s +1
@gonza0605 Poné el código entre éstas etiquetas
 

y trata de identarlo para q t quede más prolijo.
b4jo_ll4v3s +1
@gonza0605 Las etiquetas son estas [code...] [/code] (quitale los puntos suspensivos)
gonza0605
@b4jo_ll4v3s gracias por la data, despues lo actualizo al post asi que mas prolijo
xionsoul +1
Buena informacion para conocer el sistema.