Hey guys. Does anyone of you knows a compose image...

# compose

[Michael Bichlmeier]

Hey guys. Does anyone of you knows a compose image zoom library like this https://github.com/igreenwood/loupe ?
Overall requirements for our view:
• Show image in fullscreen
• Image zoom in/out with pinch gesture
• double tap for zoom in/out (by percent)
• Pager for multiple images
• Image description overlay
• Swipe to dismiss
I know we can implement things like the last two points quite simply by our own, but maybe there is already a library with all these features 😉

[Albert Chang]

https://github.com/mxalbert1996/Zoomable
You need to implement the overlay yourself but that should be quite easy.

[Michael Bichlmeier]

Thanks for that! Seems to provide everything we need 👍

[Michael Bichlmeier]

Hey @Albert Chang, I’m currently stuck on the overlay. Can you maybe support somehow?
My problem is the tap registration to show and hide the image overlay.
Here is an example:

@Composable
fun ZoomableImageWithOverlay() {
    // this one should handle the overlay visibility
    var isOverlayVisible by remember { mutableStateOf(true) }
    val state = rememberZoomableState(
        minScale = 0.8f,
        maxScale = 6f,
        overZoomConfig = OverZoomConfig(1f, 4f)
    )
    
    // 
    Box(modifier = Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectTapGestures(onTap = { isOverlayVisible = !isOverlayVisible })
        }
    ) {
        Zoomable(
            state = state,
            enabled = true,
            dismissGestureEnabled = false,
        ) {
            Image(
                painter = rememberImagePainter(data = "<https://picsum.photos/1200/1800>"),
                contentDescription = null,
                modifier = Modifier.fillMaxSize()
            )
        }

        AnimatedVisibility(visible = isOverlayVisible) {
            Text(text = "Here is my overlay stuff")
        }
    }
}

Do you have an idea what I’m doing wrong?
No matter what I do, either the whole Layout consumes alle touch events or only the Zoomable receives them.

[Michael Bichlmeier]

The only way was to overwrite the Zoomable and add an own single tap action to the library. Otherwise it seems to overwrite the passed Modifier internally.

[Albert Chang]

I see the problem. Will try to come up with a solution when I have time.

[Michael Bichlmeier]

Hey @Albert Chang. I just tried to open a PR for your project to contribute with a possible solution but it seems I don’t have rights for that. As I haven’t contributed to any repository yet you might could help me with that. Are there any settings you have to change or anything I have to do differently?
-> checkout project -> new branch -> commit changes -> push ⚡ -> create PR

[Albert Chang]

You need to fork the repo (so that you can push to it), commit and push the changes and then you can open a PR.