Nivel 3

Nivel 3: layouts y modifiers

Traducción al español en progresoEl contenido detallado de esta lección aún se está traduciendo. Mientras tanto, se muestra en inglés.

Compose Layout System

No more nested XML layouts. We use `Column` (vertical), `Row` (horizontal), and `Box` (z-index stacking). **Modifiers** control styling (padding, size, clicks).

📚 Explicación

Compose uses `Column`, `Row`, and `Box` instead of LinearLayout, RelativeLayout, etc. Modifiers are applied in order (outer to inner), so `padding(16.dp)` then `background` then `padding(8.dp)` creates a border effect.

Nota: La ejecución de código no está disponible para Android/Kotlin en el navegador. Usa Android Studio para ejecutar y probar la app.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.background
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun UserCard() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .background(Color.LightGray)
            .padding(8.dp), // Order matters! Inner padding.
        verticalAlignment = Alignment.CenterVertically
    ) {
        // Mock Avatar
        Box(modifier = Modifier.size(50.dp).background(Color.Blue))
        
        Spacer(modifier = Modifier.width(16.dp))
        
        Column {
            Text("Cristian Script", style = MaterialTheme.typography.headlineSmall)
            Text("Senior Engineer", style = MaterialTheme.typography.bodyMedium)
        }
    }
}

Volver a niveles de Android Volver al Developer Hub

Nivel 3: layouts y modifiers

Traducción al español en progresoEl contenido detallado de esta lección aún se está traduciendo. Mientras tanto, se muestra en inglés.

Compose Layout System

No more nested XML layouts. We use `Column` (vertical), `Row` (horizontal), and `Box` (z-index stacking). **Modifiers** control styling (padding, size, clicks).

📚 Explicación

Nota: La ejecución de código no está disponible para Android/Kotlin en el navegador. Usa Android Studio para ejecutar y probar la app.

import androidx.compose.foundation.layout.*

import androidx.compose.foundation.background

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.unit.dp

@Composable

fun UserCard() {

Row(

modifier = Modifier

.fillMaxWidth()

.padding(16.dp)

.background(Color.LightGray)

.padding(8.dp), // Order matters! Inner padding.

verticalAlignment = Alignment.CenterVertically

) {

// Mock Avatar

Box(modifier = Modifier.size(50.dp).background(Color.Blue))

Spacer(modifier = Modifier.width(16.dp))

Column {

Text("Cristian Script", style = MaterialTheme.typography.headlineSmall)

Text("Senior Engineer", style = MaterialTheme.typography.bodyMedium)

}