Selain dapat menggantikan peran activity sebagai UI, fragment juga dapat digunakan sebagai form dialog.
Langkah Kerjanya adalah sebagai berikut.
- Buat kembali satu kelas fragment dengan nama OptionDialogFragment
- Ketika pada file fragment_option_dialog.xml kondisikan kodenya menjadi seperti berikut:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".OpenDialogFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="@string/pertanyaan" />
<RadioGroup
android:id="@+id/rg_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="@+id/rb_br"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="@string/brendan_rodgers" />
<RadioButton
android:id="@+id/rb_poc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="@string/mouricio_pochettino" />
<RadioButton
android:id="@+id/rb_rang"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="@string/ralf_rangnick" />
<RadioButton
android:id="@+id/rb_hag"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="@string/erik_ten_hag" />
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn_close"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_weight="0.5"
android:text="@string/tutup" />
<Button
android:id="@+id/btn_choose"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_weight="0.5"
android:text="@string/pilih" />
</LinearLayout>
</LinearLayout>- Setelah selesai dengan berkas layout xml, lanjutkan ngoding untuk OptionDialogFragment. Pertama, kenalkan obyek yang ada di dalam layout seperti ini:
private lateinit var btnChoose: Button
private lateinit var btnClose: Button
private lateinit var rgOptions: RadioGroup
private lateinit var rbBr: RadioButton
private lateinit var rbPoc: RadioButton
private lateinit var rbRang: RadioButton
private lateinit var rbHag: RadioButton
private var optionDialogListener: OnOptionDialogListener? = null
...
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
btnChoose = view.findViewById(R.id.btn_choose)
btnClose = view.findViewById(R.id.btn_close)
rgOptions = view.findViewById(R.id.rg_options)
rbBr = view.findViewById(R.id.rb_br)
rbPoc = view.findViewById(R.id.rb_poc)
rbRang = view.findViewById(R.id.rb_rang)
rbHag = view.findViewById(R.id.rb_hag)
}Selanjutnya kita beri aksi untuk button-nya dan beri pula kelas interface dan ubah turunannya dari Fragment menjadi DialogFragment.
class OptionDialogFragment : DialogFragment(){
...
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
...
btnChoose.setOnClickListener {
val checkedRadioButtonId = rgOptions.checkedRadioButtonId
if (checkedRadioButtonId != -1) {
var coach: String? = null
when (checkedRadioButtonId) {
R.id.rb_br -> coach = rbBr.text.toString().trim()
R.id.rb_poc -> coach = rbPoc.text.toString().trim()
R.id.rb_rang -> coach = rbRang.text.toString().trim()
R.id.rb_hag -> coach = rbHag.toString().trim()
}
optionDialogListener?.onOptionChosen(coach)
dialog?.dismiss()
}
}
btnClose.setOnClickListener {
dialog?.cancel()
}
}
interface OnOptionDialogListener {
fun onOptionChosen(text: String?)
}
}Kemudian tambahkan kode berikut untuk mengelola optionDialogListenerketika fragment dipanggil dan dimatikan:
override fun onAttach(context: Context) {
super.onAttach(context)
val fragment = parentFragment
if (fragment is DetailCategoryFragment) {
this.optionDialogListener = fragment.optionDialogListener
}
}
override fun onDetach() {
super.onDetach()
this.optionDialogListener = null
}Sehingga seluruh kode pada OptionDialogFragment menjadi sebagai berikut:
class OptionDialogFragment : DialogFragment(){
private lateinit var btnChoose: Button
private lateinit var btnClose: Button
private lateinit var rgOptions: RadioGroup
private lateinit var rbBr: RadioButton
private lateinit var rbPoc: RadioButton
private lateinit var rbRang: RadioButton
private lateinit var rbHag: RadioButton
private var optionDialogListener: OnOptionDialogListener? = null
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_option_dialog, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
btnChoose = view.findViewById(R.id.btn_choose)
btnClose = view.findViewById(R.id.btn_close)
rgOptions = view.findViewById(R.id.rg_options)
rbBr = view.findViewById(R.id.rb_br)
rbPoc = view.findViewById(R.id.rb_poc)
rbRang = view.findViewById(R.id.rb_rang)
rbHag = view.findViewById(R.id.rb_hag)
btnChoose.setOnClickListener {
val checkedRadioButtonId = rgOptions.checkedRadioButtonId
if (checkedRadioButtonId != -1) {
var coach: String? = null
when (checkedRadioButtonId) {
R.id.rb_br -> coach = rbBr.text.toString().trim()
R.id.rb_poc -> coach = rbPoc.text.toString().trim()
R.id.rb_rang -> coach = rbRang.text.toString().trim()
R.id.rb_hag -> coach = rbHag.toString().trim()
}
optionDialogListener?.onOptionChosen(coach)
dialog?.dismiss()
}
}
btnClose.setOnClickListener {
dialog?.cancel()
}
}
override fun onAttach(context: Context) {
super.onAttach(context)
val fragment = parentFragment
if (fragment is DetailCategoryFragment) {
this.optionDialogListener = fragment.optionDialogListener
}
}
override fun onDetach() {
super.onDetach()
this.optionDialogListener = null
}
interface OnOptionDialogListener {
fun onOptionChosen(text: String?)
}
}Ingat, jangan lupa untuk menambahkan inherit ke kelas DialogFragment.
- Tambahkan Objek btnShowDialog dan method onViewCreated pada DetailCategoryFragment sehingga menjadi sebagai berikut:
class DetailCategoryFragment : Fragment() {
lateinit var btnShowDialog: Button
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_detail_category, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
btnShowDialog = view.findViewById(R.id.btn_show_dialog)
}
}- Tambahkan beberapa baris pada metode onViewCreated di DetailCategoryFragment, sehingga menjadi sebagai berikut:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
...
btnShowDialog.setOnClickListener{
val mOptionDialogFragment = OptionDialogFragment()
val mFragmentManager = childFragmentManager
mOptionDialogFragment.show(mFragmentManager, OptionDialogFragment::class.java.simpleName)
}
}- Kemudian tambahkan OptionDialogFragment pada DetailCategoryFragment seperti berikut:
class DetailCategoryFragment : Fragment(), View.OnClickListener {
...
internal var optionDialogListener: OptionDialogFragment.OnOptionDialogListener = object : OptionDialogFragment.OnOptionDialogListener {
override fun onOptionChosen(text: String?) {
Toast.makeText(activity, text, Toast.LENGTH_SHORT).show()
}
}
}- Sehingga kode DetailCategoryFragment kita saat ini menjadi seperti ini:
class DetailCategoryFragment : Fragment() {
lateinit var btnShowDialog: Button
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_detail_category, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
btnShowDialog = view.findViewById(R.id.btn_show_dialog)
btnShowDialog.setOnClickListener{
val mOptionDialogFragment = OptionDialogFragment()
val mFragmentManager = childFragmentManager
mOptionDialogFragment.show(mFragmentManager, OptionDialogFragment::class.java.simpleName)
}
}
internal var optionDialogListener: OptionDialogFragment.OnOptionDialogListener = object : OptionDialogFragment.OnOptionDialogListener {
override fun onOptionChosen(text: String?) {
Toast.makeText(activity, "Anda Memilih : " +text, Toast.LENGTH_SHORT).show()
}
}
}- Sekarang jalankan kembali aplikasi dan klik pada tombol Tampilkan sebuah dialog. Hasilnya akan muncul obyek OptionDialogFragment yang baru saja dibuat. Coba Anda pilih salah satu option yang ada dan klik tombol Pilih. Lihat, hasil dari yang kita pilih, tampil dalam bentuk soft message (Toast).
 |  |