50319-DAM-Tarea 1

Desarrollo de aplicaciones móviles Universidad Estatal a Distancia
50319 Vicerrectoría Académica
Actividad Evaluada Dirección de Extensión Universitaria
Tarea 1
Valor: 10%
Modalidad: Individual
Fecha de entrega: Módulo 1, del 6 al 12 de junio, antes de las 11:55 p.m.
Objetivo:
Adquirir conocimientos básicos sobre el desarrollo de aplicaciones para dispositivos
móviles.
Información / situación:
La tarea busca que el estudiante identifique y desarrolle las habilidades básicas
iniciales en el uso de la herramienta Android Studio más actual.
Recursos necesarios: Temas del módulo 1.
Desarrollo de la tarea:
I Parte. Realice lo siguiente
1. Lea los temas del módulo 1 y desarrolle el App que se describe en las instrucciones
que se muestran continuación.
2. El estudiante debe leer y aplicar cada punto que se le indica en las instrucciones,
además una vez finalizada la actividad debe asegurarse que la actividad cumpla
con todos los puntos que se evaluarán, estos puntos los puede verificar en el cuadro
llamado Criterios de evaluación, presentes al final de este documento.
3. Crear una carpeta en el escritorio llamada TareaNo1 en esta carpeta debe guardar
la solución solicitada, proyectos y objetos requeridos.
1
4. Abrir Android Studio, y cree un proyecto nuevo (Start a new Android Studio Project)
llamado Tarea1-SUNOMBRE:
a. Inicie nuevamente Android Studio:
Note que ahora aparecen a la izquierda los proyectos anteriores que hemos
creado para el acceso rápido.
b. Cree un proyecto nuevo (Start a new Android Studio Project) llamado
Tarea1-SUNOMBRE, presione Next
2
c. Mantenga su proyecto en API 15, presione Next:
d. Seleccione una actividad en blanco (Empty Activity), presione Next:
3
e. Mantenga el nombre por defecto de la actividad MainActivity y el nombre

del diseño Layout_main, presione Finish
f. Se inicia el proceso de generación del proyecto:
g. Con esto tenemos listo nuestro proyecto para iniciar a trabajar:
4
5. Todos los proyectos que creamos en Android Studio generan dos partes principales:
a. La carpeta app que contiene otras carpetas como lo son:

i. manifests: En esta se ubica el archivo AndroidManifest.xml que
podemos compararlo con el archivo app.config o web.config que
genera Visual Studio donde se mantienen la estructura principal de
nuestra App, un cambio en este archivo puede corromper o dañar
permanentemente nuestra App, por lo tanto, es importante modificar
lo necesario solo cuando se solicite.
5
ii. java: Esta carpeta contiene tres subcarpetas llamadas:

vrow se refiere al
nombre de su  com.example.vrow.tarea1_sunombre: Contiene la clase
usuario en su PC MainActivity (llamada así desde la creación del proyecto)
que será la clase principal que iniciara al ejecutar el proyecto,
como podemos ver esta clase se extiende de una clase
pública llamada AppCompatActivity:
Sin meternos en muchos detalles podemos decir que

AppCompatActivity es una clase que hereda otras clases como
lo son: FragmentActivity e implementa AppCompatCallback,
TaskStackBuilder.SupportParentable,
ActionBarDrawerToggle.DelegateProvider (esto lo ampliamos en
el material digital del módulo 2), todo esto para poder ejecutar lo
que aquí se define de acuerdo al método que se invoque, en
este caso el único método establecido es onCreate que
detallamos a continuación:
El único método que se sobreescribe (@Override) de la clase

padre es onCreate. Lo primero que se hace es llamar al onCreate
de la clase Activity. Esto se hace así porque cuando una
actividad se crea, se puede querer crear con información que
tenía previamente. Esta información se recibe en el objeto
6
savedInstanceState. Por ejemplo, si cambiamos la posición del

móvil a horizontal mientras completamos un formulario. Este
cambio provoca que la actividad se creé de nuevo, y lo más
usable, es que los campos que ya ha completado el usuario sigan
completos con la misma información.
También vemos que se llama al método setContentView. Este

método solo se puede llamar desde el método onCreate, y
además es un campo inmutable. Solo se puede fijar la vista de la
actividad una sola vez. Es la forma que tiene Android de
obligarnos a tener una única vista por actividad.
 Posteriormente las carpetas

com.example.vrow.tarea1_sunombre (androidTest) y
com.example.vrow.tarea1_sunombre (test) servirán para
ejecutar las pruebas de nuestro proyecto, como vemos son
creados de forma predeterminada y no se deben eliminar
en ningún momento.
iii. Res: Esta carpeta permite modificar algunas de las principales
partes de las que consta el proyecto por ejemplo:
 Drawable: Sirve para colocar las imágenes que necesitemos
en nuestra aplicación.
 Layout: Permite editar el diseño de nuestra aplicación,
desde aquí podemos agregar/quitar los componentes que
necesitamos en nuestra app.
 Mipmap: Sirve para lo mismo que la carpeta drawable pero
con el objetivo solamente de colocar el icono de la app
que estamos desarrollando, inicialmente viene el icono
predeterminado de Android.
 Values: Permite que definamos los principales recursos que
trabaja nuestra app como lo son los colores (colours),
7
cadenas (strings) y estilos (styles), esto lo vamos a ir trabajando

a lo largo del curso.
b. Gradle Scripts: Construye un archivo donde se puede configurar opciones
para todos los sup-proyectos o módulos de nuestra App esto nos sirve para
realizar pruebas al ejecutar lo que desarrollaremos.
6. Después de comentar brevemente todo lo referente a la ventana Project,
crearemos un proyecto donde trabajaremos con un ejemplo más práctico para el
uso de los diferentes elementos de la ventana Project, para esto crearemos un
simple formulario que sume dos valores numéricos ingresados por el usuario.
a. Iniciamos eliminando el contenido del “Hello World!” que genera Android
Studio de forma predeterminada, seguidamente nos ubicamos en la venta
Palette y en la jerarquía Text buscamos el control “Number” ahora
arrastramos este control al espacio de trabajo como se muestra a
continuación:
Al agregar el control editText de tipo número (number), vemos como se

despliegan a la derecha de la ventana los diferentes atributos (Propiedades)
que se pueden establecer al control, como lo es el ID que actualmente es
llamado como editText1, lo más conveniente es crear un diminutivo acorde
a lo que este editText representa, por ejemplo, etValor1 que sería un editText
para el Valor 1, además establecemos el hint (texto alterno si no tenemos
texto en el atributo text) con el valor Ingrese el valor 1
8
b. Repetimos el paso anterior para agregar un segundo editText con los

siguientes atributos:
 ID: etValor2
 hint: Ingrese el valor 2
c. Seguidamente agregamos un button (botón) con los siguientes atributos

(propiedades):
 ID: btnSumar
 layout_width: 214dp
 layout_height: 47dp
 text: Sumar
 De momento nuestro proyecto debe ser similar al siguiente:
9
d. Por último, mostraremos el resultado en un control llamado TextView, para

esto lo ubicamos de la lista y lo arrastramos al entorno de desarrollo, para
este establecemos los siguientes atributos (propiedades):
 ID: tvResultado
 text: Resultado
 Con esto finalizamos el diseño de la app, la cual debe ser similar a la
siguiente:
10
e. Hasta aquí tenemos listo nuestra app sin embargo al no establecer el

posicionamiento a cada uno de los controles que agregamos Android
coloca automáticamente todos los controles en la posición 0,0 del
ConstraintLayout para solucionar este problema de diseño debemos
enfocarnos en establecer un margen prudente entre cada elemento con
respecto a los costados del contenedor donde se encuentran, por ejemplo
para el control etValor1, seleccionamos el control y ubicamos en los atributos
el diseño que se muestra a continuación:
Como puede ver se establecen cuatro signos de suma uno en cada costado
del control, para solucionar el problema anterior debemos fijar un margen
entre los objetos de al menos 1dp entre el objeto superior e inferior (los
restantes pueden ser establecidos o no, en nuestro caso no es necesario),
para notar la diferencia estableceremos el superior e inferior en 8dp cada
uno, para esto presione un clic sobre el + y seleccione o escriba el valor
deseado:
11
Este paso lo debe repetir para los otros controles dejando 8dp en cada uno
(solamente el último control Resultado no es necesario que tenga
establecido un valor inferior). La cadena anterior de enlaces puede notarla
como se muestra a continuación:
8
12
f. Si ejecutamos esta app, el botón btnSumar (SUMAR) no hará nada, para esto
buscamos en el menú superior Run / Run ‘app’ (esto puede durar varios
minutos en ejecutarse por primera vez):
13
g. Si notamos se ha trabajado solamente en el archivo xml (activity_main.xml)

para ver todo lo que hemos trabajado en xml podemos dar clic en la
etiqueta Text de la parte inferior:
Veamos el diseño en xml:
14
El diseño en xml es una serie de etiquetas (similares a HTML) que estructuran

nuestra app, al hacer un cambio en el diseño esta se verá reflejada en el
texto y viceversa.
Las etiquetas xml pueden ser de referencia o inicio y cierre.
Las etiquetas de referencia se establecen:
Inicio Cierre
<ETIQUETA atributos:propiedad=”valor de la propiedad” />
Las etiquetas de inicio y cierre se establecen:

<ETIQUETA
atributos:propiedad=”valor de la propiedad”
Inicio
atributos:propiedad=”valor de la propiedad”
atributos:propiedad=”valor de la propiedad”>
</ETIQUETA> Cierre
Por ejemplo, este diseño cuenta con diferentes etiquetas:
Etiqueta de <?xml version="1.0" encoding="utf-8"?>

referencia
Una etiqueta constraint (de inicio)
Etiqueta de
<android.support.constraint.ConstraintLayout
inicio 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="com.example.vrow.tarea1_sunombre.MainActivity">
Dentro de la etiqueta constraint los diferentes controles que insertamos:
Etiqueta de
<EditText
referencia android:id="@+id/etValor1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:ems="10"
15
android:hint="Ingrese el valor 1"

android:inputType="number"
app:layout_constraintBottom_toTopOf="@+id/etValor2"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="16dp" />
Etiqueta de <EditText
referencia android:id="@+id/etValor2"
android:ems="10"
android:hint="Ingrese el valor 2"
android:inputType="number"
app:layout_constraintBottom_toTopOf="@+id/btnSumar"
app:layout_constraintTop_toBottomOf="@+id/etValor1"
tools:layout_editor_absoluteX="16dp" />
Etiqueta de
<Button
referencia android:id="@+id/btnSumar"
android:layout_width="214dp"
android:layout_height="47dp"
android:text="Sumar"
app:layout_constraintBottom_toTopOf="@+id/tvResultado"
app:layout_constraintTop_toBottomOf="@+id/etValor2"
tools:layout_editor_absoluteX="16dp"
tools:text="Sumar" />
Etiqueta de
<TextView
referencia android:id="@+id/tvResultado"
android:layout_margin="5dp"
android:text="Resultado"
app:layout_constraintTop_toBottomOf="@+id/btnSumar"
tools:layout_editor_absoluteX="91dp"
tools:text="Resultado" />
Y por último el cierre de la etiqueta constraint

