Android BottomSheet Dialog with BottomSheetDialogFragment

In the previous chapter we covered create a BottomSheetDialog with BottomSheetDialog() class. Suppose we have multiple screens which need to show the same UI as Bottomsheet, we need to write the same code on each of the screen to display and handle the events of the BottomSheetDialog. This will increase the code size and rework on each page. To avoid this duplicate code and rework put all that code inside and fragment and show that ui as Dialog. To implement the same way we have other class in Material Design called BottomSheetDialog Fragment.

What is a BottomSheetDialog Fragment

It is Modal bottom sheet. This is a version of androidx.fragment.app.DialogFragment that shows a bottom sheet using BottomSheetDialog instead of a floating dialog.

Let impement this with BottomSheetDialog Fragment, with the previous example create a new Fragment. We have default template to create a Model BottomSheet Dialog, but at present we just create a simple Blank Fragment and set previous layout file as view

So our Fragment will be look like below

class BottomSheetFragment : Fragment() {
    // TODO: Rename and change types of parameters
    private var param1: String? = null
    private var param2: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            param1 = it.getString(ARG_PARAM1)
            param2 = it.getString(ARG_PARAM2)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.dialog_layout, container, false)
    }

    companion object {
        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         *
         * @param param1 Parameter 1.
         * @param param2 Parameter 2.
         * @return A new instance of fragment BottomSheetFragment.
         */
        // TODO: Rename and change types and number of parameters
        @JvmStatic
        fun newInstance(param1: String, param2: String) =
            BottomSheetFragment().apply {
                arguments = Bundle().apply {
                    putString(ARG_PARAM1, param1)
                    putString(ARG_PARAM2, param2)
                }
            }
    }
}

 

Above class is just a simple fragment to show this as BottomSheetDialog we need to extend this with BottomSheetDialogFragment class.

class BottomSheetFragment : BottomSheetDialogFragment() {

}

 

Now navigate to activity class and add below code to display this fragment

button.setOnClickListener {

    val bottomSheetDialogFragment=BottomSheetFragment()
    bottomSheetDialogFragment.show(supportFragmentManager,bottomSheetDialogFragment.tag)

}

 

Now run the application and display BottomSheetDialog on button click

Android BottomSheet dialog using BottomSheetDialogFragment Kotlin and Java

 

To dismiss the DialogFragment we just call the dismiss() on fragment dialog instance.

dialog!!.dismiss()

 

Complete code for BottomSheetDialog with BottomSheetDialogFragment class


class BottomSheetFragment : BottomSheetDialogFragment() {
    // TODO: Rename and change types of parameters
    private var param1: String? = null
    private var param2: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            param1 = it.getString(ARG_PARAM1)
            param2 = it.getString(ARG_PARAM2)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.dialog_layout, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val lnr_edit= requireView().findViewById<View>(R.id.lnr_edit)
        val lnr_pay=requireView().findViewById<View>(R.id.lnr_pay)
        val lnr_cancel=requireView().findViewById<View>(R.id.lnr_cancel)
        lnr_edit!!.setOnClickListener {
            dialog!!.dismiss()
            Toast.makeText(activity,"Clicked on Edit", Toast.LENGTH_SHORT).show()
        }
        lnr_pay!!.setOnClickListener {

            Toast.makeText(activity,"Clicked on Pay", Toast.LENGTH_SHORT).show()
        }
        lnr_cancel!!.setOnClickListener {
            Toast.makeText(activity,"Clicked on Cancel", Toast.LENGTH_SHORT).show()
        }
    }

    companion object {
        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         *
         * @param param1 Parameter 1.
         * @param param2 Parameter 2.
         * @return A new instance of fragment BottomSheetFragment.
         */
        // TODO: Rename and change types and number of parameters
        @JvmStatic
        fun newInstance(param1: String, param2: String) =
            BottomSheetFragment().apply {
                arguments = Bundle().apply {
                    putString(ARG_PARAM1, param1)
                    putString(ARG_PARAM2, param2)
                }
            }
    }
}

 

Projects By category
Categories