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)