Etiqueta de
</android.support.constraint.ConstraintLayout>
cierre
Como puede ver todos los atributos (Propiedades) establecidos en el diseño se ven
reflejados desde acá, podemos cambiar fácilmente desde las dos vistas sin problema los
atributos (propiedades) deseados.
16
7. Ahora iniciaremos con la codificación para que el botón btnSumar (SUMAR) para
que realice las acciones que deseamos que sería sumar los dos valores ingresados
por el estudiante:
a. En la ventana Project, ubique la carpeta
app/java/com.example.vrow.tarea1_sunombre/MainActivity:
La clase MainActivity hereda de la clase AppCompactActivity que

representa una ventana de Android que contiene todos los métodos
necesarios para crear o mostrar objetos que se encuentran en el archivo
activity_main.xml que trabajamos anteriormente, en resumen, todo lo
desarrollado en el xml podemos invocarlo desde el Main_Activity.
b. Como vemos ya existe el método onCreate, el cual hereda la clase
AppCompatActivity, para poder trabajar con lo que deseamos hacer
debemos sobrescribir (@override) el método onCreate dentro de este
llamamos al método setContentView que pasa por referencia un valor
almacenado en una constante llamada activity_main que pertenece a una
clase llamada layout (recordemos que el activity_main.xml pertenece a la
carpeta layou y esta a la carpeta res del Project app), y a su vez estas
pertenecen a otra clase llamada R, creada de forma automática por
Android Studio y se encarga principalmente de relacionar el archivo
activity_main.xml con MainActivity.java, así podemos resumir que R:
17
MainActivity.java R activity_main.xml
onCreate layout
activity_main
c. Ahora necesitamos capturar los diferentes eventos para esto nos

mantenemos en el archivo MainActivity.java, definimos tres variables, dos de
tipo EditText (etValor1, etValor2) y una de tipo TextView (tvResultado), esto
implica que debamos importar estos tipos desde la sección + imports que se
ve en la linea 3 del código:
18
Presionamos sobre el + a la izquierda del texto import
Agregamos los siguientes imports:

import android.widget.EditText;
import android.widget.TextView;
Debe quedar así:
Ahora dentro de la clase MainActivity definimos las variables antes del

@override:
private EditText etValor1;
private EditText etValor2;
private TextView tvResultado;
19
Como se muestra a continuación:
Tips!
 Otra forma de importar las clases es definir el objeto, por ejemplo,
private EditText etValor1, al hacer esto sin realizar el import
previamente se muestra un botón rojo con posibles soluciones al error,
solamente se aplica el import o se presiona Alt + Enter->import Class.
 El nombre de cada variable corresponde al ID de cada objeto, esto
no necesariamente es obligatorio, pero es recomendable para
identificar el objeto con que estamos trabajando.
 Para la clase button (Botón) no es necesario definir un atributo ni
importar nada.
20
d. Ahora para identificar cada EditText y TextView con cada una de las
variables creadas debemos agregar el siguiente código dentro del método
onCreate:
etValor1=(EditText)findViewById(R.id.etValor1);
etValor2=(EditText)findViewById(R.id.etValor2);
tvResultado=(TextView)findViewById(R.id.tvResultado);
Esto hace que por medio del método findViewById encontremos en
el xml el objeto mediante su ID, la sintaxis de este método es:
Variable=(TIPO DE OBJETO)findViewById(UBICACIÓN POR ID en la
jerarquía R.layout.ID), debe quedar como se muestra a
continuación:
21
e. Ahora todo lo tenemos capturado del lado del MainActivity.java en

variables privadas (private) obtenido del activity_main.xml, pero de igual
manera no sirve de nada nuestra app porque no tenemos un método que
realice los cálculos necesarios, para esto realizamos lo siguiente:
i. Al final del método onCreate iniciamos un nuevo método sin retorno
(void) llamado sumar que recibe por parámetro un objeto view de la
clase View (se debe importar, recuerde Alt + Enter->import Class para
importar), como se muestra a continuación:
//Este método se ejecutará cuando se presione el botón
public void sumar(View view) {
}
ii. Volvemos al archivo activity_main.xml en modo diseño,
seleccionamos el botón btnSumar (SUMAR) y en los atributos
(Propiedades) buscamos onClick y seleccionamos el método que
acabamos de crear en el MainActivity.java llamado sumar:
22
iii. Ahora volvemos al MainActivity.java e implementamos la lógica del

