Challenge: Detail Display : Solution and Question

Hi guys,
After hours and hours of headache i find a solution to this Challenge, but unfortunatelly i still have a problem that i will present at the end, so lets begin:

1- Create a Layout file : “zoom_layout” containig two elements, an ImageView inside of a Linear Layout:

<LinearLayout xmlns:android=“
android:layout_height=“wrap_content” >



2- Create a DialogFragment where we will put the crime image: i called it ZoomDialogFragment.
i follow the same convention of using a companion object newInstance() function, and in this function i pass a photoFileName variable that contain the crime.photoFileName

class ZoomDialogFragment : DialogFragment() {

  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        val view = inflater.inflate(R.layout.zoom_layout, container, false)
         val imageView = view.findViewById( as ImageView 

    return view

companion object {
    fun newInstance(photoFileName: String): ZoomDialogFragment {
        val frag = ZoomDialogFragment()
        val args = Bundle()
        args.putSerializable("PHOTO_URI", photoFileName)
        frag.arguments = args
        return frag


3- In CrimeFragment an ImageView Object, instanciate it in onCreate View, and in onStart() i setOnclickListener to it. in this listener i create a ZoomDialogFragment instance with the crime.photoFileName and i call i…) function

    photoView.setOnClickListener {

        val zoomDialog= ZoomDialogFragment.newInstance(crime.photoFileName),null)


4- we did not finish with ZoomDialogFragment, because we need to display the photo there:

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {

    val view = inflater.inflate(R.layout.zoom_layout, container, false)
    val imageView = view.findViewById( as ImageView

val photoFileName = arguments?.getSerializable(“PHOTO_URI”) as String

imageView.setImageBitmap(BitmapFactory.decodeFile(requireContext().filesDir.path + “/” + photoFileName))

    return view


The final result is shown in this picture:

But as you can see, there is two white bars above and bellow the image, i wonder if there is a way to display just the image!!
Let me know if you find a solution to this

Two things potentially:

  1. Your layouts are set to wrap_content instead of match_parent.

  2. It may be based on the aspect ratio/sizing of your image. Was the picture taken landscape and now you’re trying to display portrait? You’ll need to either stretch the image or zoom & crop. There was code that was scaling the image by taking the smaller of the two dimensions, that may still be in place.

Thank you Jeff for your reply, but infortunatelly i tried your sollutions but nothing happened
1- i set the layout and the ImageView to match_parent but in vain
2- i took another picture in landscape to see if there is any difference but nothing important, just the image height was reduced a little bit (because of the landscape mode)

Here is my solution using AlertDialog as it allow you to set buttons, themes … etc.

1- Create a Layout that contains imageView:

<?xml version="1.0" encoding="utf-8"?>

        tools:srcCompat="@tools:sample/avatars" />

2- Create a PictureDialogFragment that implement DialogFragment

private const val ARG_IMAGE = "image"

class PictureDialogFragment: DialogFragment() {
    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {

        return activity?.let {

            // Use the Builder class for convenient dialog construction
            val builder = AlertDialog.Builder(it)

            //get the layout inflater
            val inflater = requireActivity().layoutInflater

            //get a dialog picture view reference
            // Pass null as the parent view because its going in the dialog layout
            val view = inflater.inflate(R.layout.dialog_picture, null)

            // Inflate and set the layout for the dialog

            //get reference to crimePicture image view
            val crimePicture = view.findViewById( as ImageView

            //get the image file path argument
            val photoFile = arguments?.getSerializable(ARG_IMAGE) as File

            //get the scaled image
            val bitmap = getScaledBitmap(photoFile.path, requireActivity())

            //set the picture in the crimePicture view

            //set the dialog characteristics
                .setNegativeButton(R.string.Dismiss, DialogInterface.OnClickListener{ _, _ -> dialog?.cancel() } )

            // Create the AlertDialog object and return it

        } ?: throw IllegalStateException("Acitivity cannot be null")


    companion object {
        fun newInstance(photoFile: File): PictureDialogFragment {
            val args = Bundle().apply { putSerializable(ARG_IMAGE, photoFile) }

            return PictureDialogFragment().apply { arguments = args }


3- in CrimeFragment, implement setOnClickListener of the photoView

private const val DIALOG_PICTURE = "DialogePicture"

class CrimeFragment: Fragment(), DatePickerFragment.Callbacks, TimePickerFragment.Callbacks {


 override fun onStart() {

            if (photoFile.exists())
                PictureDialogFragment.newInstance(photoFile).apply { show(this@CrimeFragment.parentFragmentManager, DIALOG_PICTURE ) }



This is the result: