Universidad Nacional de Ingeniería

INGENIERÍA EN COMPUTACIÓN

Desarrollo móvil con Android

Laboratorio 1. Proyecto Android AppMultiplicacion
Facilitador: MSc. Glenda Barrios Aguirre

1. Objetivos de la práctica:

a. Desarrollar un proyecto de una sola vista con KOTLIN

b. Diseñar una vista simple haciendo uso de XML con ConstraintLayout
c. Desarrollar una funcionalidad básica de la pantalla haciendo uso de
eventos y la arquitectura de codificación MVC (Modelo, Vista,
Controlador)
d. Familiarizarse con el uso del IDE de Android Studio

2. Descripción general

La aplicación de ejemplo, se denomina

AppMultiplicacion, esta muestra una
pantalla con dos cajas de texto que permite el
ingreso de solo dígitos, estos números se toman
como parámetros de tal forma que el usuario al
presionar el botón multiplica realiza la
multiplicación de ambos números y muestra el
resultado en un cuadro de texto de solo lectura.

1 | Page
GUIA DE PASOS para el desarrollo del proyecto

1. Cree un Proyecto nuevo

2. Establezca los parámetros del Proyecto, Nombre, Package Name, Save

location, Language, Minimum SDK.

Agregar los archivos de recursos

3. Seleccione la vista Android para agregar el código de programación.

Primeramente agregaremos el archivo de recursos dimens.xml

2 | Page
4. Seleccionamos la carpeta res, dentro de ella seleccionamos la carpeta values, y
luego seguimos los pasos de las figuras de abajo. Dimens.xml, nos servirá para guardar las
unidades de medida que usaremos para personalizar la vista o pantalla que crearemos.

5. Dentro del archivo dimens.xml agregue las unidades de medida que se detallan a
continuación, recuerde lo mencionado en clases, dp para alto y ancho y sp para tamaño de
textos. Observe la sintaxis y unidades de medida, abre y cierra tag.

3 | Page
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="alto1">36dp</dimen>
<dimen name="alto2">42dp</dimen>
<dimen name="alto3">64dp</dimen>
<dimen name="margen1">10dp</dimen>
<dimen name="tamtexto1">16sp</dimen>
<dimen name="tamtexto2">24sp</dimen>
</resources>

6. Dentro del archivo de recursos strings.xml, cambiaremos el nombre por defecto de

la app, y lo dejaremos como: MultiplicaNumeros, tal como se muestra a continuación.
Revisar lo marcado en amarillo.

<resources>
<string name="app_name">MultiplicaNumeros</string>
</resources>

7. Otra manera de agregar dimensiones nuevas a tu layouts, es agregando el código

directamente en el diseño de la pantalla, Para ello agrega la referencia haciendo
click en el icono rojo, que se pone a la par, o bien dar ALT + ENTER, y en la
nueva ventana introducir el valor que desea asignar. En este caso para probar
desde código edite el @dimen/altotexto para el Hola mundo, automáticamente lo
marca en rojo, damos click en la bujía, y con esto agregamos la entrada al
dimens.

4 | Page
8. Luego de esto Android Studio no debería de marcar error en el código de diseño
y si revisamos el XML, Dimens, la entrada ha sido creada.

9. Editamos el archivo de recursos Strings.xml de tal forma que nos quede de la siguiente manera.
En este caso lo creamos de previo, pero igualmente las etiquetas se pueden ir construyendo en el
camino a medida se diseña. Realice los cambios en su proyecto, agregando o editando las líneas
que considere convenientes de tal forma que le quede tal como se muestra en el bloque de código
de abajo.

5 | Page
 <resources>
<string name="app_name">MultiplicaNumeros</string>
<string name="pnumero">Primer Número:</string>
<string name="strMultiplicar">Multiplicar</string>
<string name="snumero">Segundo Número:</string>
<string name="strNumero">"Debe ingresar un número.."</string>
</resources>

Capa Interfaz Gráfica UI

10. La personalización de la vista debe ser tal como se muestra en la imagen de inicio donde se
presenta la app, usted puede hacerlo de dos maneras, haciendo uso del IDE, estableciendo las
restricciones y márgenes correspondientes desde las herramientas gráficas, desde código XML o
combinando ambas.

6 | Page
 Desde el asistente gráfico
11. En caso de optar por el modo diseño muestro capturas de la configuración de cada uno de los
Widgets de la pantalla anterior, la cual se basa en un ConstraintLayout.

Primer Número / TextView

Primer Número /EditText

7 | Page
Segundo Número / TextView

Segundo Número / EditText

8 | Page
Multiplicar / Button

Resultado / TextView

9 | Page
 Desde código XML
12. Editar el código XML del layout activity_main.xml de tal forma que quede de la siguiente
manera. El código lo pego a nivel de imagen para que lo completen respetando lo marcado en
amarillo. Esto corresponde a la configuración básica un layout, tal como namespaces y dominio.
Lo amarillo no debe ser editado.

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

10 | Page
 <!--Primer Número -->
<TextView
android:id="@+id/tvPrimerNumero"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/alto1"
android:layout_marginEnd="36dp"
android:layout_marginTop="@dimen/alto1"
android:background="@color/design_default_color_primary"
android:text="@string/pnumero"
android:textAlignment="textStart"
android:textColor="@color/white"
android:textSize="@dimen/tamtexto2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</TextView>

