Tecnologías móviles - 03

Interfaz de usuario / Sesión 2

CÓDIGO/DNI APELLIDOS Y NOMBRES FECHA

2021400021 / 76389588 Cardenas Ytuza Fernando Luigui 24/03/2024

ACTIVIDADES

1. Crear un nuevo proyecto Android.

En Android Studio, crea un nuevo proyecto Empty Activity de Nombre: Moneda.

Ilustración - 1 “Creando proyecto con el nombre Moneda”

Para crear atributos seleccione el archivo res/values/string.xml y agregue el siguiente código enmarcado.

<resources>
<string name="app_name">Moneda</string>
<color name="nuevoColor">#C5e2f0</color>
<string name="Dólares">A soles</string>
<string name="Soles">A dólares</string>
<string name="Convertir">Calcular</string>
<string name="miClicManejador">miClicManejador</string>
</resources>

Ilustración - 2 “Agregando atributos”

Adicione controles a la interfaz de usuario: para ello seleccione el archivo activity_main.xml. En el modo Diseño,
desde la vista Palette, dentro del grupo de controles Text seleccione el objeto Plain Text y arrástrelo dentro del
diseño de la interfaz.

Ilustración - 3 “Añadiendo controles a la interfaz”

De la sección Buttons, arrastre un objeto RadioGroup hacia el diseño. Cambie su propiedad de layout_height.

Luego agregue dos controles RadioButton dentro del contenedor RadioGroup y configure las siguientes
propiedades Primer RadioButton:

id: radio0 text:

Dólares checked: true
Segundo RadioButton:
id: radio1
text: Soles
checked: false

Ilustración - 4 “Añadiendo botones y características a el radiogroup”

Agregue un objeto Button al diseño de la interfaz, con las siguientes propiedades:
text: Convertir
id: btnConvertir

Ilustración - 5 “Agregando botón”

Al objeto editText agregue las siguientes propiedades:

InputType: numberSigned y numberDecimal

Ilustración - 6 “Cambiando tipo de variable para que sea decimal”

Ejecute su Actividad.

Ilustración - 7 “Ejecutando proyecto”

package com.example.moneda;
import android.os.Bundle;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private EditText text;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
text = (EditText) findViewById(R.id.textoMoneda);
}
public void miClicManejador(View view) {
if (view.getId() == R.id.btnConvertir) {
RadioButton dolaresButton = (RadioButton)
findViewById(R.id.radio0);
RadioButton solesButton = (RadioButton)
findViewById(R.id.radio1);
if (text.getText().length() == 0) {
Toast.makeText(this, "Ingresa un número válido",
Toast.LENGTH_LONG).show();
return;
}
float inputValue = Float.parseFloat(text.getText().toString());
if (dolaresButton.isChecked()) {
text.setText(String
 .valueOf(convierteDolaresASoles(inputValue)));
dolaresButton.setChecked(false);
solesButton.setChecked(true);
} else {
text.setText(String
.valueOf(convierteSolesADolares(inputValue)));
solesButton.setChecked(false);
dolaresButton.setChecked(true);
}
}
}
// Convierte a dólares
private double convierteSolesADolares(float soles) {
return (soles/3.8);
}
// Convierte a soles
private double convierteDolaresASoles(float dolares) {
return (dolares*3.8);
}
}

Ilustración - 8 “Comprobando que funciona el programa”

Modifique la propiedad de backgroud de cada control para elegir el color que considere a su gusto.

Ilustración - 9 “Agregando color al brackground”

Debajo del botón btnConvertir agregue un control GridView con la propiedad id: gridView y numColums: 3,
configure las propiedades como sigue:

Ilustración - 10 “GridView con 3 columnas”

Pegue en la carpeta drawable tres imágenes de celulares copiadas de la web con los nombres mostradas en la
figura, para que sea visualizado por el gridview.

Ilustración - 11 “3 imágenes para mostrar”

Luego, en el archivo de java agregue el siguiente código:
public class ImageAdapter extends BaseAdapter {
private Context mContexto;

public ImageAdapter(Context c) {
mContexto = c;
}

public int getCount() {

return mListaIds.length;
}

public Object getItem(int posicion) {

return null;
}

public long getItemId(int posicion) {

return 0;
}

public View getView(int posicion, View converVista, ViewGroup padre) {

ImageView imgVista = new ImageView(mContexto);
imgVista.setImageResource(mListaIds[posicion]);
return imgVista;
}

private Integer[] mListaIds = {

R.drawable.cel1,
R.drawable.cel2,
R.drawable.cel3
};
}

En la función OnCreate agregue el siguiente código enmarcado para el GridView.

