Hey! Let’s explore Jetpack Compose and see how it makes Android UI development more enjoyable.

What is Jetpack Compose?

Compose is just a different way to build your app’s UI. Instead of writing XML layouts and then manipulating them with code, you write Kotlin functions that describe your UI. It’s that simple.

Getting Started

First, add these to your build.gradle:

dependencies {
    implementation "androidx.compose.ui:ui:1.5.4"
    implementation "androidx.compose.material:material:1.5.4"
    implementation "androidx.compose.ui:ui-tooling-preview:1.5.4"
}

Your First Composable

Let’s write something simple:

@Composable
fun WelcomeText(name: String) {
    Text("Hey $name, welcome to Compose!")
}

That’s it! The @Composable annotation tells Compose that this function outputs UI elements. You can use it like any regular Kotlin function.

State: Making Things Interactive

State in Compose is just data that can change over time. When it changes, Compose updates your UI automatically:

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column(modifier = Modifier.padding(16.dp)) {
        Text("You clicked $count times")
        Button(onClick = { count++ }) {
            Text("Click me")
        }
    }
}

Modifiers: Styling Your UI

Modifiers are like CSS for your composables. They let you change how things look and behave:

@Composable
fun StyledButton(
    text: String,
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .height(48.dp)
    ) {
        Text(text)
    }
}

Common Gotchas to Watch Out For

  1. State Reset: Don’t declare state outside composable functions:
// DON'T do this
var count = mutableStateOf(0) // Will reset on recomposition

// DO this instead
var count by remember { mutableStateOf(0) }
  1. Wrong Thread: UI updates must happen on the main thread:
// DON'T do this
LaunchedEffect(key1 = true) {
    withContext(Dispatchers.IO) {
        // UI updates here will crash
    }
}

// DO this instead
LaunchedEffect(key1 = true) {
    val data = withContext(Dispatchers.IO) {
        // Do background work
    }
    // Update UI on main thread
}

Real World Example: A User Card

Here’s how you might build a user profile card:

@Composable
fun UserCard(user: User) {
    Card(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
    ) {
        Row(
            modifier = Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Avatar
            AsyncImage(
                model = user.avatarUrl,
                contentDescription = "Profile picture",
                modifier = Modifier
                    .size(50.dp)
                    .clip(CircleShape)
            )
            
            Spacer(Modifier.width(16.dp))
            
            // User info
            Column {
                Text(
                    text = user.name,
                    style = MaterialTheme.typography.subtitle1
                )
                Text(
                    text = user.email,
                    style = MaterialTheme.typography.body2,
                    color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f)
                )
            }
        }
    }
}

Why Use Compose?

  1. Less Code: No more XML layouts or view binding
  2. Preview Support: See your UI changes instantly in Android Studio
  3. Reusable Components: Easy to create and share UI components
  4. State Management: Automatic UI updates when data changes

Useful Tips

  1. Break down large composables into smaller ones
  2. Use previews for quick iteration
  3. Keep state at the appropriate level
  4. Use appropriate scopes for side effects

Conclusion

Compose might feel different at first, but it makes UI development much more straightforward once you get used to it. Start with small components, understand how state works, and you’ll be building complex UIs in no time.

Don’t forget to check out my other articles!