Juego del Gato/ Tres en Raya/ Tic Tac Toe en Android Studio con Lenguaje de Programación Java.

Imagen
Juego del Gato/ Tres en Raya/ Tic Tac Toe en Android Studio con Lenguaje de Programación Java. MainActivity.java package com.anzal.gato; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.view.View; public class MainActivity extends AppCompatActivity {     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     }     //Método para queal oprimir el botón cambie de ventana     public void Tablero(View view){         Intent WebView= new Intent(this,Tablero.class);         startActivity(WebView);     }     //Método del botón salir     public void Salir(V...

Calculadora Básica en Android Studio con Java. Tutorial.

 Calculadora Básica con Java en Android Studio.

A continuación se muestra como realizar una calcualdora básica con java en android studio. Junto con sus imagenes de tutorial y código al final. 

En primero abrimos Android Studio.

Abriendo el programa de Android Studio

Seleccionamos Nuevo Proyecto o New Project en mi caso

Creando nuevo proyecto en Android Studio

Escojemos un Empty Activity o actividad vacía para empezar a hacer la calculadora.

Escogiendo Empty Activity en Android Studio

Dejamos las configuraciones por defecto.

Nombre de Proyecto en Android Studio

Dejamos cargar el programa.

Android Studio cargando programa

Una vez cargado.

Escribiendo Código en Android Studio

Procedemos a ir al Activity Main, donde visualmente podremos añadir los elementos de nuestra calculadora.

Editando Interface Gráfica en Android Studio

Procedemos a borrar el Hello Word que la aplicación nos pode por defecto.

Editando Interface Gráfica en Android Studio

Eliminado

Editando Interface Gráfica en Android Studio

Depués seleccionaremos en el menú izquierdo Palette, los elementos Text.

Editando Interface Gráfica en Android Studio

Buscaremos el elemento Number.

Editando Interface Gráfica en Android Studio

Serán los elementos que vamos arrastrar dentro de nuestra pantalla blanca.

Editando Interface Gráfica en Android Studio

Seguido de ello colocaremos otro más abajo.

Editando Interface Gráfica en Android Studio

Nos posicionaremos en la sección de Buttons.

Editando Interface Gráfica en Android Studio

Arrastraremos 4 botones para nuestra operaciones básicas, suma, resta, multiplicación y división.

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Aquí ya tenemos los cuatro botones.

Editando Interface Gráfica en Android Studio

Ahora procedemos a ir a la pantalla Blueprint donde podremos acomodar mejor nuestros elementos.

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Cuando demos clic en un elemento podremos ver que en sus bordes aparecen 2 circulos.

Editando Interface Gráfica en Android Studio

Cuando el puntero este encima de el se rellena de color blanco, de ahí lo uniremos al borde superior

Editando Interface Gráfica en Android Studio

De la misma manera, uniremos el lado izquierdo de nuestro elemento con el lado izquierdo de la pantalla.

Editando Interface Gráfica en Android Studio

Ahora en la parte derecha de la pantalla podremos ver el Constraint Widget donde podremos colocar una separacion entre el objeto y el borde de la pantalla.

Editando Interface Gráfica en Android Studio

Aquí dimos una separación de 80 en la parte superior del elemento.

Editando Interface Gráfica en Android Studio

Y en la parte izquierda una de 30

Editando Interface Gráfica en Android Studio

Lo mismo empezamos a hacer con los otros elementos.

Editando Interface Gráfica en Android Studio


En caso que el elemento nos pida en que parte enlazar el objeto, la opción de Botton que es la parte inferior.

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

En caso de que elemento boton pida en que parte enlazarlo, selencionaremos la opción de end, donde termina el elemento.

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio

Editando Interface Gráfica en Android Studio


Editando Interface Gráfica en Android Studio

En el caso de los botones iran enlazados su parte izquierda con la del elemento anterior.

Editando Interface Gráfica en Android Studio


Editando Interface Gráfica en Android Studio

Todos los Botones fueron enlazados a la parte inferior del último elemento Number y se les dio la misma separación.

Editando Interface Gráfica en Android Studio

Se me olvidaba el texto donde se mostrará el resultado, nos situamos en la seccion de elementos Text.

Editando Interface Gráfica en Android Studio

Buscamos TextView.