GridView gridView = (GridView) findViewById(R.id.gridView);
gridView.setAdapter(new ImageAdapter(this));
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener());

Luego escriba el código enmarcado en el método onItemClick para que muestre (Toast) el índice de la imagen
que clickeamos.
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, ""+ i, Toast.LENGTH_SHORT).show();
}

Ejecute la actividad.
 Ilustración - 12 “Proyecto ejecutado y funcinal”

EJERCICIOS

• Cree una aplicación que permita realizar conversiones entre distintos tipos de monedas. Considere
divisas como: Euro (Europa), Libra (Inglaterra), Rupia (India), Real (Brasil), Peso (México), Yuan (China) y
Yen (Japón), además del dólar y nuevo sol.

Crear proyecto con el nombre Conversiones.

Ilustración - 13 “Creando nuevo proyecto Conversiones”

Diseñando interfaz.

Ilustración - 14 “Interfaz para conversor de monedas”

Código de la interfaz:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<EditText
android:id="@+id/textMoneda2"
android:layout_width="161dp"
android:layout_height="50dp"
android:ems="10"
android:inputType="number|numberDecimal|numberSigned"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textView2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499" />

<Button
android:id="@+id/btnConvertir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:onClick="convertir"
android:text="Convertir"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.663" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Conversor de monedas"
android:textSize="20sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.325" />

<EditText
android:id="@+id/textMoneda1"
android:layout_width="151dp"
android:layout_height="49dp"
android:ems="10"
android:inputType="number|numberDecimal|numberSigned"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Es"
app:layout_constraintBottom_toTopOf="@+id/btnConvertir"
app:layout_constraintEnd_toStartOf="@+id/textMoneda2"
app:layout_constraintHorizontal_bias="0.52"
app:layout_constraintStart_toEndOf="@+id/textMoneda1"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintVertical_bias="0.561" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Introducir la cantidad a convertir"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.492"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.425" />

<Spinner
android:id="@+id/spinner1"
android:layout_width="150dp"
android:layout_height="31dp"
android:layout_marginStart="21dp"
 android:layout_marginTop="9dp"
android:layout_marginEnd="22dp"
android:layout_marginBottom="22dp"
app:layout_constraintBottom_toTopOf="@+id/btnConvertir"
app:layout_constraintEnd_toStartOf="@+id/textView4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textMoneda1" />

<Spinner
android:id="@+id/spinner2"
android:layout_width="157dp"
android:layout_height="34dp"
android:layout_marginStart="27dp"
android:layout_marginTop="9dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toTopOf="@+id/btnConvertir"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/textMoneda2" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.48"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.561" />

</androidx.constraintlayout.widget.ConstraintLayout>

Código de la funcionalidad:
package com.example.conversiones;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.ArrayAdapter;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

private EditText editText;
private Spinner spinnerpri;
private Spinner spinnerseg;
private Button convertidor;
private TextView resultados;

private String[] monedas = {"Euro", "Pound", "Rupee", "Real", "Peso", "Yuan", "Yen", "Dollar", "Nuevo
Sol"};
private double[] decimales = {0.92, 0.79, 83.02, 5.03, 16.80, 7.21, 151.20, 1.0, 3.70};
 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);

editText = findViewById(R.id.textMoneda1);
spinnerpri = findViewById(R.id.spinner1);
spinnerseg = findViewById(R.id.spinner2);
convertidor = findViewById(R.id.btnConvertir);
resultados = findViewById(R.id.textMoneda2);

ArrayAdapter<String> adapter = new ArrayAdapter<>(this,

android.R.layout.simple_spinner_dropdown_item, monedas);

spinnerpri.setAdapter(adapter);
spinnerseg.setAdapter(adapter);

convertidor.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
convertir();
}
});

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
}

