Compose Modifier Cheatsheet — Size, Decoration, Input & Drawing

Master Jetpack Compose modifiers with this quick reference guide.

Size Modifiers

• Modifier.fillMaxSize() - fill parent container
• Modifier.fillMaxWidth() - full width, wrap height
• Modifier.weight(1f) - flex-like behavior in Row/Column
• Modifier.aspectRatio(1f) - maintain aspect ratio
• Modifier.size(100.dp) - fixed dimensions

Spacing & Positioning

• Modifier.padding(16.dp) - internal space
• Modifier.offset(x = 10.dp, y = 10.dp) - position offset
• Modifier.absolutePadding() - RTL-unaware padding

Appearance

• Modifier.background(Color.Blue) - background color
• Modifier.border(2.dp, Color.Red) - border
• Modifier.clip(RoundedCornerShape(8.dp)) - clip shape
• Modifier.shadow(4.dp) - shadow elevation

Input & Interaction

• Modifier.clickable { } - handle click events
• Modifier.toggleable() - toggle state
• Modifier.draggable() - drag support
• Modifier.pointerInput {} - low-level pointer events

Drawing & Transformation

• Modifier.graphicsLayer() - transforms, rotation, alpha
• Modifier.drawBehind {} - custom drawing
• Modifier.drawWithContent {} - draw over content

Critical Rule: Modifier Order Matters

Modifiers are applied left-to-right. Order affects behavior:

// Width 100.dp, then clip
Modifier
    .size(100.dp)
    .clip(CircleShape)

// Different from clipping first
Modifier
    .clip(CircleShape)
    .size(100.dp)

Use this cheatsheet to build responsive, interactive Compose UIs.

---

8 production-ready Android app templates on Gumroad.

Browse templates → Gumroad