Editando Interface Gráfica en Android Studio

Lo arrastramos a la pantalla.


Editando Interface Gráfica en Android Studio

Lo acomodamos.

Editando Interface Gráfica en Android Studio

Por el momento esta listo nuestra interface gráfica.

Editando Interface Gráfica en Android Studio

Ahora nos situaremos en el archivo strings.xml donde irán todas las palabras que contendrán nuestro elementos. En le captura se puede ver cual es la dirección de este archivo.

Editando Programa en Android Studio

Y aquí de la misma nera que esta en el primer ejemplo pondremos los strings que ocuparemos, en el atributo name="", sera como lo llamaremos para mostrar el elemento.

Editando Programa en Android Studio

Después nos volveremos a situar en la pantalla Activity_main.xml.

Editando Programa en Android Studio

Editando Programa en Android Studio

En el menú derecho en la parte de Id, cambiaremos el nombre del elemento. Aceptamos la ventana emergente y se habrá cabiado el Id del eleento.

Editando Programa en Android Studio

Ahora buscamos el atributo hint.

Editando Programa en Android Studio

Con la combinación de teclas Ctrl + Espacio, nos sugerira las cadenas de texto que antes hemos escrito, y seleccionaremos el el correspondiente de cada elemento, priemr numero y segundo numero.

Editando Programa en Android Studio

Editando Programa en Android Studio

Editando Programa en Android Studio

Editando Programa en Android Studio


Para los botones solo cambiaremos el texto de igual manera en el atributo text, la combinación Ctrl + Espacio y nos mostrará las sugerencias.


Editando Programa en Android Studio

Editando Programa en Android Studio

Si por error se te desaparece un atributo, podrás buscar en la parte inferior del menú, esta ordenado alfabeticamente.

Editando Programa en Android Studio

Editando Programa en Android Studio

En el TextView solo haremos el tamaño mas grande.

Editando Programa en Android Studio


Para arreglar los errores que salen en la sección de componente Tree daremos clic en la advertencia, seguido oprimiremos Fix.

Editando Programa en Android Studio

Depués nos situaremos en la pestaña MainActitivty.java donde haremos el código para que nuestra aplicación funcione.

Declararemos las varibales de nuestros elementos.

Editando Programa en Android Studio

Segundo haremos los enlaces de comunicación, una disculpa la primara parte no iba.

Editando Programa en Android Studio


Haremos la funcion para que nuestro boton funcione.

Editando Programa en Android Studio

En caso de mostrarnos error, situaremos el cursor sobre la palabra View, donde usaremos la combinación de teclas que ahí nos muestra para añadir la biblioteca.

Editando Programa en Android Studio

Editando Programa en Android Studio

De ahí recuperaremos los datos necesarios en variables tipo String, luego procederemos a convertir los valores a numeros enteros y seguido de ello, ejecutaremos la acción del boton. Y por último mostramos el resultado en el TextView.

Editando Programa en Android Studio

Copiamos y pegamos la función para cada botón realizando los cambios necesarios en el código.

Editando Programa en Android Studio

Editando Programa en Android Studio

En el caso de la división creamos una condición para evitar que el usuario divida entre 0, ya que estas operaciones generan un valor indefinido, por lo cuál cada que trate de dividir entre 0 enviara al TextView el mensaje que no se puede dividir entre 0. 

Editando Programa en Android Studio

Por último irémos a Activity_main.xml la parte grafica de nuestra calculadora, cada que seleccionemos un boton, buscaremos el atributo, onClick en la parte izquieda.

Editando Programa en Android Studio
Al darle clic desplegara las funcione sque hemos creado y seleccionaremos la indicada para cada boton que hemos creado.

Editando Programa en Android Studio

Editando Programa en Android Studio

Editando Programa en Android Studio

Conectamos un dispocitivo para correr nuestra calculadora.

Editando Programa en Android Studio

Una vez conectado nos mostrará el dispositivo, y damos clic en el triángulo verde a la derecha.

Editando Programa en Android Studio

Editando Programa en Android Studio

Dejamos que se instale la aplicación y cuando se halla instalado se visualizará en el dispositivo.

Editando Programa en Android Studio

Editando Programa en Android Studio


Así se visualiza nuestra aplicación en el celular.