public void convertir(){

double amount = Double.parseDouble(editText.getText().toString());
double fromRate = decimales[spinnerpri.getSelectedItemPosition()];
double toRate = decimales[spinnerseg.getSelectedItemPosition()];

double result = (amount / fromRate) * toRate;

resultados.setText(String.format("%.2f", result));
Toast.makeText(this, "Conversión exitosa¡¡¡", Toast.LENGTH_SHORT).show();

Ejecutando la aplicación.
 Ilustración - 15 “Proyecto funcionando”

• Elabore una aplicación que implemente un objeto GridView para que muestre una grilla de imágenes
sobre los distintos tipos de pizzas y que muestre el nombre de la pizza al hacer click.

Creando nuevo proyecto.

Ilustración - 16 “Creando nuevo proyecto de imágenes”

En la interfaz.

Ilustración - 17 “Un gridVIew de 2 columnas”

Clase MainActivity.
package com.example.imagenes;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

private GridView gridView;

private ImageAdapter adapter;

// Array con los nombres de las pizzas

private String[] nombresPizzas = {"Pizza Margarita", "Pizza Pepperoni", "Pizza
Hawaiana", "Pizza Vegetariana"};

// Array con los IDs de las imágenes de las pizzas

private int[] imagenesPizzas = {R.drawable.pizza_margarita,
R.drawable.pizza_peperoni, R.drawable.pizza_hawaiana, R.drawable.pizza_vegetariana};

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

gridView = findViewById(R.id.gridView);
 // Configurar el adaptador personalizado para el GridView
adapter = new ImageAdapter(this, nombresPizzas, imagenesPizzas);
gridView.setAdapter(adapter);

// Manejar clics en los elementos del GridView

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
String nombrePizza = nombresPizzas[position];
Toast.makeText(MainActivity.this, "Has seleccionado: " + nombrePizza,
Toast.LENGTH_SHORT).show();
}
});
}
}
package com.example.imagenes;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

private GridView gridView;

private ImageAdapter adapter;

// Array con los nombres de las pizzas

private String[] nombresPizzas = {"Pizza Margarita", "Pizza Pepperoni", "Pizza
Hawaiana", "Pizza Vegetariana"};

// Array con los IDs de las imágenes de las pizzas

private int[] imagenesPizzas = {R.drawable.pizza_margarita,
R.drawable.pizza_peperoni, R.drawable.pizza_hawaiana, R.drawable.pizza_vegetariana};

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

gridView = findViewById(R.id.gridView);

// Configurar el adaptador personalizado para el GridView

adapter = new ImageAdapter(this, nombresPizzas, imagenesPizzas);
gridView.setAdapter(adapter);

// Manejar clics en los elementos del GridView

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
String nombrePizza = nombresPizzas[position];
Toast.makeText(MainActivity.this, "Has seleccionado: " + nombrePizza,
Toast.LENGTH_SHORT).show();
}
});
}
}
Clase ImagenAdapter
package com.example.imagenes;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {

private Context mContext;
private String[] nombresPizzas;
private int[] imagenesPizzas;

public ImageAdapter(Context context, String[] nombresPizzas, int[]

imagenesPizzas) {
this.mContext = context;
this.nombresPizzas = nombresPizzas;
this.imagenesPizzas = imagenesPizzas;
}

@Override
public int getCount() {
return imagenesPizzas.length;
}

@Override
public Object getItem(int position) {
return null;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(300, 300)); // Tamaño
de cada celda del GridView
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
} else {
imageView = (ImageView) convertView;
}

// Establecer la imagen de la pizza en la celda del GridView

imageView.setImageResource(imagenesPizzas[position]);

return imageView;
}
}
 Ilustración - 18 “Ejecutando y probando el programa”

CUESTIONARIO

1. ¿Cómo se vincula métodos a los controles?

Se vinculan mediante el atributo onClick [1].

2. ¿Para qué sirve la función findViewById?

Para enlazar la vista del usuario de una aplicación, a una variable, accede al recurso para cambiar sus
propiedades [2].

3. ¿Cómo funciona el control GridView?

El GridView es un control extremadamente flexible para mostrar tablas multicolumna.Cada registro de una
consulta del un select configurado en un SqlDataSource genera unafila en la grilla. Cada campo en el
registro representa una columna en la grilla.El GridView es el control más poderoso que provee el ASP.Net
[3].
BIBLIOGRAFÍA

[1] R. D. Hernandez. “Botón HTML onclick: Tutorial de evento de clic en JavaScript”. freeCodeCamp.org.
Accedido el 24 de marzo de 2024. [En línea]. Disponible: https://www.freecodecamp.org/espanol/news/boton-
html-onclick-tutorial-de-evento-de-clic-en-
javascript/#:~:text=El%20evento%20onclick%20ejecuta%20una,etiqueta%20de%20apertura%20del%20botó
n.

[2] “El findViewById(), y lo cargante que puede llegar a ser :: Frogtek”. Tecnología :: Frogtek. Accedido el 24 de
marzo de 2024. [En línea]. Disponible: https://developing.frogtek.org/2010/09/20/el-findviewbyid-y-lo-cargante-
que-puede-llegar-a-
ser/#:~:text=pues%20findViewById()%20.,cambiar%20una%20de%20sus%20propiedades.

[3] “Control GridView”. Tutoriales Programacion Ya. Accedido el 24 de marzo de 2024. [En línea]. Disponible:
https://www.tutorialesprogramacionya.com/aspnetya/detalleconcepto.php?codigo=67#:~:text=El%20control
%20GridView%20del%20ASP,una%20fila%20en%20la%20grilla.