Android Studio
inicio
Crear un
nuevo
proyecto
Nuevo proyecto
ESPERA
…. ESPERA
La interfaz visual de nuestro programa
para Android se almacena en un archivo
XML en la carpeta res, subcarpeta layout
y el archivo se llama activity_main.xml. En
esta carpeta tenemos creada nuestra
primer pantalla.
Al seleccionar este archivo el Android
Studio nos permite visualizar el contenido
en "Design" o "Code" (es decir en vista de
diseño o en vista de código):
El Android Studio ya insertó dos controles, un TextView y un control de tipo ConstraintLayout que permite
ingresar controles visuales alineados a los bordes y a otros controles que haya en la ventana (más
adelante analizaremos este layout)
Ya veremos que podemos modificar todo este archivo para que se adapte a la aplicación que queremos
desarrollar.
A lo largo de este curso iremos viendo los objetivos de cada una de las secciones que cuenta el Android
Studio para implementar la interfaz, codificar en java las funcionalidades de la aplicación etc.
Antes de probar la aplicación en el emulador de un dispositivo Android procederemos a hacer un
pequeño cambio a la interfaz que aparece en el celular: borraremos la label que dice "Hello World"
(simplemente seleccionando con el mouse dicho elemento y presionando la tecla delete, podemos
seleccionarla de cualquiera de las dos interfaces "Design" o "blueprint") y de la "Palette" arrastraremos
un "Button" al centro del celular y en la ventana "Properties" estando seleccionado el "Button"
cambiaremos la propiedad "text" por la cadena "Hola Mundo":
Nos queda un paso muy importante que es
indicar la posición del botón dentro de la
ventana, la forma automática es seleccionar el
botón y presionar seguidamente el ícono de
"Infer Constraints" (mientras no hagamos esto el
botón no aparecerá correctamente en pantalla):
Espera
….. Espera
Problema:
Realizar un programa que permita colocar
dos números enteros en controles de tipo
EditText (Number). Mostrar dentro de los
mismos controles EditText mensajes que
soliciten el ingreso de los valores. Disponer
un Button para sumar los dos valores
ingresados. Mostrar el resultado en un
control de tipo TextView.
La interfaz visual debe quedar algo
semejante a esto:
Como el control EditText se inserta en un contenedor ConstraintLayout, debemos indicar la posición relativa dentro del mismo, la
forma más fácil es presionar el botón "Infer Constraints" para que se generen en forma automática (podemos hacerlo en forma
manual presionando los círculos que aparecen en el EditText y desplazando con el mouse hasta los bordes):
Ahora lo seleccionamos y en la ventana de propiedades (Properties) especificamos la propiedad hint, disponemos el texto
"Ingrese el primer valor":
También vamos a especificar la propiedad "id", y le asignaremos el valor et1
Efectuamos los mismos pasos para crear el segundo EditText de tipo "Number" (iniciamos las propiedades respectivas) Definimos
el id con el nombre et2 y la propiedad hint con el mensaje "Ingrese el segundo valor", el resultado visual debe ser algo semejante
a esto:
De la pestaña "Buttons" arrastramos un control de tipo "Button":
Iniciamos la propiedad text con el texto "Sumar" y la propiedad id la dejamos con el valor ya creado llamado "button":
Para terminar con nuestra interfaz visual arrastramos una componente de tipo "TextView" de la pestaña "Text". Definimos la
propiedad id con el valor "tv1" y la propiedad text con el texto "Resultado":
La interfaz final debe ser semejante a esta:
Si en este momento ejecutamos la aplicación
aparecerá la interfaz visual correctamente pero
cuando presionemos el botón no mostrará la suma.
Hasta ahora hemos trabajado solo con el archivo
xml (activity_main.xml) donde se definen los
controles visuales de la ventana que estamos
creando.
Abrimos seguidamente el archivo MainActivity.java
que lo podemos ubicar en la carpeta
app\java\com\tutorialesprogramacionya\proyecto00
2\MainActivity:
La clase MainActivity hereda de la clase AppCompatActivity. La clase AppCompatActivity representa una ventana de Android
y tiene todos los métodos necesarios para crear y mostrar los objetos que hemos dispuesto en el archivo xml.
El código fuente de la clase MainActivity.java es:
Captura de eventos.
Ahora viene la parte donde definimos variables en java donde almacenamos las referencias a los objetos
definidos en el archivo XML.
Definimos tres variables, dos de tipo EditText y finalmente una de tipo TextView (estas dos clases se
declaran en el paquete android.widget, es necesario importar dichas clases para poder definir las variables
de dichas clases, la forma más fácil de importar las clases es una vez que definimos el objeto por ejemplo
private EditText et1; veremos que aparece en rojo el nombre de la clase y nos invita el Android Studio a
presionar las teclas "Alt" e "Intro" en forma simultánea. Luego el Android Studio codifica automáticamente la
línea que importa la clase: import android.widget.EditText;):
Recordar que la forma más fácil
de importar las clases EditText y
TextView es escribir las tres
líneas:
private EditText et1;
private EditText et2;
private TextView tv1;
y luego presionar las teclas "Alt"
y "Enter" en cada nombre de
clase que se debe importar
Esto hace que se escriban
automáticamente los import:
import android.widget.EditText;
import android.widget.TextView;
Los nombres que le dí a los objetos en este caso coinciden con la propiedad id (no es obligatorio):
private EditText et1;
private EditText et2;
private TextView tv1;
Para la clase Button no es necesario definir un atributo.
En el método onCreate debemos enlazar estas variables con los objetos definidos en el archivo XML,
esto se hace llamando al método findViewById:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=findViewById(R.id.et1);
et2=findViewById(R.id.et2);
tv1=findViewById(R.id.tv1);
}
Al método findViewById debemos pasar la constante creada en la clase R
(recordemos que se crea automáticamente esta clase) el nombre de la constante si
debe ser igual con el nombre de la propiedad del objeto creado en el archivo XML.
Ya tenemos almacenados en las variables las referencias a los tres objetos que se
crean al llamar al método:setContentView(R.layout.main); .
Ahora planteamos el método que se ejecutará cuando se presione el botón (el
método debe recibir como parámetro un objeto de la clase View) En nuestro ejemplo
lo llamé sumar:
Debemos importar la clase View
(presionamos las teclas "Alt" y
luego "Enter" en forma
simultanea)
Ahora debemos ir al archivo
XML (vista de diseño) e
inicializar la propiedad onClick
del objeto button con el nombre
del método que acabamos de
crear (este paso es fundamental
para que el objeto de la clase
Button pueda llamar al método
sumar que acabamos de crear):
inicialmente implementaremos la lógica para sumar los dos valores ingresados en los
controles EditText:
public void sumar(View view) {
String valor1=et1.getText().toString(); //Toma el valor de tipo String de et1
String valor2=et2.getText().toString(); //Toma el valor de tipo String de et2
int nro1=Integer.parseInt(valor1); // Convierte de tipo String a tipo Int -> nro1
int nro2=Integer.parseInt(valor2); // Convierte de tipo String a tipo Int -> nro2
int suma=nro1+nro2; // se realiza la operación aritmética de suma
String resu=String.valueOf(suma); //Se convierte a String el resultado (suma)
tv1.setText(resu); // en envía el resultado al campo Text
}
Completar la práctica haciendo que la aplicacion tambien realice las
operaciones de
- Resta
- División
- Multiplicación
Ahora a los dos controles de tipo RadioButton definimos sus id (los llamaremos r1 y r2
respectivamente)
Cambiamos sus propiedades text por los textos "sumar" y "restar".
No olvidemos también cambiar los id de los controles EditText por et1 y et2 (igual que en el
problema anterior)
Por último agreguemos un botón y un TextView para mostrar el resultado
Inicializamos las propiedades del botón con los valores:
id : button
text : operar
Y el TextView con los valores:
id : tv1
text : resultado
Podemos controlar en la ventana "Component Tree" el id definido para cada control (et1, et2,
grupo1, r1, r2, tv1)
También podemos observar de que clase es cada control visual y el texto de la propiedad text
para aquellos controles que tienen sentido su inicialización.
Como podemos ver el código fuente es igual al problema anterior. Tenemos dos objetos más que debemos inicializar en el
método onCreate:
r1=findViewById(R.id.r1);
r2=findViewById(R.id.r2);
Las variables r1 y r2 son de la clase RadioButton y son necesarios en el método operar para verificar cual de los dos
RadioButton están seleccionados. La clase RadioButton tiene un método llamado isChecked que retorna true si dicho
elemento está seleccionado:
public void operar(View view) {
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
if (r1.isChecked()==true) {
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv1.setText(resu);
} else
if (r2.isChecked()==true) {
int resta=nro1-nro2;
String resu=String.valueOf(resta);
tv1.setText(resu);
}
}// del principal
Controlar que fijamos los valores de las
propiedades "id" de cada objeto: et1, et2,
check1, check2 y tv1.
No olvidemos inicializar la propiedad onClick
del objeto button con el valor "operar" (es el
nombre del método a ejecutarse cuando se
presione el botón y lo implementa la clase
que hacemos)
Definimos dos objetos de la clase CheckBox como atributos de la clase:
private CheckBox check1,check2;
En el método onCreate los inicializamos con los objetos definidos en el archivo XML:
check1=findViewById(R.id.check1);
check2=findViewById(R.id.check2);
En el método operar debemos definir dos if a la misma altura ya que los dos controles de tipo CheckBox pueden
estar seleccionados simultáneamente. Definimos una variable de tipo String y la inicializamos con cadena vacía
para el caso en que los dos CheckBox no estén seleccionados:
String resu="";
if (check1.isChecked()==true) {
int suma=nro1+nro2;
resu="La suma es: "+ suma;
}
if (check2.isChecked()==true) {
int resta=nro1-nro2;
resu=resu + " La resta es: "+ resta;
}
tv1.setText(resu);
Cuando ejecutamos el programa en el emulador tenemos como resultado:
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private Spinner spinner1;
private EditText et1,et2;
private TextView tv1;
public MainActivity() {
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=findViewById(R.id.et1);
et2=findViewById(R.id.et2);
tv1=findViewById(R.id.tv1);
spinner1 =findViewById(R.id.spinner);
String []opciones={"sumar","restar","multiplicar","dividir"};
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,
opciones);
spinner1.setAdapter(adapter);
//Este método se ejecutará cuando se presione el botón
public void operar(View view) {
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
String selec=spinner1.getSelectedItem().toString();
if (selec.equals("sumar")) {
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv1.setText(resu); }
else
if (selec.equals("restar")) {
int resta=nro1-nro2;
String resu=String.valueOf(resta);
tv1.setText(resu); }
else
if (selec.equals("multiplicar")) {
int multi=nro1*nro2;
String resu=String.valueOf(multi);
tv1.setText(resu);}
else
if (selec.equals("dividir")) {
int divi=nro1/nro2;
String resu=String.valueOf(divi);
tv1.setText(resu); } }}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv1=findViewById(R.id.tv1);
lv1=findViewById(R.id.list1);
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, paises);
lv1.setAdapter(adapter);
lv1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView adapterView, View view, int i, long l)
{
tv1.setText("Población de "+ lv1.getItemAtPosition(i) + " es "+
habitantes[i]);
}
}); }}
