Welcome to Compose

If you are reading this, you have probably heard that Jetpack Compose is the future of Android UI development. You might feel overwhelmed by all the new concepts. Do not worry — this series will guide you from zero to confident Compose developer.

By the end of this article, you will understand what Composables are and build your first real UI component. No prior Compose experience required, but basic Kotlin knowledge is assumed.

What Is a Composable Function?

In Compose, UI is built using functions marked with @Composable. These are not regular functions — they can remember state, subscribe to data changes, and automatically update when that data changes.

Think of a Composable as a recipe that describes what your UI should look like. When ingredients (state) change, Compose re-runs the recipe and updates only what changed.

// Your first Composable!
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

// Using it in your app
@Composable
fun MyApp() {
    Greeting(name = "Android Developer")
}

The Three Golden Rules

Before we go further, memorize these three rules:

• Composables can only be called from other Composables (or setContent{})
• Composables should be side-effect free — they just describe the UI
• Composables can be called many times (recomposition), so do not do expensive work inside them

Building Your First Component

Let us build a simple user profile card. We will combine multiple Composables:

@Composable
fun UserProfileCard(
    name: String,
    email: String,
    avatarUrl: String
) {
    // Card is a Material container with elevation
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        // Row arranges children horizontally
        Row(
            modifier = Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Placeholder for avatar (we'll learn images later)
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .background(Color.Gray, CircleShape)
            )
            
            Spacer(modifier = Modifier.width(16.dp))
            
            // Column arranges children vertically
            Column {
                Text(
                    text = name,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = email,
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
    }
}

Preview Your Work

One of the best features of Compose is instant previews in Android Studio. Add @Preview to see your component without running the app:

@Preview(showBackground = true)
@Composable
fun UserProfileCardPreview() {
    MyAppTheme {
        UserProfileCard(
            name = "Jane Developer",
            email = "jane@example.com",
            avatarUrl = ""
        )
    }
}

Next Steps

Congratulations! You have written your first Composable function. In Part 2, we will explore Modifiers — the powerful system for customizing layout, appearance, and behavior.