Day 8: Jetpack Compose Layouts – Building UI with Column, Row, Box

📐 Jetpack Compose Layouts: Design with Kotlin

In traditional Android, you used LinearLayout, RelativeLayout, and ConstraintLayout with XML.
In Jetpack Compose , everything is Kotlin-based and declarative, making layout code cleaner and more readable.

✨ Key Layouts You’ll Use:

🔹 1. Column

Arranges items vertically.

Column(
    modifier = Modifier.padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("Welcome")
    Button(onClick = {}) {
        Text("Click me")
    }
}

🔹 2. Row

Arranges items horizontally.

Row(
    horizontalArrangement = Arrangement.SpaceEvenly,
    modifier = Modifier.fillMaxWidth()
) {
    Text("Left")
    Text("Right")
}

🔹 3. Box

Useful for stacking or overlaying elements.

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Gray)
) {
    Text("Overlay", modifier = Modifier.align(Alignment.Center))
}

🔹 4. Spacer

For adding space between elements.

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

🔹 5. Modifiers

Control padding, alignment, width, height, background, and more.

Text(
    text = "Styled text",
    modifier = Modifier
        .padding(8.dp)
        .background(Color.Yellow)
)

🎯 Layout Principles in Compose

• Think in nesting, like React/Flutter.
• Use Modifiers to customize layout behavior.
• Combine Row + Column + Box for rich layouts.
• Use Preview to iterate quickly.

🧠 Best Practices

✅ Keep Composables small and focused
✅ Extract UI parts into separate functions
✅ Use Arrangement and Alignment for consistent spacing
✅ Don’t over-nest — prefer composable reuse

🧭 Continue Your Android Developer Journey

✅ Day 3: Java vs Kotlin

✅ Day 4: Your First Android Project

✅ Day 5: Activities & Intents

✅ Day 6: Android Lifecycle

✅ Day 7: Introduction to Jetpack Compose