Unlocking the Power of Compound Components in Jetpack Compose

Jetpack Compose, the modern UI toolkit from Google, revolutionizes how Android developers design and build user interfaces. Its declarative nature promotes reusable and modular components, making it a perfect playground for implementing clean architectural principles. Among these principles, compound components stand out as a game-changer for building scalable and maintainable UI systems.

In this blog, we’ll explore what compound components are, their advantages, and how to implement them with a live example. By the end, you’ll see how powerful and flexible they are for clean component design architecture.

What Are Compound Components?

Compound components are reusable components that encapsulate multiple interrelated subcomponents, exposing a flexible and cohesive API to the developer. They allow you to manage complex UI designs in a modular way by combining smaller building blocks into a cohesive unit.

Why Use Compound Components?

• Encapsulation: Simplifies complex UIs by grouping related components.
• Reusability: Promotes reuse of components across screens or apps.
• Consistency: Ensures a unified look and behavior throughout your app.
• Clean APIs: Provides a user-friendly API for developers to interact with the component.

Real-World Applications of Compound Components

Compound components are widely used in real-world applications to manage modular, scalable, and reusable UI designs. Here are a few examples:

1. E-Commerce Apps (Product Card)

In apps like Amazon or Flipkart, product cards encapsulate elements such as:

• Product Image
• Title
• Price
• Rating
• Add to Cart and Buy Now buttons

Using a compound component ensures consistency in the design of product cards across home, category, and search result screens while allowing flexibility to show only the required child components based on the screen context.

2. Social Media Apps (Post or Tweet Card)

Apps like Instagram or Twitter use compound components for posts or tweets, which include:

• User Avatar
• Username
• Post Content
• Engagement Buttons (Like, Comment, Share)

A compound component ensures a uniform look for posts while enabling variations such as showing an edit/delete option only on the user’s profile page.

3. Streaming Apps (Video or Music Card)

In apps like YouTube or Spotify, cards for videos or tracks consist of:

• Thumbnail
• Title
• Channel/Artist Name
• Play Button
• Additional Options (e.g., Add to Playlist)

Compound components help ensure consistency across home, search, and playlist screens.

A Live Example: Customizing a PostCard Component

Imagine a scenario where we have a PostCard composable that includes:

• A Title
• A Description
• An Author
• Two buttons: More and Comment

We want to use this PostCard composable across multiple screens but with varying child elements. For example, some screens may only display the title and description, while others may show all the elements. To enforce strict parent-child relationships and ensure compositional safety, we will use a scoped API approach.

Step 1: Define the PostCard API with Scoped DSL

To ensure that child components like Title, Description, and Author can only be used inside PostCard, we define a custom PostCardScope.

@DslMarker
annotation class PostCardScopeMarker

@PostCardScopeMarker
class PostCardScope {

    private val children = mutableListOf<@Composable () -> Unit>()

    fun Title(text: String) {
        children.add {
            Text(text = text, style = MaterialTheme.typography.h6)
        }
    }

    fun Description(text: String) {
        children.add {
            Text(text = text, style = MaterialTheme.typography.body1)
        }
    }

    fun Author(name: String) {
        children.add {
            Text(text = "By $name", style = MaterialTheme.typography.caption, color = Color.Gray)
        }
    }

    fun Buttons(content: @Composable RowScope.() -> Unit) {
        children.add {
            Row(horizontalArrangement = Arrangement.spacedBy(8.dp), content = content)
        }
    }

    @Composable
    internal fun renderChildren() {
        children.forEach { it() }
    }
}

Step 2: Implement the PostCard Composable

The PostCard composable now accepts a scoped lambda, ensuring all its children are defined within the context of PostCardScope.

@Composable
fun PostCard(
    modifier: Modifier = Modifier,
    content: PostCardScope.() -> Unit
) {
    val scope = PostCardScope()

    Column(
        modifier = modifier
            .padding(16.dp)
            .background(Color.White, shape = RoundedCornerShape(8.dp))
            .shadow(4.dp)
    ) {
        scope.content() // Invoke the DSL
        scope.renderChildren() // Render the scoped children
    }
}

Step 3: Use the PostCard with Scoped API

Full PostCard Example:

@Composable
fun FullPostCardScreen() {
    PostCard {
        Title(text = "Jetpack Compose: Compound Components")
        Description(text = "Learn how to create reusable components in Jetpack Compose.")
        Author(name = "Sumeet Panchal")
        Buttons {
            Button(onClick = { /* Handle more */ }) {
                Text("More")
            }
            Button(onClick = { /* Handle comment */ }) {
                Text("Comment")
            }
        }
    }
}

Simplified PostCard Example:

@Composable
fun SimplifiedPostCardScreen() {
    PostCard {
        Title(text = "Jetpack Compose: Compound Components")
        Description(text = "Learn how to create reusable components in Jetpack Compose.")
    }
}

Step 4: Benefits of This Scoped DSL Approach

1. Restricts Child Usage: Subcomponents like Title, Description, and Author are tightly coupled to the PostCard and cannot be used outside of it.
2. Cleaner API: The DSL-style API ensures the intuitive and organized structuring of UI components.
3. Flexibility: Screens can dynamically decide which parts of the PostCard to include.
4. Extensibility: New subcomponents or behaviors can be added to PostCardScope without breaking existing implementations.

The Power of Compound Components

Modularity

Breaking the UI into smaller, independent subcomponents ensures better testability and maintainability.

Flexibility

The slot-based approach allows you to adapt components for different use cases dynamically.

Scalability

As your app grows, you can enhance components without affecting their existing implementations.

Conclusion

Compound components in Jetpack Compose empower developers to build clean, reusable, and scalable UIs. By encapsulating related functionality and exposing a cohesive API, they align perfectly with modern design principles.

The PostCard example demonstrates how to leverage scoped APIs to create flexible components that adapt to different screens effortlessly. Real-world examples like product cards in e-commerce apps, postcards in social media apps, and widget cards in dashboards showcase their value in maintaining consistency and adaptability.

Start applying this pattern in your projects and elevate your Compose development experience.

Happy composing!