Skip to content
Gestures & Scroll

Transformable

Pan, zoom, and rotate with rememberTransformableState

Modifier.transformable feeds combined pan, zoom, and rotation gestures into a single callback. Store the result in state and render it through a graphicsLayer.

Transformable demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Pan, zoom, rotate

Use two fingers to scale and rotate; drag to pan.

Kotlin
var scale by remember { mutableFloatStateOf(1f) }
var rotation by remember { mutableFloatStateOf(0f) }
var offsetX by remember { mutableFloatStateOf(0f) }
var offsetY by remember { mutableFloatStateOf(0f) }
val state = rememberTransformableState { zoomChange, panChange, rotationChange ->
    scale = (scale * zoomChange).coerceIn(0.5f, 4f)
    rotation += rotationChange
    offsetX += panChange.x
    offsetY += panChange.y
}
Box(
    Modifier
        .graphicsLayer(
            scaleX = scale,
            scaleY = scale,
            rotationZ = rotation,
            translationX = offsetX,
            translationY = offsetY
        )
        .transformable(state)
        .size(96.dp)
        .background(MaterialTheme.colorScheme.primary)
)