📱 Tu primera aplicación Android con Jetpack Compose

Introducción

Si recién empezás en el mundo de Android, seguramente escuchaste hablar de Jetpack Compose, el toolkit moderno de UI de Google que está reemplazando al XML tradicional.
En este artículo vas a aprender a crear tu primera aplicación Android con Jetpack Compose, paso a paso, sin complicaciones.

✅ ¿Qué es Jetpack Compose?

Jetpack Compose es un framework declarativo para construir interfaces en Android:

• Eliminás XML y trabajás solo con Kotlin.
• El código es más limpio y legible.
• Es reactivo: la UI se actualiza automáticamente cuando cambian los datos.

🛠️ Requisitos previos

Antes de empezar, asegurate de tener:

• Android Studio Giraffe o posterior instalado.
• JDK 17 (viene incluido en Android Studio).
• Conocimientos básicos de Kotlin (variables, funciones).

🚀 Paso 1: Crear el proyecto en Android Studio

1. Abrí Android Studio.
2. Seleccioná New Project → Empty Compose Activity.
3. Poné un nombre a tu app, por ejemplo: PrimeraComposeApp.
4. Verificá que esté marcada la opción Use Kotlin.
5. Hacé clic en Finish.

Android Studio te generará un proyecto base con soporte para Compose.

🚀 Paso 2: Estructura básica de una app con Compose

Al abrir el archivo MainActivity.kt vas a encontrar algo como:

package com.example.primeracomposeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Saludo("Mundo")
        }
    }
}

@Composable
fun Saludo(nombre: String) {
    Text(text = "Hola, $nombre!")
}

@Preview(showBackground = true)
@Composable
fun VistaPreviaSaludo() {
    Saludo("Android")
}

package com.example.primeracomposeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Saludo("Mundo")
        }
    }
}

@Composable
fun Saludo(nombre: String) {
    Text(text = "Hola, $nombre!")
}

@Preview(showBackground = true)
@Composable
fun VistaPreviaSaludo() {
    Saludo("Android")
}

👉 Lo importante acá es:

• setContent {} → donde definís la UI con Compose.
• @Composable → funciones que generan interfaz gráfica.
• Preview → permite ver el diseño sin ejecutar la app.

🚀 Paso 3: Personalizar tu primera pantalla

Cambiemos el saludo para que se vea más interesante:

@Composable
fun Saludo(nombre: String) {
    androidx.compose.material3.Surface {
        androidx.compose.material3.Text(
            text = "¡Bienvenido a Jetpack Compose, $nombre!",
            style = androidx.compose.material3.MaterialTheme.typography.headlineMedium
        )
    }
}

@Composable
fun Saludo(nombre: String) {
    androidx.compose.material3.Surface {
        androidx.compose.material3.Text(
            text = "¡Bienvenido a Jetpack Compose, $nombre!",
            style = androidx.compose.material3.MaterialTheme.typography.headlineMedium
        )
    }
}

Ahora vas a ver un texto más grande y estilizado.

🚀 Paso 4: Interactividad básica

Vamos a agregar un botón que cambie el saludo al hacer clic:

import androidx.compose.material3.*

@Composable
fun SaludoConBoton() {
    var nombre = remember { mutableStateOf("Mundo") }

    Column {
        Text(
            text = "Hola, ${nombre.value}!",
            style = MaterialTheme.typography.headlineMedium
        )
        Button(onClick = { nombre.value = "Compose" }) {
            Text("Cambiar saludo")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun VistaPreviaSaludoConBoton() {
    SaludoConBoton()
}

import androidx.compose.material3.*

@Composable
fun SaludoConBoton() {
    var nombre = remember { mutableStateOf("Mundo") }

    Column {
        Text(
            text = "Hola, ${nombre.value}!",
            style = MaterialTheme.typography.headlineMedium
        )
        Button(onClick = { nombre.value = "Compose" }) {
            Text("Cambiar saludo")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun VistaPreviaSaludoConBoton() {
    SaludoConBoton()
}

👉 Ahora tu app tiene estado y reactividad: al tocar el botón, la UI cambia automáticamente.

🎯 Conclusión

¡Felicitaciones! 🙌 Acabás de crear tu primera aplicación con Jetpack Compose.
Aprendiste:

• Cómo crear un proyecto base.
• Cómo funcionan las funciones @Composable.
• Cómo agregar interactividad con estado.

En próximos posts vas a ver cómo llevar estas bases a proyectos más complejos, como una calculadora o una app de notas con Room.