Custom AlertDialog Box is not displaying the layout form above and bottom?

Question

I'm creating the custom alert dialog box for this I create XML design using ConstraintLayout. The problem is that when I display the alert dialog box on the button click it some layout de from above and the bottom is not shown.

Here Is my XML layout.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_500sdp">
    <LinearLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/_16sdp"
        android:layout_marginRight="@dimen/_16sdp"
        android:background="@drawable/dialog_content_bg"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="91dp"
        tools:ignore="MissingConstraints">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/_16sdp"
            android:fontFamily="@font/quicksand_bold"
            android:gravity="center"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_16sdp"
            android:paddingRight="@dimen/_16sdp"
            android:text="Did you collect the amount \nfrom customer ?"
            android:textColor="@color/black"
            android:textSize="@dimen/_16ssp" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="@dimen/_8sdp">

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/_8sdp"
                android:background="@drawable/ic_neg_btn"
                android:text="Cancel"
                android:textColor="@color/white" />
            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_postive_btn"
                android:text="Recieved"
                android:textColor="@color/white" />
        </LinearLayout>
    </LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/appBar"
        app:layout_constraintTop_toTopOf="@+id/appBar">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginBottom="@dimen/_16sdp"
            android:src="@drawable/ic_error_bg" />

        <ImageView
            android:id="@+id/floatbtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginBottom="@dimen/_16sdp"
            android:src="@drawable/ic_error" />
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

And this is the function for displaying a custom alert dialog box.

  btnDeliverOrder?.setOnClickListener {
                if (onGoingOrdersModel?.txtPaymentMode?.equals("COD") == true) {
                    val inflater = requireActivity().layoutInflater
                    val view = inflater.inflate(R.layout.payment_paid_dialog, null)
                    val infoDialogBuilder = AlertDialog.Builder(activity)
                    infoDialogBuilder.setView(view)
                    val infoDialog = infoDialogBuilder.create()

                    infoDialog.setContentView(view)
                    infoDialog.show()
                }else{
                    Toast.makeText(activity , "Paid" , Toast.LENGTH_SHORT).show()
                }
            }

Here I'm attaching the picture that can explain well what problem is occurring. https://firebasestorage.googleapis.com/v0/b/fir-application-8149d.appspot.com/o/WhatsApp%20Image%202022-02-14%20at%207.15.27%20AM.jpeg?alt=media&token=12469be5-b513-455d-99c1-abb5a9c8fe4c

Answer 1

To achieve a fully customised Dialog you have to make a subclass of a Dialog component and inflate your custom xml layout. Below i will describe you the steps of how you can achieve this:

1.Make a custom subclass of Dialog and inflate your custom xml layout like the below example:

class MyDialog : Dialog, View.OnClickListener {

    private lateinit var dialogCL: ConstraintLayout
    private lateinit var buttonOK: Button
    private lateinit var buttonCancel: Button
    private var onClickListener: DialogInterface.OnClickListener? = null

    constructor(context: Context, onClickListener: DialogInterface.OnClickListener?) : this(context, android.R.style.Theme_Light) {
        this.onClickListener = onClickListener
    }

    constructor(context: Context, themeResId: Int) : super(context, themeResId) {}

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //request no Title Dialog
        requestWindowFeature(Window.FEATURE_NO_TITLE)
        //set its ContentView
        setContentView(R.layout.my_dialog)
        //set the window to Full Screen with a Transparent Background
        window?.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT)
        window?.setBackgroundDrawableResource(android.R.color.transparent)
        //set dialog Cancelable
        setCancelable(true)
        //get views
        dialogCL = findViewById(R.id.dialogCL)
        buttonOK = findViewById(R.id.buttonOK)
        buttonCancel = findViewById(R.id.buttonCancel)
        //set click listeners
        dialogCL.setOnClickListener(this)
        buttonOK.setOnClickListener(this)
        buttonCancel.setOnClickListener(this)
    }

    override fun onClick(v: View) {

        //clicked outside
        if(v.id == dialogCL.id){
            dismiss()
        }
        //ok button click
        else if(v.id == buttonOK.id){
            dismiss()
            onClickListener?.onClick(this, DialogInterface.BUTTON_POSITIVE)
        }
        //cancel button click
        else if(v.id == buttonCancel.id){
            dismiss()
            onClickListener?.onClick(this, DialogInterface.BUTTON_NEGATIVE)
        }
    }
}

2.Create your custom xml layout (my_dialog.xml):

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/dialogCL"
    android:background="#B3000000">

    <RelativeLayout
        android:id="@+id/dialogContainerRL"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="@android:color/transparent"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/dialogCardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@android:color/darker_gray"
            app:cardCornerRadius="15dp">

            <LinearLayout
                android:id="@+id/dialogContainerLL"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@android:color/transparent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginTop="70dp"
                    android:text="Did you collect the amount \nfrom customer ?"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:layout_margin="16dp">

                    <Button
                        android:id="@+id/buttonCancel"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="15dp"
                        android:paddingBottom="15dp"
                        android:textAllCaps="true"
                        android:backgroundTint="@android:color/holo_red_dark"
                        android:text="Cancel"
                        android:textColor="@color/white" />

                    <Button
                        android:id="@+id/buttonOK"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="15dp"
                        android:paddingBottom="15dp"
                        android:textAllCaps="true"
                        android:layout_marginStart="10dp"
                        android:backgroundTint="@android:color/holo_green_dark"
                        android:text="Received"
                        android:textColor="@color/white" />

                </LinearLayout>

            </LinearLayout>

        </com.google.android.material.card.MaterialCardView>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:layout_constraintTop_toTopOf="@+id/dialogContainerRL"
        app:layout_constraintBottom_toTopOf="@+id/dialogContainerRL"
        app:layout_constraintStart_toStartOf="@+id/dialogContainerRL"
        app:layout_constraintEnd_toEndOf="@+id/dialogContainerRL">

        <ImageView
            android:id="@+id/floatButton"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerInParent="true"
            android:background="@android:color/holo_red_dark"
            android:src="@android:drawable/ic_dialog_alert" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

3.Finally you can show the above custom Dialog like this:

MyDialog(this, DialogInterface.OnClickListener { dialog, which ->
        when (which) {
            DialogInterface.BUTTON_POSITIVE -> {

            }
            DialogInterface.BUTTON_NEGATIVE -> {

            }
        }
}).show()

And the result will be: