Desarrollo de Aplicaciones

Móviles
Introducción al desarrollo de aplicaciones
móviles
Sesión
Mgtr. Ing. Junior Eugenio Cachay Maco
jcachay@[Link] 02
Objetivos:

➔ Desarrollo de aplicaciones móviles utilizando

controles básicos
➔ Creación de un emulador virtual android.
➔ Ejecutar la aplicación en un dispositivo físico
android.
Lista de contenidos:
➔Emulador Android
➔Desarrollo de aplicaciones móviles utilizando
controles básicos
➔Instalación en emulador y dispositivo físico

M. Tesen
Crear proyecto en Android Studio

➔ Abrir Android Studio

➔ Hacer click en New Project

➔ Seleccionar Basic Views

Activity
➔ Asignar nombre My Application

M. Tesen
Crear proyecto en Android Studio
➔ Verificar que Java se encuentre
seleccionado como lenguaje.
➔ Dejar los demás valores por
defecto.
➔ Hacer click en Finalizar.

➔ Visualización del proyecto

M. Tesen
Explorar la estructura y diseño

➔ Carpeta de la aplicación (1) para expandir la

jerarquía de archivos de la aplicación.
➔ Si hace clic en Proyecto (2) , puede ocultar o
mostrar la vista Proyecto . Es posible que
deba seleccionar Ver > Ventanas de
herramientas para ver esta opción.
➔ La selección de vista de Proyecto actual (3)
es Proyecto > Android .

M. Tesen
Explorar la estructura y diseño
➔ En la vista Proyecto > Android> app, verá tres o cuatro carpetas:
➔ Expandir carpeta manifests.
◆ [Link]: Describe todos los componentes de la
aplicación de Android y el sistema de ejecución.
➔ Expandir carpeta java
◆ [Link]: esta carpeta contiene los archivos
de código fuente de Java para su aplicación.
◆ [Link] (androidTest): en esta carpeta se
colocarían sus pruebas, que se ejecutan en un dispositivo
Android.
◆ [Link] (test): en esta carpeta se colocarían
sus pruebas unitarias, no necesitan un dispositivo Android para
ejecutarse.
➔ Expanda la carpeta res
◆ drawable: todas las imágenes de la aplicación se almacenarán
en esta carpeta.

M. Tesen
◆ layout: esta carpeta contiene los archivos de diseño de la interfaz de
usuario para sus actividades.
● Actualmente, tiene un archivo de diseño llamado
activity_main.xml. También contiene content_main.xml,
fragment_first.xmly fragment_second.xml.
◆ menu: esta carpeta contiene archivos XML que describen los menús
de su aplicación.
◆ mipmap: esta carpeta contiene los íconos del iniciador de su
aplicación.
◆ navegation: esta carpeta contiene el gráfico de navegación, que le
indica a Android Studio cómo navegar entre diferentes partes de su
aplicación.
◆ values: esta carpeta contiene recursos, como cadenas y colores,
utilizados en su aplicación.

M. Tesen
Crear emulador virtual
➔ En la vista Herramientas > AVD Manager o haga clic en
el icono de AVD Manager en la barra de herramientas.
➔ Clic en + Create Virtual Device. La ventana Seleccionar
hardware muestra una lista de definiciones de dispositivos
de hardware preconfigurados.
➔ Elija una definición de dispositivo, como Pixel 2 , y haga
clic en Next.

M. Tesen
Crear emulador virtual
➔ En el cuadro de diálogo System image, en
la pestaña Recomendado , elija la última
versión.
➔ Si aparece un enlace de descarga junto a
una versión más reciente, significa que aún
no está instalada y primero debe
descargarla.
➔ Si es necesario, haga clic en el enlace para
iniciar la descarga y haga clic en Next
cuando haya terminado.

M. Tesen
Crear emulador virtual
➔ Hacer clic en Finish.
El administrador de dispositivos virtuales de
Android AVD Manager ahora muestra el
dispositivo virtual que agregó.
➔ Ejecutar la aplicación con el emulador
◆ En Android Studio, seleccione Run >
Run 'app' o haga clic en el ícono Run
en la barra de herramientas. El ícono
cambiará cuando su aplicación ya se
esté ejecutando.

