/ android

Calculadora simple en Android Studio

Espero les sirva es un tutorial de como hacer una calculadora simple en Android Studio

Lo primero que se realizo fue realizar la creación del proyecto con el nombre referente a la aplicación “Calculadora”.

Lo siguiente es una de las partes mas importantes lo que es escoger la versión de Android con la cual se va a desarrollar, escogimos el API 19 Android 4.4 Kit Kat ya que en base a la encuesta que proporciona la página oficial el 90.1% de los celulares con sistema operativo Android soporta están versión además es una versión estable y cómoda para el desarrollo ya que cuenta con el soporte para los layouts necesarios cosa que en versiones anteriores no existe aún.
Para la versión máxima que soporta la aplicación se escogió el api 24 Android 7.0 Nougat debido a que la nueva versión api 25 Android 8.0 Oreo son muy pocos y tienen un costo económicamente alto los dispositivos que la trae integrada por defecto.

cal2

El siguiente paso es escoger la Activity base con la que se va a estar trabajando se escogio el “Empty Activity” por que es la que mejor se acoplaba a nuestros requerimientos.

cal3

Crearemos un proyecto con los requerimientos mínimos para que funcione, es decir, un layout por defecto, creación de gradle, creación de las carpitas así como sus archivos mínimos requeridos MainActivity.java para el desarrollo de toda la lógica y el activity_main.xml para el desarrollo de todo el diseño.

cal5

Usaremos como layout principal “RelativeLayout” donde se pondrá un “TextView” para mostrar los números presionados, así como el resultado de la operación deseada, dentro del contenedor principal se hará otro “GridLayout” lo que nos permitirá dividir la pantalla en las filas y columnas que nosotros necesitemos para la aplicación en este caso como es una calculadora sencilla necesitaremos 4 columnas y 6 filas para contener los números así como el borrar de limpiado de memoria, borrar el ultimo digito pulsado, operaciones básicas (suma, resta, multiplicación y división) y el botón para el resultado.

En este punto la parte grafica esta “completa” puesto que ya tiene todos los elementos necesarios para la interface que el usuario vera con los textos en los botones representativos de la acción que se realizara cuando interactúen con ellos y no se desborde de los limites de la pantalla gracias a las propiedades de Android para el ancho y largo “match_parent”, la orientación que tomaran los elementos dependiendo si está en modo “Portrait” o “Landsacpe”

cal-7

Paara darle un efecto visual mas agradable al usuario es decir mejorar el “UI” y el “UX” se le puso un fondo de pantalla con base en los material colors de Google que tienen disponibles en su página oficial donde se decidido usar un tono cercano al negro para el fondo de pantalla, blanco para el texto dentro del “Text View” y los números de los botones, naranja para las acciones “importantes” de la calculadora y un color cercano al gris para el fondo de los botones . Se acomodo en la parte inferior de la pantalla el contenedor “GridLayout” para un mejor manejo del teclado de la calculadora. Así como el cuadro de texto para el resultado un espacio considerable separado de la parte de arriba de la pantalla.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:background="#212121"
    android:orientation="vertical">

    <TextView
        android:id="@+id/Etiqueta"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/gridLayout"
        android:layout_marginBottom="14dp"
        android:height="100dp"
        android:textAlignment="textEnd"
        android:textColor="#F5F5F5"
        android:textSize="35dp"
        android:layout_centerHorizontal="true" />

<GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal"
    android:padding="0dp"
    android:rowCount="6">

    <Button
        android:id="@+id/Clean"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="C"
        android:textColor="#FF5722" />

    <Button
        android:id="@+id/Divide"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="/"
        android:textColor="#FF5722" />

    <Button
        android:id="@+id/Multiplica"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="X"
        android:textColor="#FF5722" />

    <Button
        android:id="@+id/Borrar"

        android:layout_margin="2dp"
        android:background="#424242"
        android:text="Borrar"
        android:textColor="#FF5722" />

    <Button
        android:id="@+id/Siete"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="7"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Ocho"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="8"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Nueve"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="9"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Resta"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="-"
        android:textColor="#FF5722" />

    <Button
        android:id="@+id/Cuatro"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="4"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Cinco"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="5"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Seis"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="6"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Suma"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="+"
        android:textColor="#FF5722" />

    <Button
        android:id="@+id/Uno"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="1"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Dos"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="2"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Tres"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="3"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Igual"
        android:layout_gravity="fill"
        android:layout_margin="2dp"
        android:layout_rowSpan="2"
        android:background="#424242"
        android:text="="
        android:textColor="#FF5722" />

    <Button
        android:id="@+id/Cero"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="0"
        android:textColor="#FAFAFA" />

    <Button
        android:id="@+id/Punto"
        android:layout_margin="2dp"
        android:background="#424242"
        android:text="."
        android:textColor="#FAFAFA" />
</GridLayout>
</RelativeLayout>

los que nos genera una vista:
cap-20

Una vez que la interface esta completada se procedió a realizar la conexión el archivo de java el cual nos proporcionara la lógica que necesitemos para su debido funcionamiento.

Lo primero que se debe de hacer es importar los componentes visuales que usaremos en este caso solo tenemos el “TextView” y el “Button”.
Después dentro de la clase MainActivity se declaran el mismo numero de componentes que se hicieron en la parte del diseño es de decir 18 elementos de tipo “Button”, 1 elemento de tipo “TextView” y las variables necesarias para el almacenar temporalmente los datos en variables.

