How to tap to zoom an image like in instagram? Kotlin

Question

I am trying to get a similar functionality to Instagram, when you tap or pinch on an image, and now the image covers the screen above all the other views, like this

I have a Fragment with 3 images within a Constraint Layout, and I use a Navigation component. These images should be zoomed in when someone taps on them, like focusing on the image.

At first, I tried using other fragments to simulate this. My approach was to use buttons, then when you tap the button, it navigates to another fragment with the image on a bigger scale. However, due to the things I'm doing with the fragment, this method does not work because it resets the rest of the information when navigating through fragments.

Then, I tried to use PhotoView, but due to the need to make the layout responsive, it doesn't work, because the image can only be zoomed within the constraints set like this:

  <com.github.chrisbanes.photoview.PhotoView
                     android:id="@+id/img_contenido"
                     android:layout_width="match_parent"
                     android:layout_height="0dp"
                     android:layout_marginTop="50dp"
                     android:src="@drawable/a_img3_entidad"
                     app:layout_constraintBottom_toTopOf="@id/txt_contenido2"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintHeight_percent="0.06"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@id/txt_contenido" />

The constraints Normal Zoomed in

So that is useless to me because I need the images to take basically over the screen.

I then tried ZoomHelper, but since I am using a fragment with a navigation Component, I have no clue how to implement it properly.

I also came across this zoom_pinch_overlay package which does precisely what I need, but I am a complete stranger to Flutter, and I suppose I cannot use it in any way with my app

What is the best way to do it, or which approach should I try to figure out?

Answer 1

I finally found what I need through StfalconImageViewer

Just in case anyone ever has a similar situation with ViewBinding and Fragments, to implement it with a single image to test, i did it this way:

//Set up StfalconImageViewer when the image is clicked
            binding.imgNota.setOnClickListener {
                showImageWithStfalconViewer()
            }

And the method:

private fun showImageWithStfalconViewer() {
        // Replace 'R.drawable.img' with the actual drawable resource ID or image URL
        val imageUrl = R.drawable.img
        val images = listOf(imageUrl)

        val builder = StfalconImageViewer.Builder<Int>(requireContext(), images) { view, image ->
            // Load the image directly into the ImageView
            view.setImageResource(image)
        }

        // Optional set a transparent background color
        builder.withBackgroundColor(Color.TRANSPARENT)
            .allowSwipeToDismiss(true) // Allow dismissing by clicking outside the image
            .show()
    }