Resize the size of Dialog Fragment in Kotlin

I had tried so many ways but the size of the dialog never changed and I don’t know but sometimes when I clicked outside of the dialog fragment, the dialog fragment doesn’t close I mean in some special places and positions it closes.

here is the class:

class PopupWindowFragment : DialogFragment() {
    lateinit var mPopupWindowBinding: FragmentPopupWindowBinding
    lateinit var mPopupViewModel: PopupViewModel
    var id: Long = 0L
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        mPopupWindowBinding =
            DataBindingUtil.inflate(
                layoutInflater,
                R.layout.fragment_popup_window,
                container,
                false
            )
        return mPopupWindowBinding.root
    }
}

here is the navigation:

<dialog
        android:id="@+id/navigation_dialog_fragment"
        android:name="com.example.holyquran.ui.popupWindow.PopupWindowFragment"
        tools:layout="@layout/fragment_popup_window">

EDIT Here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="viewModel"
type="com.example.holyquran.ui.popupWindow.PopupViewModel" />
<variable
name="userName"
type="com.example.holyquran.data.model.UserInfo" />
<variable
name="loan"
type="com.example.holyquran.data.model.Loan" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20sp"
tools:context=".ui.popupWindow.PopupWindowFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@{userName.fullName}"
android:textColor="@color/black"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.goToIncrease()}"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:gravity="center"
android:textColor="@color/black"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="@string/submit_increase"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="left"
android:src="@drawable/ic_baseline_add_circle_24" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.goToDecrease()}"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:text="@string/submit_decrease"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_baseline_add_circle_24" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.goToLoan()}"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:text="@string/submit_loan"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_baseline_add_circle_24" />
</LinearLayout>
<LinearLayout
android:id="@+id/payPaymentLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.goToPayPayments()}"
android:orientation="horizontal">
<TextView
android:id="@+id/noLoanForUser"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/no_loan_user"
android:textColor="@color/gray600"
android:textSize="14sp"
android:visibility="invisible" />
<TextView
android:id="@+id/payPayment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:text="@string/pay_payment"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_baseline_add_circle_24" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1.5dp"
android:layout_marginTop="10dp"
android:background="@color/gray500" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.goToLoanList()}"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:text="@string/payments_list"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_baseline_format_list_bulleted_24" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.goToUserTransactionHistory()}"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:text="@string/transaction_history"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_baseline_format_list_bulleted_24" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1.5dp"
android:layout_marginTop="10dp"
android:background="@color/gray500" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.goToEditUserInfo()}"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:text="@string/edit_user_info"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_baseline_edit_24" />
</LinearLayout>
<LinearLayout
android:id="@+id/deleteUser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:gravity="right"
android:layoutDirection="ltr"
android:onClick="@{() -> viewModel.deleteUser()}"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:text="@string/delete_user"
android:textColor="@color/black"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_delete2" />
</LinearLayout>
</LinearLayout>
</layout>

I have tried this and even this but NONE of them worked.

Appreciate any Help 🙂

Answer

You can resize the width & height of a DialogFragment by changing the size of the dialog window;

For instance to set a 300dp width & 400dp height:

dialog!!.window!!.setLayout(
300.toPx(requireContext()),
400.toPx(requireContext())

But do this after the dialog layout view is created like in onViewCreated() or onStart(); not in the onCreateView():

class PopupWindowFragment : DialogFragment() {
//..... your rest of code
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
if (dialog != null) dialog!!.window!!.setLayout(
300.toPx(requireContext()),
400.toPx(requireContext())
)
private fun Int.toPx(context: Context): Int =
(this * context.resources.displayMetrics.density).toInt()
}

I want to make the Dialog fragment smaller than what is it now because there isn’t much space between the dialog fragment and the bottom of the phone.

Now you need to know the current width & height of the dialog, and this requires to listen to viewTreeObserver of the dialog.

Add an id to the root ViewGroup of the dialog (LinearLayout): say dialog_root

<LinearLayout 
android:id="@+id/dialog_root"

Then change the height & width within the viewTreeObserver` of the root layout:

class PopupWindowFragment : DialogFragment() {
//..... your rest of code
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
mPopupWindowBinding.dialogRoot.viewTreeObserver.addOnGlobalLayoutListener(object :
ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
rootLayout.viewTreeObserver
.removeOnGlobalLayoutListener(this)
// save default base layout width & height
val height = rootLayout.height.toDp(requireContext())
val width = rootLayout.width.toDp(requireContext())
// change the width & height of the dialog (reduce by 50 dp)
if (dialog != null) dialog!!.window!!.setLayout(
(width - 50).toPx(requireContext()),
(height - 50).toPx(requireContext())
)
}
})
private fun Int.toPx(context: Context): Int =
(this * context.resources.displayMetrics.density).toInt()
fun Int.toDp(context: Context): Int = (this / context.resources.displayMetrics.density).toInt()
}