Notes

Jetpack Compose: Custom Modifiers

2 min read

Hey there! Let’s talk about creating custom modifiers in Jetpack Compose. There are three main ways to do this, and I’ll explain each one in simple terms.

1. Modifier Factories (The Simple Way)

This is the easiest approach. Think of it as creating a reusable style that you can apply anywhere.

fun Modifier.myBackground(color: Color): Modifier =
    this
        .padding(16.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(color)

Use it like this:

Box(modifier = Modifier.myBackground(Color.Cyan))

2. Composable Modifier Factories (The Dynamic Way)

Use this when you need to react to state changes or animations.

@Composable
fun Modifier.fade(enabled: Boolean): Modifier {
    val alpha by animateFloatAsState(if (enabled) 0.5f else 1f)
    return this.then(
        Modifier.graphicsLayer { this.alpha = alpha }
    )
}

Use it like this:

Box(modifier = Modifier.fade(enabled = isDimmed))

3. Modifier.Node (The Powerful Way)

This is for when you need full control over how things look and behave. It’s more complex but very powerful.

// The factory
fun Modifier.circle(color: Color) = this then CircleElement(color)
 
// The element
private data class CircleElement(val color: Color) : ModifierNodeElement<CircleNode>() {
    override fun create() = CircleNode(color)
    override fun update(node: CircleNode) {
        node.color = color
    }
}
 
// The node
private class CircleNode(var color: Color) : DrawModifierNode, Modifier.Node() {
    override fun ContentDrawScope.draw() {
        drawCircle(color = color)
    }
}

Use it like this:

Box(modifier = Modifier.size(100.dp).circle(Color.Red))

Which One Should You Use?

  • Modifier Factories: Use for simple styling and layout patterns
  • Composable Factories: Use when you need to react to state changes
  • Modifier.Node: Use for complex custom behaviors and maximum performance

That’s it! Choose the approach that best fits your needs. Start simple with Modifier Factories, and only move to the more complex options when you really need them.

Graph View

Backlinks