compose-zoomable-image

A lightweight Jetpack Compose composable for pinch-to-zoom, double-tap zoom, pan, and horizontal swipe gestures on images.

Features

• Pinch-to-zoom with configurable min/max scale
• Double-tap to toggle zoom
• Pan when zoomed (bounded to container)
• Horizontal swipe detection with configurable threshold
• Landscape/portrait orientation support
• Error-resilient gesture handling

Usage

var containerSize by remember { mutableStateOf(IntSize.Zero) }
val configuration = LocalConfiguration.current
val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE

Box(
    modifier = Modifier
        .fillMaxSize()
        .onGloballyPositioned { containerSize = it.size }
) {
    ZoomableImage(
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = "Zoomable photo",
        containerSize = containerSize,
        isLandscape = isLandscape,
        onSwipeLeft = { /* Navigate to next */ },
        onSwipeRight = { /* Navigate to previous */ },
    )
}

Parameters

Parameter	Type	Default	Description
painter	Painter	required	The image to display
contentDescription	String	required	Accessibility description
containerSize	IntSize	required	Parent container size for pan bounds
isLandscape	Boolean	required	Device orientation
onSwipeLeft	() -> Unit	{}	Callback for right-to-left swipe
onSwipeRight	() -> Unit	{}	Callback for left-to-right swipe
swipeThreshold	Float	150f	Minimum drag distance to trigger swipe
maxScale	Float	2f	Maximum zoom level
padding	PaddingValues?	null	Custom padding (auto-calculated if null)
modifier	Modifier	Modifier	Standard Compose modifier

Installation

Copy ZoomableImage.kt into your project, or include as a module dependency.

License

MIT License. See LICENSE for details.