<EditText
android:id="@+id/editPrimerNumero"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="10"
android:textSize="@dimen/tamtexto2"
android:hint="@string/strNumero"
android:layout_marginTop="@dimen/margen1"
android:layout_marginLeft="@dimen/alto1"
android:layout_marginRight="@dimen/alto1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tvPrimerNumero" />

……
</androidx.constraintlayout.widget.ConstraintLayout>

13. Código completo XML, de la clase activity_main.xml en modo imagen, esto

para que puedan estudiarlo y editarlo desde cero.

11 | Page
12 | Page
14. Al ejecutar el proyecto con el diseño definido arriba debe aparecer la siguiente interfaz.

13 | Page
Capa Model
Procedemos agregar la clase model, la cual contendrá la lógica del negocio, para ello
creamos una clase llamada Multiplica dentro del paquete model, el cual debe ser creado
antes. Esto es necesario para separar código y orientar el uso de una arquitectura de
desarrollo, en este caso por ser básica MVC. En este ejercicio:

• Model: La clase model implementa los métodos y constructores

• Vista: Contiene la interfaz, está ya está separada puesto se codifica en XML
• Controlador: Es la clase que le da vida a la interfaz, es decir el que programa los
distintos eventos que el usuario puede hacer en la pantalla.

1. Cree un package denominado model y dentro de esta una clase en Kotlin llamada
Multiplica.

14 | Page
2. Especificamos el nombre del paquete.

3. Ubicado en el paquete creado, crear una nueva clase en Kotlin con el nombre Multiplica

4. Escriba el código de la imagen para la clase, donde se agregará un método que multiplique
ambos números

Edite la clase de tal forma que contenga el método que le permita multiplicar ambos números.
public class multiplica() {
var pnumero:Int=0
var snumero:Int=0
fun multiplica(pnumero:Int, snumero:Int):Int
{ return(pnumero*snumero) }
}

15 | Page
Capa Controladora
5. Para concluir la programación agregamos el código a la clase controladora, en este caso el
MainActivity

Vinculamos las views del layout o pantalla diseñada con nuestra clase controladora, esto se puede
hacer utilizando binding, para efectos de este laboratorio lo haremos de manera explícita con el
findViewById

6. Programamos el evento click del botón SUMAR, mediante el método setOnClickListener{.

Nos auxiliamos del AlertDialog para emitir validaciones.

7. El código total de la clase controladora activitymain.kotlin debe verse así

16 | Page
17 | Page
 3. Resumen de la práctica

1. Para crear un proyecto nuevo, inicia Android Studio, haz clic en + Start a
new And …
2. Para crear un dispositivo virtual de Android (un emulador) que ejecute tu app,
elige Tools > AVD Manager y usa el Administrador de AVD para seleccionar
un dispositivo de hardware y una imagen del sistema.
3. Para ejecutar tu app en un dispositivo virtual, asegúrate de haber creado uno,
selecciónalo en el menú desplegable de la barra de herramientas y, luego,
haz clic en el ícono Ejecutar de la barra de herramientas para ejecutar tu
app.
4. Para encontrar los archivos de tu proyecto, selecciona Project Source
Files en el menú desplegable de la ventana Project.
5. Una ImageView es un elemento de la IU para mostrar imágenes en tu app.
6. Las ImageViews deben tener una descripción de contenido que ayude a
mejorar la accesibilidad de tu app.
7. El editor de diseño te ayuda a crear la IU para tu app.
8. Casi todo lo que ves en la pantalla de tu app es una View.
9. Una TextView es un elemento de la IU para mostrar texto en tu app.
10. Un ConstraintLayout es un contenedor de otros elementos de la IU.
11. Las Views deben acoplarse de forma horizontal y vertical dentro de
un ConstraintLayout.
12. Una forma de posicionar una View es mediante el uso de márgenes.
13. Un margen indica hasta qué distancia se encuentra una View de un borde
del contenedor en el que se encuentra.
14. Los atributos de una Views como: TextView, tales como: la fuente, el tamaño
del texto y el color.

Desafío 1
Desarrolle una aplicación sencilla donde aplique los conocimientos adquiridos y
que cumpla con los requerimientos de:

● Debe tener tres parámetros: Medida origen, Medida destino y valor a convertir.
● El convertidor debe funcionar a través de la programación del evento click del
botón Convertir.
● Es requisito que respeten la estructura de proyecto MVC (Modelo, Vista,
Controlador). Es decir, la solución debe incorporar el uso de clases, diseño en
XML con el uso de recursos Strings, Dimens y Drawable
● El lenguaje de programación debe ser KOTLIN
● La app debe tener un icono diferente al por defecto
● El día de la defensa llevar el proyecto solución, el código deberá defenderlo con
el docente. No se entregará reporte escrito, y debe respaldar un video de la
corrida funcional de la app desarrollada.

18 | Page
2. Maquetado del desafío 1

3. Webgrafía
Este ejercicio se realizó en base al estudio de estos dos ítems, con esto se concluye la Unidad
1. Kotlin Basics de este curso de la página oficial de Android Developers
https://developer.android.com/courses/android-basics-kotlin/unit-1?hl=es_419

Constraint Layouts
https://developer.android.com/develop/ui/views/layout/constraint-layout

19 | Page