método sumar con base en los valores capturados y que se disparan
al presionar el botón btnSumar (SUMAR):
public void sumar(View view) {
//Convertir los valores en cademas
String valor1=etValor1.getText().toString();
String valor2=etValor2.getText().toString();
//Convertir las cadenas en valores enteros
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
//Realizar la suma de los valores
int suma=nro1+nro2;
String resu=String.valueOf(suma);
//Mostrar el resultado en el objeto tvResulltado
tvResultado.setText(resu);
}
iv. El código completo sería el siguiente:
23
8. Finalmente ejecutamos ( ) o aplicamos los cambios ( ) en el emulador o en su

dispositivo Android:
24
9. Al finalizar la tarea debe comprimir la carpeta creada con el proyecto en un archivo

.rar o .zip, el nombre de este archivo comprimido debe quedar con el formato
NombreApellido-TareaNo1.rar, luego subirlo en la actividad correspondiente en la
plataforma.
10. Criterios de evaluación:

Criterio Valor en puntos Valor porcentual
Aplica correctamente los puntos del 3 y 4 (10 pts)

Aplica correctamente el punto 6 (20 pts)
Aplica correctamente el punto 7 (20 pts) 65 10%
Total 65 10%
25

50319-DAM-Tarea 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

50319-DAM-Tarea 1

Uploaded by

Copyright:

Available Formats

Desarrollo de aplicaciones móviles Universidad Estatal a Distancia

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

Fecha de entrega: Módulo 1, del 6 al 12 de junio, antes de las 11:55 p.m.

Recursos necesarios: Temas del módulo 1.

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

c. Mantenga su proyecto en API 15, presione Next:

d. Seleccione una actividad en blanco (Empty Activity), presione Next:

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

e. Mantenga el nombre por defecto de la actividad MainActivity y el nombre

f. Se inicia el proceso de generación del proyecto:

g. Con esto tenemos listo nuestro proyecto para iniciar a trabajar:

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

a. La carpeta app que contiene otras carpetas como lo son:

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

ii. java: Esta carpeta contiene tres subcarpetas llamadas:

Sin meternos en muchos detalles podemos decir que

El único método que se sobreescribe (@Override) de la clase

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

savedInstanceState. Por ejemplo, si cambiamos la posición del

También vemos que se llama al método setContentView. Este

 Posteriormente las carpetas

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

cadenas (strings) y estilos (styles), esto lo vamos a ir trabajando

Al agregar el control editText de tipo número (number), vemos como se

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

b. Repetimos el paso anterior para agregar un segundo editText con los

c. Seguidamente agregamos un button (botón) con los siguientes atributos

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

d. Por último, mostraremos el resultado en un control llamado TextView, para

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

e. Hasta aquí tenemos listo nuestra app sin embargo al no establecer el

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

g. Si notamos se ha trabajado solamente en el archivo xml (activity_main.xml)

Veamos el diseño en xml:

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

El diseño en xml es una serie de etiquetas (similares a HTML) que estructuran

Las etiquetas de inicio y cierre se establecen:

Por ejemplo, este diseño cuenta con diferentes etiquetas:

Etiqueta de <?xml version="1.0" encoding="utf-8"?>

Una etiqueta constraint (de inicio)

Dentro de la etiqueta constraint los diferentes controles que insertamos:

50319 Vicerrectoría Académica

Actividad Evaluada Dirección de Extensión Universitaria

android:hint="Ingrese el valor 1"

Y por último el cierre de la etiqueta constraint

50319 Vicerrectoría Académica