Taller de

programación de
aplicaciones
Móviles
Profesor: Jorge Astorga
Taller de programación de aplicaciones móviles

PLANIFICACIÓN

1.Actividad con Login

2.Actividad con diagrama Maestro/Detalle
3.Actividad con diagrama de navegación
4.Actividad con Scroll
5.Actividad con Configuración
6.Actividad con Pestañas
Taller de programación de aplicaciones móviles

ACTIVIDAD CON LOGIN

• Permite crear un login de acceso a

nuestra aplicación.
• Nos agrega una actividad lista para
ser enlazada.
• La verificación o autenticación de
usuarios puede realizarse
mediante base de datos o la
comparación por código.
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD LOGIN

• Crear nuevo Proyecto en la opción:

File > New > New Project > Login Activity

• Agregar un Empty Activity con un texto, al cual

re direccionar después de autentificar
correctamente.
• Usar Clase Intent para redireccionar al Empty
Activity anterior.
Taller de programación de aplicaciones móviles

ACTIVIDAD CON DIAGRAMA MAESTRO DETALLE

• permite ver una lista de elementos llamada

maestro (master) y, al presionar sobre un ítem de
esa lista, acceder a información adicional de ese
ítem, llamada detalle (detail).
Taller de programación de aplicaciones móviles

ACTIVIDAD CON DIAGRAMA MAESTRO DETALLE

Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD DIAGRAMA MAESTRO / DETALLE

• Crear nuevo Proyecto en la opción:

File > New > New Project > Master Detail Flow

• Para agregar nuestros ítems modificamos el

archivo DummyContext.java ubicado en
app/java/nuestro_paquete/dummy

• Buscar el siguiente código:

Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD DIAGRAMA MAESTRO / DETALLE

Remplazarlo por:
Taller de programación de aplicaciones móviles

ACTIVIDAD CON DIAGRAMA MAESTRO DETALLE

Taller de programación de aplicaciones móviles

ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Permite crear un menú de navegación dentro de

nuestra actividad. Este menú se ubica al costado
izquierdo de la pantalla, en forma de panel, y
aparece al deslizarnos con el dedo de izquierda a
derecha o presionando el icono de navegación
Taller de programación de aplicaciones móviles

ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

Taller de programación de aplicaciones móviles

ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

Para personalizar el menú tendremos que modificar 5

archivos:
1. MainActivity.java: Se agregan nuevas opciones de menú a
nivel de código.
2. activity_main_drawer.xml: acá se agregan nuevas
opciones de menú a nivel visual
3. Nav_header_main.xml: acá se encuentra el titulo e icono
del menú , esta en “app/res/menu
4. Strings.xml: acá modificamos los nombres del menú
5. mobile_navigation.xml: permite agregar nuevos fragment
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Crear nuevo Proyecto en la opción:

File > New > New Project > Navegation Drawer
Activity

• Agregamos al archivo Strings.xml, la nueva

opción de menú
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Agregamos al MainActivity.java el siguiente

código.
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Agregamos al activity_main_drawer.xml el
siguiente código.
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Agregamos en la ruta de la imagen la carpeta

“sampledata” y copiamos las 2 clases de la
carpeta slideshow, las renombramos como se
muestra en la imagen.
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Duplicamos el archivo “fragment_slideshow.xml”

en la ruta de la imagen y renombramos como se
muestra en la imagen como
“fragment_slideshow2.xml”
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Agregamos al mobile_navigation.xml la
referencia al
fragmento(fragment_slideshow2.xml) recién
creado y a la clase (SlideshowFragment2.java)
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Agregamos la referencia al
fragment_slideshow2.xml en la clase
SlideshowFragment2.java
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Agregamos al MainActivity.java el siguiente

código.
Taller de programación de aplicaciones móviles

ACTIVIDAD CON SCROLL

• Permite generar una pantalla con scroll y navegar por la

misma deslizando el dedo hacia arriba y abajo.
• Útil cuando tenemos mucho texto que mostrar en una
misma pantalla.
Taller de programación de aplicaciones móviles

ACTIVIDAD CON SCROLL

Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON DIAGRAMA DE NAVEGACIÓN

• Crear nuevo Proyecto en la opción:

File > New > New Project > Scrolling Activity

• En el archivo “Strings.xml” se encuentra la

variable <string name="large_text"> que
contiene el texto que se mostrará.
• En el archivo “content_scrolling.xml”, se
encuentra la variable en un “TextView”
Taller de programación de aplicaciones móviles

ACTIVIDAD CON CONFIGURACIÓN

• Permite crear opciones de configuración, permitiéndole al

usuario configurar opciones básicas sobre el
funcionamiento de nuestra aplicación. Se muestran al
usuario a través de un menú
Taller de programación de aplicaciones móviles

ACTIVIDAD CON CONFIGURACIÓN

Taller de programación de aplicaciones móviles

ACTIVIDAD CON CONFIGURACIÓN

Para personalizar el ejemplo tendremos que modificar 4

archivos:
1. root_preferences.xml: Se encuentran las opciones de
configuración a nivel visual
2. SettingsActivity.java: acá se agrega la configuración de la
funcionalidad
3. Strings.xml: acá agregamos o modificamos los textos de
las opciones de configuración
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON CONFIGURACIÓN

• Crear nuevo Proyecto en la opción:

File > New > New Project > Settings Activity
Agregar al SettingActivity.java el siguiente código
Taller de programación de aplicaciones móviles

ACTIVIDAD CON PESTAÑAS

• Permite crear distintos tipos de pestañas(tabs), para que el

usuario pueda acceder a contenido sin necesidad de
cambiar de pantalla.
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON PESTAÑAS

• Crear nuevo Proyecto en la opción:

File > New > New Project > Tabbed Activity

• Para agregar nueva pestaña agregar a strings.xml

• <string name="tab_text_3">Tab 3</string>
• Agregar esta variable en clase
“SectionsPagerAdapter.java”
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON PESTAÑAS

• En la misma clase “SectionsPagerAdapter.java”

en el método “getCount” modificar como se
muestra en la imagen el retorno a 3
Taller de programación de aplicaciones móviles

CREAR UNA ACTIVIDAD CON PESTAÑAS (antes y después de agregar Tab)

Taller de programación de aplicaciones móviles

Resumen

• Aprendimos cómo crear actividades de login, diagrama

Maestro/Detalle, diagrama de navegación, Scroll,
Configuración y Pestañas
• Conocimos los distintos tipos de actividades
• Aprendimos cómo implementar algunas cambios a
nivel visual y a nivel de código.
Taller de programación de aplicaciones móviles

TEST DE AUTOEVALUACIÓN

1. ¿Para que se puede emplear una actividad de

Maestro Detalle?
2. ¿Qué un Tab y cual es su utilidad?
3. Para que sirve el archivo strings.xml
4. Que significa la R dentro del código.
5. Como accedo a cualquier componente a nivel de
código
Taller de programación de aplicaciones móviles

EJERCICIOS PRÁCTICOS 1

1. Cree un nuevo proyecto llamado

“MIX_ACTIVIDADES”
2. Agregue una pantalla de login al inicio
3. Al autentificarse correctamente muestre un
diagrama de navegación con 2 opciones, en caso de
error una pantalla con una imagen.
4. El menú de opciones debe mostrar lo siguiente:
• Opcion 1: Redirigir a una pantalla Maestro/Detalle
que cargue 5 juegos, una descripción de ese juego.
• Opcion 2: Redirigir a una actividad con Scroll que
muestre una breve biografía suya.