How to Implement the Decorator Pattern in Jetpack Compose

How to Implement the Decorator Pattern in Jetpack Compose

Jetpack Compose gives you an incredible amount of freedom when building Android UIs. You describe what the UI should look like, and Compose takes care of the rest. But even with this flexibility, there are moments where you want to add behavior or styling around a component - without rewriting it or making it harder to maintain.

That's where the Decorator Pattern fits in beautifully.

The decorator pattern allows you to wrap additional behavior or visual enhancements around an existing component without changing its core implementation. In Jetpack Compose, this aligns perfectly with composable functions and modifiers, letting you layer responsibilities in a clean, reusable, and scalable way.

What is the Decorator Pattern?

The decorator pattern is a structural design pattern that allows behavior to be added to individual objects, dynamically and transparently, without affecting other objects from the same class.

In simple terms:

• You have a core component that does one thing.
• You want to add additional capabilities such as styling, animations, logging, or accessibility enhancements, without modifying that component's code.
• Decorators wrap the original component and "decorate" it with new behavior.

This is especially useful in UI frameworks like Jetpack Compose where composition and modularity are key.

Implementing the Decorator Pattern in Jetpack Compose

Let's break this down step by step.

1. Create the Base Component

Start with a basic button component that does one thing: display text and handle clicks.

@Composable
fun BaseButton(text: String, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text(text = text)
    }
}

This component is simple and testable.

2. Create Decorators

Now let's build decorators that "wrap" this base button and add extra features.

A decorator takes a composable function and adds new behavior before or after delegating to the original component.

Example: Adding a Loading Decorator

@Composable
fun LoadingDecorator(content: @Composable () -> Unit) {
    // Add loading indicator logic here
    content()
}

@Composable
fun ColoredDecorator(color: Color, content: @Composable () -> Unit) {
    // Add color modification logic here
    content()
}

3. Apply Decorators

Now that we have a base component and decorators, let's put them together.

@Composable
fun DecoratedButton(
    text: String,
    onClick: () -> Unit,
    loading: Boolean = false,
    color: Color = Color.Blue
) {
    BaseButton(text = text, onClick = onClick)
    
    if (loading) {
        LoadingDecorator {
            BaseButton(text = text, onClick = onClick)
        }
    }
    
    ColoredDecorator(color = color) {
        BaseButton(text = text, onClick = onClick)
    }
}

4. Using the Decorated Button

Ready to use it?

@Composable
fun MyScreen() {
    DecoratedButton(
        text = "Click me",
        onClick = { /* Handle button click */ },
        loading = true,
        color = Color.Red
    )
}

This approach keeps your UI modular, reusable, and easy to test.

Why This Pattern Matters in Jetpack Compose

You might wonder: "Compose is already composable. Why use a decorator pattern?"

Here's why:

• Reusability: You can apply the same decorator to many components.
• Separation of concerns: Keep UI logic and enhancements separate.
• Minimal coupling: You don't modify original components, reducing risk when components change.
• Flexibility: Decorators can be mixed and matched as needed.

This pattern fits particularly well in Compose because every UI element is a function - making the decorator concept feel natural and expressive instead of forced.

Conclusion

The decorator pattern isn't just "old school" design theory. In Jetpack Compose, it's a practical and powerful way to extend UI components without rewriting them.

• Start with your base component.
• Add decorators to wrap extra behavior.
• Compose them together in a readable and reusable structure.

That way, enhancements are additive and modular - just the way modern UI development should be.

Happy composing!

---

Reference: Decorator Pattern in Jetpack Compose Android Apps