Jetpack Compose es el sistema oficial de Google para el diseño de interfaces. Con Compose las interfaces se construyen mediante funciones en lenguaje Kotlin.

Las funciones que forman parte de la interfaz se marcan con la anotación:

@Composable

Por ejemplo:

@Composable
fun Saludo() {
    Text("Hola Android")
}

Una función @Composable puede llamar a otras funciones @Composable para construir interfaces más complejas.

Por ejemplo:

@Composable
fun PantallaPrincipal() {
    Column {
        Text("Bienvenido")
        Text("Mi primera aplicación")
    }
}

Desde la Activity podemos indicar qué interfaz queremos mostrar utilizando:

setContent {
    PantallaPrincipal()
}

Un ejemplo completo sería:

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

Compose incluye numerosos componentes para construir interfaces. Algunos de los más utilizados al principio son:

Por ejemplo:

@Composable
fun Ejemplo() {
   Text("Nombre")
   Button(
      onClick = {
        // Acción al pulsar
      }
   ) {
    Text("Aceptar")
   }
}

Compose permite organizar los componentes mediante distintos contenedores. Los principales son:

Ejemplo:

@Composable
fun DatosUsuario() {
 
Column {
    Text("Nombre: Ana")
    Text("Edad: 22")
}
 
}

También podemos combinar diferentes contenedores:

@Composable
fun FichaUsuario() {
 
Column {
    Text("Usuario")
 
    Row {
        Text("Ana")
        Text("22 años")
    }
}
 
}

Modifier se utiliza para modificar el aspecto, tamaño o posición de los componentes. Por ejemplo:

Text(
    text = "Hola Android",
    modifier = Modifier.padding(16.dp)
)

También podemos encadenar varios modificadores:

Button(
    onClick = { },
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Text("Aceptar")
}

Algunos modificadores habituales son:

• padding()
• fillMaxWidth()
• fillMaxSize()
• width()
• height()

Jetpack Compose utiliza habitualmente componentes basados en Material Design. Por ejemplo:

Button(
    onClick = { }
) {
    Text("Guardar")
}

o:

TextField(
    value = "",
    onValueChange = { },
    label = {
        Text("Nombre")
    }
)

Estos componentes ya incluyen comportamientos y estilos preparados para aplicaciones Android modernas.

Android Studio permite previsualizar componentes Compose sin ejecutar completamente la aplicación. Para ello se utiliza la anotación:

@Preview

Por ejemplo:

@Preview(showBackground = true)
@Composable
fun PantallaPreview() {
    PantallaPrincipal()
}

Esto permite comprobar rápidamente cómo se verá una parte de la interfaz.

Una de las ventajas de Compose es que podemos dividir una interfaz en funciones pequeñas y reutilizables. Por ejemplo:

@Composable
fun Titulo(texto: String) {
    Text(texto)
}

Podemos reutilizarla varias veces:

@Composable
fun Pantalla() {
 
Column {
    Titulo("Usuarios")
    Titulo("Configuración")
}
 
}

Esto facilita mantener el código organizado y evita repetir elementos.

El estado es el conjunto de datos que determina cómo debe mostrarse la interfaz en un momento determinado.