Picutre doesn't appears in the alert dialog box

Question

I am using PhotoView to implement Pinch to Zoom feature. Fortunately enough, my app is able to fetch the picture from the given uri, but when it comes to display it, it only shows a transparent box.

image_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/zoom_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Kotlin code to achieve the functionality:

 ... 
   binding.image.setOnClickListener(){
       ImageLayoutDialog()
   }
 ...
 ...
 ...
 private fun ImageLayoutDialog() {
        val imageLayoutBinding =
            ImageLayoutBinding.inflate(LayoutInflater.from(requireContext()))
        val photoView: PhotoView = imageDialogBinding.zoomIv
        val mBuilder = AlertDialog.Builder(requireContext())
            .setView(
                imageLayoutBinding .root
            )

        Glide.with(requireActivity())
            .load(customUri)
            .into(photoView)
        val mAlertDialog : AlertDialog =  mBuilder.create()
        mAlertDialog.show()
        mAlertDialog.setCanceledOnTouchOutside(false)
    }

When I click on image I get a transparent screen. But I am expecting the contents of customUri there. Any solution to this?

EDIT 1.0

Now the dialog box loads up. But it doesn't shows the image, after setting the view.

Can you please include the code for fetching the `Uri`? Also, have you tried displaying the image in a `Fragment` or `Activity` rather than an `AlertDialog`? — Gavin Wright, Oct 26 '21 at 20:05
Are you setting the `View` on the `AlertDialog` somewhere before you show it; e.g., `mBuilder.setView(imageLayoutBinding.root)`? I would also point out that the `PhotoView` IDs don't quite match up, but that could just be in the post here: `zoom_iv` in the layout, but `zoom` in the code. — Mike M., Oct 26 '21 at 20:27
@Gavin Wrigth I am trying to display it on a fragment. The `uri` is nothing but a link from Firebase — Abhishek Dutt, Oct 27 '21 at 02:24
Well, you still need to do that, 'cause it doesn't happen automatically, even with the binding stuff. If you do that and it still doesn't work, then there's possibly other issues as well, but the question should be updated with that code, and maybe a description of what exactly happens with that, if it's any different. — Mike M., Oct 27 '21 at 04:06
I have edited the code. One question, so I have to set the view first, right? — Abhishek Dutt, Oct 27 '21 at 05:46
It shouldn't really matter, as far as the image loading goes, but I could see how it's possible that the image loading later might cause the `View`s to not re-layout correctly. You might try setting definite measures on your `View`s temporarily, in lieu of `match_parent`, to check that. You might also see what happens with a placeholder image; try to narrow down where it's failing. — Mike M., Oct 27 '21 at 19:19

score 1 · Answer 1 · answered Oct 26 '21 at 21:14

In this case I would recommend you to use other type of Dialogs. Like a DialogFragment, or an AppCompatDialog.

Solution using an AppCompatDialog (which I think will be the most similar to your need):

class ImageDialog (private var context: Context, private var yourUri: Uri) : AppCompatDialog(context) {

private var _binding: DialogBinding? = null
private val binding get() = _binding!!

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

   val layoutInflater = LayoutInflater.from(context)
    _binding = DialogBinding.inflate(layoutInflater)

    setContentView(binding.root)

   //here you can load your Uri with Glide.

}

}

Instantiating the AppCompatDialog:

val imageDialog = ImageDialog(requireContext(), yourUri)
                    imageDialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
                    imageDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
                    navigateToChangeUserAddressDialog.show()

I know is not an alert dialog, but I am trying to find a solution :D

You can always add personalized buttons to that dialog to dismiss it once its clicked with a imageDialog.cancel(), or you can also pass a lambda if you want to execute some logic in the view once its clicked.

Picutre doesn't appears in the alert dialog box

1 Answers1