M. Tesen
Crear emulador virtual
➔ En Run > Available devices, en
Dispositivos disponibles , seleccione el
dispositivo virtual que acaba de configurar.
Este menú también aparece en la barra de
herramientas

➔ El resultado será el siguiente

M. Tesen
Ejecutar la aplicación en un dispositivo móvil

➔ Necesario:
– Un dispositivo Android como un teléfono o una
tableta.
– Un cable de datos para conectar su dispositivo
Android a su computadora a través del puerto
USB.
– Es posible que necesites instalar el controlador
USB adecuado para tu dispositivo.

M. Tesen
Ejecutar la aplicación en un dispositivo móvil

➔ Pasos en dispositivo móvil:

– En su dispositivo, abra Configuración > Acerca
del teléfono y toque Número de compilación
siete veces.
– Volver a la pantalla anterior (Configuración). Las
opciones de desarrollador aparecen al final de la
lista. Toca Opciones de desarrollador.
– Habilitar depuración de USB.

M. Tesen
Ejecutar la aplicación en un dispositivo móvil
➔ Pasos en Android Studio
– Conecte su dispositivo a su máquina de desarrollo con
un cable USB.
– En el dispositivo, es posible que deba aceptar permitir
la depuración USB desde su dispositivo de desarrollo.
– En Android Studio, haga clic en Run en la barra de
herramientas en la parte superior de la ventana.
– Seleccionar View > Toolbar, Se abre el cuadro de
diálogo Seleccionar destino de implementación con la lista
de emuladores disponibles y dispositivos conectados.
– Seleccione su dispositivo y haga clic en Aceptar .
Android Studio instala la aplicación en su dispositivo y la
ejecuta.

M. Tesen
Explorar plantilla de la aplicación
➔ Al observar la aplicación en el emulador o su
dispositivo, además del botón NEXT, se
observa el botón de acción flotante con un
ícono de correo electrónico.

➔ Si tocas ese botón, verás que se ha

configurado para mostrar brevemente un
mensaje en la parte inferior de la pantalla.

➔ Este espacio de mensajes se llama snackbar

y es una de varias formas de notificar a los
usuarios de su aplicación con información
breve.

M. Tesen
Explorar plantilla de la aplicación
➔ En la parte superior derecha de la pantalla
hay un menú con 3 puntos verticales.

➔ Si tocas eso, verás que Android Studio

también ha creado un menú de opciones
con un elemento de Configuración .

➔ Elegir Settings no hace nada todavía, pero

tenerlo configurado hace que sea más fácil
agregar configuraciones por el usuario a su
aplicación.

M. Tesen
Explorar el editor de diseño
➔ Abre el editor: Busque y abra la carpeta de
Layout ( app> res > layout) en el lado
izquierdo del panel Proyecto.
➔ Haga doble clic fragment_first.xml.

➔ Paleta(1): Elementos para

agregar a la aplicación
➔ Árbol de componentes(2):
Muestra la organización del
archivo
➔ Editor de Diseño(3): Muestra
la representación visual de la
aplicación

M. Tesen
Explorar el editor de diseño
➔ Panel de atributos(4):
◆ Representan las vistas Código (solo código),
División (código + diseño) y Diseño (solo
diseño).

◆ Seleccionar los diferentes

modos código, división,
diseño. Dependiendo del
tamaño de su pantalla y su
estilo de trabajo.

M. Tesen
Explorar el editor de diseño
➔ Panel de atributos(4):
◆ Parte inferior derecha del editor de diseño verá los botones + y -
para acercar y alejar. Con estos botones ajusta el tamaño de lo
que ve, el botón de acercar ajusta para que ambos paneles
encajen en pantalla.

◆ Barra de herramientas de diseño: Vista de

diseño, la vista de plano y ambas vistas una al
lado de la otra.
◆ Icono de orientación para cambiar la orientación
del diseño para probar cómo se ajustará su
diseño a los modos vertical y horizontal.

M. Tesen
Explorar el editor de diseño
➔ Menú del dispositivo para ver
el diseño en diferentes
dispositivos

M. Tesen
Explorar árbol de componentes
➔ En fragment_first.xml, observe el árbol de
componentes. Si no se muestra, cambie el modo
a Diseño en lugar de Dividir o Código. Este
panel muestra la jerarquía de vistas en su
diseño, es decir, cómo se organizan las vistas
entre sí.

➔ Haga clic en el icono Ocultar en la parte superior