Como en cada aplicación existe un ciclo de vida en este caso nos centraremos en el momento cuando se están creando los elementos visuales que se cacha con el evento “OnCreate” lo cual recibe una instancia de la vista dentro de esta es necesario hacer el ligado de la parte lógica con la parte visual y eso se hace buscando el elemento, primero se necesita castear el tipo de elemento que es seguido de la propiedad findViewById que recibe como parámetro un elemento de la clase
“R” con la propiedad “id” con el id que se le definio al elemento en el archivo .xml. Lo que nos daría como resultado algo similar a:

public class MainActivity extends Activity {
Button btnUno;

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

    btnUno = (Button)findViewById(R.id.Uno); 
    }
}

Lo siguiente es ponerles un escucha al evento “onClick” que tienen los botones y esto se hace agarrando un elemento del tipo requerido que ya con anterioridad se haya echo el ligado con la parte visual después con la propiedad .setOnClickListener que recibe como parámetro una nueva instancia de la clase View con el evento OnClickListener donde dentro de le define una clase publica que contiene la función del evento onClick que también recibe una Vista lo que se vería de la siguiente manera:

btnUno.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v){
mostrar = Resultado.getText().toString();
mostrar = mostrar + "1";
Resultado.setText(mostrar);
}
});

Con lo anterior tendran la informacion necesaria para poder poner por ustedes mismos los eventos a los botones por lo cual al final el codigo en el MainActivity.java nos quedara así:

public class MainActivity extends Activity {
Button btnUno, btnDos, btnTres, btnCuatro, btnCinco, btnSeis, btnSiete, btnOcho, btnNueve,
btnSuma, btnResta, btnMultiplica, btnDivide, btnClean, btnBorrar, btnPunto, btnIgual;
TextView Resultado;
double resultado;
String operador, mostrar , reserva;

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

    btnUno = (Button)findViewById(R.id.Uno);
    btnDos = (Button)findViewById(R.id.Dos);
    btnTres = (Button)findViewById(R.id.Tres);
    btnCuatro = (Button)findViewById(R.id.Cuatro);
    btnCinco = (Button)findViewById(R.id.Cinco);
    btnSeis = (Button)findViewById(R.id.Seis);
    btnSiete = (Button)findViewById(R.id.Siete);
    btnOcho = (Button)findViewById(R.id.Ocho);
    btnNueve = (Button)findViewById(R.id.Nueve);
    btnSuma = (Button)findViewById(R.id.Suma);
    btnResta = (Button)findViewById(R.id.Resta);
    btnMultiplica = (Button)findViewById(R.id.Multiplica);
    btnDivide = (Button)findViewById(R.id.Divide);
    btnClean = (Button)findViewById(R.id.Clean);
    btnBorrar = (Button)findViewById(R.id.Borrar);
    Resultado = (TextView)findViewById(R.id.Etiqueta);
    btnPunto = (Button)findViewById(R.id.Punto);
    btnIgual = (Button)findViewById(R.id.Igual);

    btnUno.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "1";
            Resultado.setText(mostrar);
        }
    });

    btnDos.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "2";
            Resultado.setText(mostrar);
        }
    });

    btnTres.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "3";
            Resultado.setText(mostrar);
        }
    });

    btnCuatro.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "4";
            Resultado.setText(mostrar);
        }
    });

    btnCinco.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "5";
            Resultado.setText(mostrar);
        }
    });

    btnSeis.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "6";
            Resultado.setText(mostrar);
        }
    });

    btnSiete.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "7";
            Resultado.setText(mostrar);
        }
    });

    btnOcho.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "8";
            Resultado.setText(mostrar);
        }
    });

    btnNueve.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "9";
            Resultado.setText(mostrar);
        }
    });

    btnSuma.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            reserva = Resultado.getText().toString();
            operador = "+";
            Resultado.setText("");
        }
    });

    btnResta.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            reserva = Resultado.getText().toString();
            operador = "-";
            Resultado.setText("");
        }
    });

    btnMultiplica.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            reserva = Resultado.getText().toString();
            operador = "*";
            Resultado.setText("");
        }
    });

    btnDivide.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            reserva = Resultado.getText().toString();
            operador = "/";
            Resultado.setText("");
        }
    });

    btnPunto.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + ".";
            Resultado.setText(mostrar);
        }
    });

    btnClean.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = "";
            Resultado.setText(mostrar);
            reserva = "";
            operador = "";
        }
    });

    btnBorrar.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar.substring(0,mostrar.length()-1);
            Resultado.setText(mostrar);
        }
    });

    btnIgual.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            mostrar = Resultado.getText().toString();
            mostrar = mostrar + "1";
            if(operador.equals("-")){
                resultado = Double.parseDouble(reserva) - Double.parseDouble(Resultado.getText().toString());
                Resultado.setText(String.valueOf(resultado));
            }
            if(operador.equals("+")){
                resultado = Double.parseDouble(reserva) + Double.parseDouble(Resultado.getText().toString());
                Resultado.setText(String.valueOf(resultado));
            }
            if(operador.equals("/")){
                resultado = Double.parseDouble(reserva) / Double.parseDouble(Resultado.getText().toString());
                Resultado.setText(String.valueOf(resultado));
            }
            if(operador.equals("*")){
                resultado = Double.parseDouble(reserva) * Double.parseDouble(Resultado.getText().toString());
                Resultado.setText(String.valueOf(resultado));
            }
        }
    });

}

}

Lo que nos daría como resultado final corriendo en un celular Android Huawei con sistema operativo con el api 23

Screenshot_2018-02-23-12-43-46