Resize the size of Dialog Fragment in Kotlin

Question

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 1

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()

}