derecha del Árbol de componentes.

➔ Recupere el árbol de componentes haciendo clic

en la etiqueta vertical Component Tree a la
izquierda

M. Tesen
Explorar jerarquías de vistas
➔ En Component Tree, observe que la raíz de la
jerarquía de vistas es una ConstraintLayout.
➔ ConstraintLayout es un ejemplo de un grupo de
vistas. Observe que ConstraintLayout contiene
un TextView llamado textview_first y un Button
llamado button_first.
➔ En el código XML, observe que el elemento raíz
es
<[Link]
Layout>. El elemento raíz contiene un
<TextView> elemento y un <Button> elemento.

M. Tesen
Cambio de valores de propiedades
➔ En el editor de código, examine las propiedades
del TextView elemento.
➔ Haga clic en el texto y notará que se refiere a un
recurso de cadena llamado
hello_first_fragment.
➔ Haga clic derecho en la propiedad y haga clic en
Go to>Declaration or Usages
values/[Link] se abre con la cadena
resaltada.
➔ Cambie el valor del string propiedad a Hello
World!.
➔ Vuelve a fragment_first.xml.

M. Tesen
Cambio de valores de propiedades
➔ Seleccione textview_first en el árbol de
componentes .
➔ Mire el panel Attributes a la derecha y abra la
sección Declared Attributes si es necesario.
➔ En el campo de texto TextView Attributes
todavía se refiere al recurso de cadena. El tener
los String en un archivo de recursos ayuda a
cambiar el valor de la cadena sin tener que
cambiar ningún otro código.
➔ Esto simplifica la traducción de su aplicación a
otros idiomas @string/hello_first_fragment
➔ Ejecute la aplicación para ver el cambio que
realizó en [Link] . Tu aplicación ahora
muestra "¡Hola mundo!".
M. Tesen
Cambio de propiedades en texto
➔ textview_first, en el editor de diseño, en
Common Attributes, expanda el campo
textAppearance.
➔ Cambie font family, aumente el tamaño del texto
y seleccione el estilo en negrita.
➔ Cambia el color del texto. Haga clic en el campo
textColor e ingrese g. Aparece un menú con
posibles valores que contienen la letra g. Esta
lista incluye colores predefinidos.
➔ Seleccione @android:color/dark_gray y
presione Enter

M. Tesen
Cambio de propiedades en texto
➔ Revisar el XML para TextView. Se
observa que se han agregado las
nuevas propiedades

➔ Ejecute su aplicación nuevamente

y vea los cambios aplicados a su
Hello World!

M. Tesen
Agregar recursos de color

➔ En el panel Project de la izquierda,

haga doble clic en res > values >
[Link] para abrir el archivo de
recursos de color.
➔ En [Link] hasta el momento se
han definido tres colores. Estos son
los colores que puedes ver en el
diseño de tu aplicación, por ejemplo,
el morado para la barra de
aplicaciones.
Agregar recursos de color
➔ En fragment_first.xml para que pueda ver el
código XML del diseño.
➔ Agregue una nueva propiedad al TextView
llamado android:background y comience a
escribir para establecer su valor en @color.
Puede agregar esta propiedad en cualquier
lugar dentro del TextView código.
➔ Elija @color/colorPrimaryDark.
➔ Cambia la propiedad android:textColor y dale
un valor de @android:color/white.
➔ TextView ahora tiene un nuevo diseño.
Agregar nuevo color para el fondo

➔ Haga clic en el parche amarillo a la izquierda

del valor del color en el campo background.

➔ Muestra una lista de colores definidos en

[Link]. Haga clic en la pestaña
Personalizado para elegir un color.

➔ Asegúrese de que el color final sea

