Integración de galería fotográfica en mapas con Jetpack Compose
Clase 29 de 33 • Curso de Android: Integración de APIs nativas
Contenido del curso
- 7

Emisión controlada de tiempo con Kotlin Flows
12:55 - 8

Simulación de ubicación GPS en emulador y dispositivo Android
05:48 - 9

Modelos de localización personalizados con Clean Architecture en Kotlin
08:36 - 10

Mapeo de datos de localización en Android con Kotlin
14:51 - 11

Inyección de dependencias para observar localización en Android
06:33 - 12

StateFlow para controlar localización en aplicaciones Android
08:47 - 13

State Flows para controlar localización y tiempo en Kotlin
10:00 - 14

Configuración y pruebas de Location Tracker en Android
09:37 quiz de Servicios de Localización
- 15

Integración de ubicación actual en mapas interactivos
06:46 - 16

Creación de polilíneas con datos reales en mapas de Android
04:07 - 17

Integración de intents y estados en pantalla mapa con Compose
08:05 - 18

Implementación del ViewModel para rastreo de localización en Android
14:29 quiz de Integración Maps con Localización
- 19

Gestión de permisos en tiempo de ejecución para aplicaciones Android
08:34 - 20

Creación de diálogos de permisos reutilizables en Android
06:55 - 21

Gestión de permisos de localización y notificaciones en Android
10:18 - 22

Implementación de solicitud de permisos con LaunchedEffect en Compose
09:53 quiz de Manejo de permisos
- 23

Implementación de PhotoHandler para gestión de cámara en Android
11:59 - 24

Conversión de Bitmaps a Byte Arrays con Extension Functions
05:58 - 25

Definición de Intents y estados de UI para cámara en Kotlin
08:41 - 26

Configuración de métodos del ViewModel para gestión de cámara
09:41 - 27

Integración de CameraX con Jetpack Compose en Android
14:23 - 28

Creación de pantalla de previsualización de fotos con Jetpack Compose
08:44 - 29

Integración de galería fotográfica en mapas con Jetpack Compose
11:56 quiz de Integración cámara
En esta sesión aprenderás a incorporar componentes de interfaz (UI components) en tus pantallas de mapa para mostrar las fotos tomadas con la cámara integrada. Utilizando Jetpack Compose, implementarás marcadores interactivos que mostrarán imágenes tomadas desde ubicaciones específicas, incrementando así la funcionalidad visual y la interacción con tus mapas.
¿Qué son tracking intents y cómo agregarlos fácilmente?
El primer paso consiste en añadir dos nuevos intents al tracking intent. Estos facilitarán la interacción con los marcadores creados al hacer clic sobre ellos:
- Mostrar diálogo: permite visualizar fotos guardadas en una localización específica.
- Dismiss dialog: elimina el diálogo al finalizar la visualización.
Es recomendable utilizar copiado desde el repositorio del proyecto para garantizar la correcta y rápida integración de estos elementos.
¿Cómo crear clusters para tus fotos en mapas con Compose?
Para ofrecer un panorama claro de la cantidad de fotos tomadas en un punto determinado del mapa, se utiliza un componente denominado photo cluster. Este componente muestra, además del número de imágenes, una vista de la primera fotografía en forma circular o un ícono si no encuentra fotografía válida.
Los pasos clave a seguir incluyen:
- Crear un archivo denominado
photo cluster. - Agregar un composable que recibe una localización con una lista de fotos.
- Mostrar un pequeño distintivo (badge) indicando la cantidad de fotos.
- Manejo adecuado para visualizar imágenes usando funciones de extensión ya disponibles.
- Mostrar un ícono simple si no se puede cargar la foto.
Estos clusters se organizan en una sección propia (Cluster section) y son rápidamente generados mediante código reutilizable del repositorio.
¿De qué manera se construye una galería interactiva con Compose?
Para visualizar claramente las imágenes guardadas, se establece una galería interactiva denominada photo gallery. Al hacer clic en un marcador específico, activará la galería de fotos correspondiente usando Jetpack Compose:
- Creación de una sección independiente de galería (
photo gallery). - Usar componentes como
horizontal pager. - Incorporar funciones propias para visualizar imágenes mediante bitmaps.
- Al hacer clic en una foto, maximiza su visualización agregando opciones como el botón cerrar.
¿Cómo integrar diálogos a tu interfaz de Maps?
Complementando la interfaz actual, se agregan diálogos que permiten mostrar y ocultar fácilmente la galería de fotos:
- La optimización incluye diálogos específicos para manejar visualización y cierre fluidamente.
- Determinar claramente las acciones del usuario mediante dismiss dialog y actualización del estado correspondiente.
¿Cómo probar en el emulador tu aplicación con marcadores y diálogos?
Al completar la integración, haz pruebas en el emulador siguiendo estos pasos:
- Activa una ruta en tu app.
- Toma fotos utilizando la cámara integrada.
- Pausa el seguimiento durante la captura.
- Observa cómo se crean marcadores exclusivos.
- Revisa las imágenes visualizadas al tocar los marcadores creados.
Al realizar la prueba, notarás que al cerrar la aplicación el registro se reinicia completamente. Para solucionar esto, se abordarán técnicas avanzadas como el uso de servicios, permitiendo que tu aplicación continúe guardando rutas e imágenes en segundo plano.
Este ejercicio ofrece fundamentos sólidos y prácticos para combinar la localización, captura fotográfica e interacción visual dentro de una misma aplicación móvil.