Level 3

Layouts & Modifiers

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).

📚 Explanation

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.

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the 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)
        }
    }
}

Back to Android Levels Back to Developer Hub