androidandroid-jetpack-composeandroid-jetpack-compose-scaffold

How to implement zoom and pan on an Image in jetpack compose


I have an Image composable where I want the users to able to zoom into a part of the image. For example, if pinched on the bottom left of the image then zoom into that the bottom left area and not the center of the image. And when zoomed in then be able to pan around the image if a single finger.

In my current code, I have the pinch to zoom in & out logic but it defaults to the center of the image no matter where the image was pinched And there is no pan logic to the image when zoomed in.

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "some description here",
    modifier = Modifier
        .graphicsLayer(
            scaleX = scale.value,
            scaleY = scale.value
        )
        .pointerInput(Unit) {
            detectTransformGestures { _, _, zoom, _ ->
                scale.value = when {
                    scale.value < 0.5f -> 0.5f
                    scale.value > 3f -> 3f
                    else -> scale.value * zoom
                }
            }
        }
)

So I want to achieve two things:

  1. be able to zoom where it was actually pinched(not the center of the image)
  2. When Zoomed in, be able to pan around the image

I've tried implementing multiple solutions from other stack overflow answers but they don't seem to work.


Solution

  • There is a newly released compose library to do that, I haven't tried it personally but it has a good promise.

    Go check out Telephoto

    [OLD ANSWER]:

    There is currently not possible to do that with compose.

    However i recommend you to interop with TouchImageView or similiar using AndroidView composable.