notablemente diferente de los colores
colorPrimary y colorPrimaryDark.
Explorar propiedades ancho y largo
➔ En fragment_first.xml el Árbol de
componentes , seleccione el archivo
ConstraintLayout.
➔ En el panel Attributes, busque y
expanda la sección Layout.
➔ Las propiedades layout_width y
layout_height están configuradas en
match_parent . Es ConstraintLayout
la vista raíz de esto Fragment, por lo
que el tamaño del diseño "principal" es
efectivamente el tamaño de su pantalla.
➔ Observe que todo el fondo de la pantalla
utiliza el color de fondo de pantalla .
Explorar propiedades ancho y largo
➔ Seleccionar textview_first. Actualmente, el
ancho y alto del diseño son wrap_content ,
lo que le indica a la vista que sea lo
suficientemente grande como para encerrar
su contenido.
➔ Cambiar tanto el ancho como el alto del
diseño a match_constraint, lo que le indica
a la vista que sea tan grande como lo que
esté restringido.
➔ El ancho y el alto muestran 0dp , y el texto
se mueve hacia la parte superior izquierda,
mientras que TextView se expande para
coincidir con la ConstraintLayout.
Agregar restricciones
➔ En fragment_first.xml, observe las
propiedades de restricción para
TextView
➔ Seleccione textview_first en el
Component Tree y observe el
Constraint widget en Attributes panel.
➔ Cada uno de los puntos grises
representa una restricción, hacia arriba,
hacia abajo, hacia la izquierda y hacia la
derecha; Desde a TextView su padre,
ConstraintLayout o al botón Siguiente
para la restricción inferior.
Agregar botones
➔ Observe la Paleta en la parte superior
izquierda del editor de diseño. Mueva los
lados si es necesario para poder ver muchos
de los elementos de la paleta.
➔ Seleccione Button, arrástralo y suéltalo en la
vista de diseño, colocándolo debajo del
TextView otro botón.

➔ Mueva el cursor sobre el círculo en la parte

superior del Button.
➔ Haga clic y arrastre el círculo en la parte
superior del Button sobre el círculo en la
parte inferior del TextView.
Agregar botones
➔ El Button se mueve hacia arriba para ubicarse justo
debajo TextView porque la parte superior del botón
ahora está limitada a la parte inferior TextView.
➔ Constraint Widget en el panel Layout del panel
Attributes. Muestra algunas restricciones para Button,
incluido Top -> BottomOf textView .
➔ Eche un vistazo al código XML del botón. Ahora incluye
el atributo que restringe la parte superior del botón a la
parte inferior del archivo TextView.

➔ Haga clic en el botón que acaba de agregar en el

diseño.
➔ Mire el panel Attributes a la derecha y observe el
campo de id.
➔ Cambie el id de button a toast_button.
Ajustar botón
➔ Haga clic en una de las vistas restringidas,
luego haga clic derecho en la restricción y
seleccione Delete en el menú.

➔ O en el panel Attributes, mueva el cursor

sobre el círculo de la restricción hasta que
muestre una x y luego haga clic en él.

Eliminar restricciones:
➔ Clic en el botón Next y luego elimine la
restricción desde la parte superior del botón
hasta el archivo TextView.

➔ Haga clic en TextView y luego elimine la

restricción desde la parte inferior del texto
hasta el botón Next.
Agregar nuevas restricciones
➔ Restrinja el lado derecho del botón Next a la
derecha de la pantalla si aún no lo está.
➔ Elimine la restricción en el lado izquierdo del
botón Next .
➔ Ahora restrinja la parte superior e inferior del
botón Next de modo que la parte superior del
botón quede restringida a la parte inferior de
la pantalla TextView y la parte inferior esté
restringida a la parte inferior de la pantalla. El
lado derecho del botón está restringido al lado
derecho de la pantalla.
➔ También restringe el TextView al final de la
pantalla.
Extraer recursos de cadena

➔ En el fragment_first.xml archivo de
diseño, busque la propiedad de texto del
toast_button botón.
➔ Observe que el texto "Button" está
directamente en el campo de diseño, en
lugar de hacer referencia a un recurso de
cadena como lo TextView.
➔ Haga clic en la bombilla. En el menú que
aparece, seleccione Extraer recurso de
cadena.

M. Tesen
Extraer recursos de cadena

➔ En el cuadro de diálogo que aparece,

cambie el nombre del recurso
toast_button_text y el valor del recurso
Toast y haga clic en Aceptar.
➔ Observe que el valor de la android:text
propiedad ha cambiado a
@string/toast_button_text.
➔ Vaya al archivo res > values >
[Link]. Observe que se ha
agregado un nuevo recurso de cadena,
denominado toast_button_text.
➔ Ejecute la aplicación.

M. Tesen
Actualizar el botón siguiente
➔ El botón Toast , cambie la identificación
del botón Next button_first de
random_button en el Attributes panel.
➔ Si aparece un cuadro de diálogo que le
pide que actualice todos los usos del
botón, haga clic en Sí.
➔ En [Link], haga clic derecho en el
next recurso de cadena.

➔ El botón Toast , cambie la identificación del Rename... y cambie el nombre a

random_button_text.
➔ Haga clic en Refactor para cambiar el nombre de su cadena y cerrar el
cuadro de diálogo. Cambie el valor de la cadena de Nexta Random.

M. Tesen
Actualizar el botón siguiente

➔ En fragment_first.xml, agregue otro botón al

diseño entre el botón Toast y el botón
Random, debajo de TextView.
➔ Agregue restricciones verticales igual que los
otros dos botones.
➔ Agregue restricciones horizontales desde el
tercer botón a los otros botones.
➔ Examine el código XML para
fragment_first.xml.
Actualizar el botón siguiente
Preparar la interfaz
➔ Cambie el texto de TextView para mostrar 0
(el número cero).
➔ Cambie el id último botón que agregó,
button2, count_button en el Attributes panel
en el editor de diseño.
➔ En el XML, extraiga el recurso de cadena
count_button_text y establezca el valor en
Count.
Repara los errores si es necesario
➔ Los errores ocurren porque los botones han
cambiado id y ahora estas restricciones
hacen referencia a vistas inexistentes
Actualizar apariencia de botones y textview
➔ En [Link]
○ cambiar el valor de
screenBackground a #2196F3.
○ Añade un nuevo color llamado
buttonBackground. Utilice el valor
#BBDEFB.
➔ En el diseño, agregue un color de fondo
a cada uno de los botones. (Puede editar
el XML fragment_first.xml o utilizar el
panel Atributos).

➔ Dé al botón Toast un margen izquierdo

de 24 dp y al botón Aleatorio un margen
derecho de 24 dp.
Habilitar importaciones
automáticas
➔ Abrir el editor de configuración
yendo a File > Other Settings >
Preferences para nuevos
proyectos.

➔ Seleccione Auto Imports. En la

sección Java , asegúrese de que
esté marcada Agregar
importaciones no ambiguas
sobre la marcha
Mostrar el toast
➔ Abra [Link]( app > java > [Link] >
FirstFragment ). Esta clase tiene sólo dos métodos onCreateView() y
onViewCreated(). Estos métodos se ejecutan cuando comienza el fragmento.
➔ Usando el findViewByID() método, su código puede encontrar el
random_button usando su identificación [Link].random_button.
➔ Revisar onViewCreated(). Configura un detector de clics para el botón
random_button, que se creó originalmente como el botón Siguiente .
Mostrar el toast
➔ Utilice el findViewById() método con la identificación de la vista deseada
como argumento, luego configure un detector de clics en esa vista.
➔ Justo debajo de ese detector de clics, agregue código para configurar un
detector de clics para toast_button, que crea y muestra un mensaje.
Botón count
➔ En el fragment_first.xml archivo de
diseño, observe el id para TextView:

➔ En [Link], agregue un
detector de clics count_button debajo de
los otros detectores de clics en
onViewCreated(). Debido a que tiene un
poco más de trabajo por hacer, haga que
llame a un nuevo método countMe().

➔ En la FirstFragment clase, agregue el

método countMe() que toma un solo View
argumento. Este método se invocará
cuando se haga clic en el botón Count y
se llame al detector de clics.
Botón count
➔ Obtenga el valor de showCountTextView.
➔ Convierta el valor en un número e increméntales.
➔ Muestre el nuevo valor en TextView estableciendo mediante programación la
text propiedad de TextView.
Almacenamiento en caché
➔ En FirstFragment, agregue una variable showCountTextView tipo TextView.
➔ En onCreateView(), llamarás findViewById() para obtener el TextView que muestra
el conteo.
➔ El findViewById() método debe llamarse en un View donde busca del ID solicitado,
se asigna la vista de diseño que devuelve una nueva variable, fragmentFirstLayout,
en su lugar.
➔ Llame findViewById() a fragmentFirstLayout y especifique la id vista a buscar
textview_first. Almacene en caché ese valor en showCountTextView.
Probar button count
Docente Coordinador: Huilder Juanito Mera Montenegro
Docente: Mgtr. Ing. Junior Eugenio Cachay Maco
jcachay@[Link]