Custom dialog using dialog fragments

Dialog fragment is a fragment that displays a dialog window, floating on top of its activity’s window. This fragment contains a Dialog object, which it displays as appropriate based on the fragment’s state. Control of the dialog (deciding when to show, hide, dismiss it) should be done through the API here, not with direct calls on the dialog.

Example for dialog is to show logout confirmation dialog

First we create our dialog class that extend DialogFragment

class MessageDialog() : DialogFragment() {
}

TO make your dialog wrap content or match parent it’s better for dialog fragments to do it programmatically

override fun onStart() {
    super.onStart()
    dialog?.window?.setLayout(WindowManager.LayoutParams.MATCH_PARENT,
            WindowManager.LayoutParams.WRAP_CONTENT);
}

you should use your own style to remove the title and set background color

create the style in styles.xml file

<style name="custom_dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowCloseOnTouchOutside">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:background">@android:color/transparent</item>
</style>

and set the style to the dialog fragment in oncreate method

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setStyle(DialogFragment.STYLE_NORMAL, R.style.custom_dialog);
}

now lets create our custom layout file

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content"
    android:layout_gravity="center"
    android:background="@color/transparent">

    <androidx.cardview.widget.CardView
        android:id="@+id/dialog_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@color/white_black"
        app:cardCornerRadius="8dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="8dp">
            <!-- put your view here-->
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</FrameLayout>

note that we used frame layout to have margins from screen and used card view to have shadow and inside card view we will put or views

now set the layout file in onCreateView

final override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
): View? {
    dialog?.window?.requestFeature(Window.FEATURE_NO_TITLE);
    return inflate(R.layout.my_custom_layout,container,inflater,context)
}

now initialize your views and click listeners in onViewCreated

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
//if you were setting arguments
    //firstNonNull(savedInstanceState,arguments)?.let { 
//initData(it)
 //}
    initViewModel()
    
    //initViews()
}