¡Hola, comunidad de DEV!

Hoy quiero compartir con ustedes un proyecto completo que he construido para mi blog, #TucodigoCotidiano Se trata de "Helium", una aplicación Android conceptual donde he volcado las mejores prácticas de desarrollo de UI moderno utilizando Jetpack Compose.

La idea de Helium es simple pero potente: una app que permite a los usuarios compartir actualizaciones de otras apps directamente entre dispositivos cercanos (P2P), ahorrando así una cantidad enorme de datos móviles.

En este tutorial no nos centramos en la lógica P2P, sino en algo que a todos nos apasiona: construir una interfaz de usuario espectacular, reactiva y profesional desde cero.

>> Ver el tutorial completo aquí <<

¿Qué construirás en este tutorial?

Te guiaré paso a paso por toda la arquitectura de la UI, desde la idea inicial hasta un producto pulido. Aprenderás a:

• Configurar un proyecto robusto con las dependencias correctas y una estructura de paquetes limpia.
• Crear un sistema de navegación seguro y desacoplado usando NavHost.
• Implementar un tema visual completo con MaterialTheme, soportando modos claro y oscuro.
• Diseñar pantallas complejas y atractivas utilizando componentes de Material Design 3.
• Dibujar gráficos personalizados y animaciones con Canvas, como un increíble radar animado para detectar "pares" en la red.
• Construir componentes reutilizables para mantener el código limpio y escalable (DRY).

Un vistazo a las pantallas que crearemos

El tutorial cubre 4 pantallas principales, cada una con sus propios desafíos y aprendizajes:

1. HomeScreen: Un dashboard dinámico con tarjetas, un gráfico de barras personalizado y una lista de actualizaciones en progreso.
2. NetworkScreen: ¡Mi favorita! Aquí es donde creamos un radar animado con Canvas que posiciona los dispositivos cercanos usando trigonometría. Un gran ejemplo de lo que se puede lograr con Compose.
3. ActivityScreen: Un historial en formato de línea de tiempo con sticky headers para organizar los eventos por fecha.
4. SettingsScreen: Una pantalla de ajustes modular y fácil de mantener, manejando el estado de Sliders y Switches.

Aquí un pequeño fragmento de cómo creamos el radar animado, para que te hagas una idea:

kotlin
@Composable
fun AnimatedRadar(peers: List<PeerOnRadar>) {
    val pulseAnim = remember { Animatable(0f) }
    LaunchedEffect(Unit) {
        pulseAnim.animateTo(
            1f,
            animationSpec = infiniteRepeatable(
                animation = tween(durationMillis = 2000),
                repeatMode = RepeatMode.Restart
            )
        )
    }

    Box(contentAlignment = Alignment.Center) {
        Canvas(modifier = Modifier.fillMaxSize()) {
            val radius = size.minDimension / 2
            val center = Offset(size.width / 2, size.height / 2)

            // Pulso animado
            drawCircle(
                color = primaryColor.copy(alpha = 1 - pulseAnim.value),
                radius = radius * pulseAnim.value,
                center = center,
                style = Stroke(width = (2.dp.toPx() * (1 - pulseAnim.value)))
            )

            // Círculos concéntricos del radar
            repeat(3) { i ->
                drawCircle(
                    color = primaryColor.copy(alpha = 0.2f),
                    radius = radius * (i + 1) / 3,
                    center = center,
                    style = Stroke(width = 1.dp.toPx())
                )
            }
        }
        // ... Lógica para posicionar los íconos de los dispositivos
    }
}