Ingresamos los números y probamos con todas las operaciones.












Por el momento muestra cero por qué nuestros valores están dados en enteros.

No se puede imprimir entre 0.






Así estará terminad anuestra calculadora básica.

A continuación códigos.

Strings.xml

<resources>
<string name="app_name">CalculadoraBasica</string>
<string name="txt_primer_numero">Primer Número</string>
<string name="txt_numero_dos">Segundo Número</string>
<string name="txt_resultado">Resultado</string>
<string name="boton_suma">+</string>
<string name="boton_resta">-</string>
<string name="boton_multiplicar">*</string>
<string name="boton_dividir">/</string>
</resources>

MainActivity.java

package com.anzal.calculadorabasica;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

//Lineas para crear los objetos que se usaran
private TextView resultado;
private EditText num_1, num_2;

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

//Creamos la comunicacion entre los elementos y la ventana
resultado = (TextView)findViewById(R.id.tv_resultado);
num_1 = (EditText)findViewById(R.id.txt_numero_1);
num_2 = (EditText)findViewById(R.id.txt_numero_2);
}

//Creamos la funcion para el boton +
public void Suma(View view){
//Creamos las variables para recibir el numero en texto
String numero_1 = num_1.getText().toString();
String numero_2 = num_2.getText().toString();
//Creamos las variables para convertir los numeros en enteros y hacemos la conversion
int num1 = Integer.parseInt(numero_1);
int num2 = Integer.parseInt(numero_2);
//Declaramos y hacemos la suma
int suma = num1 + num2;
//Convertimos suma a String y lo guardamos en resultado
String r = String.valueOf(suma);
//Enviamos el resultado a la pantalla
resultado.setText(r);
}
//Creamos la funcion para el boton -
public void Resta(View view){
//Creamos las variables para recibir el numero en texto
String numero_1 = num_1.getText().toString();
String numero_2 = num_2.getText().toString();
//Creamos las variables para convertir los numeros en enteros y hacemos la conversion
int num1 = Integer.parseInt(numero_1);
int num2 = Integer.parseInt(numero_2);
//Declaramos y hacemos la resta
int resta = num1 - num2;
//Convertimos suma a String y lo guardamos en resultado
String r = String.valueOf(resta);
//Enviamos el resultado a la pantalla
resultado.setText(r);
}
//Creamos la funcion para el boton *
public void Multiplicar(View view){
//Creamos las variables para recibir el numero en texto
String numero_1 = num_1.getText().toString();
String numero_2 = num_2.getText().toString();
//Creamos las variables para convertir los numeros en enteros y hacemos la conversion
int num1 = Integer.parseInt(numero_1);
int num2 = Integer.parseInt(numero_2);
//Declaramos y hacemos la multiplicacion
int multiplicacion = num1 * num2;
//Convertimos suma a String y lo guardamos en resultado
String r = String.valueOf(multiplicacion);
//Enviamos el resultado a la pantalla
resultado.setText(r);
}
//Creamos la funcion para el boton /
public void Dividir(View view){
//Creamos las variables para recibir el numero en texto
String numero_1 = num_1.getText().toString();
String numero_2 = num_2.getText().toString();
//Creamos las variables para convertir los numeros en enteros y hacemos la conversion
int num1 = Integer.parseInt(numero_1);
int num2 = Integer.parseInt(numero_2);
//HAcemos un condicional para evitar que se divida entre 0
//Si es mayor que 0 se hara el proceso de division
if(num2 > 0){
//Declaramos y hacemos la division
int division = num1 / num2;
//Convertimos suma a String y lo guardamos en resultado
String r = String.valueOf(division);
//Enviamos el resultado a la pantalla
resultado.setText(r);
}else{
//De lo contrario imprimira que no se puede realizar la division entre 0
String n = ("No se puede dividir entre 0");
resultado.setText(n);
}
}

}

Enlace del proyecto

Comentarios

Entradas populares de este blog

Calculadora Básica con Lenguaje de Programación Prolog en SWI-Prolog con Interface Gráfica. Operaciones suma, resta, multiplicación y división.

Juego del Gato/ Tres en Raya/ Tic Tac Toe en Android Studio con Lenguaje de Programación Java.

Calculadora Básica en SWI-Prolog 8.4.2 con Prolog.