Android Dialog Fragment in Kotlin

Alert dialog is a small pop-up window that overlays above an activity or fragment. Alert dialog is used to show any message, warning message, or take prompt for user. Now a days alert dialog is a very much used feature in Android Applications. Android SDK by default provides alert dialogs for developers which is easy to use and works well. But if you want to customize the dialog to make the dialog eye catchy this article is for you.

Alert Dialogs (Default & Custom)

❂ Step-1 : Update your themes.xml or styles.xml file with Dialog Fragment Theme including alert dialog theme.

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <!-- Alert dialog style -->
        <item name="alertDialogTheme">@style/DialogFragmentTheme</item>
    </style>

    <!--    Dialog Style-->
    <style name="DialogFragmentTheme" parent="Theme.MaterialComponents.Dialog">
        <item name="android:alertDialogStyle">@style/DialogFragmentStyle</item>
        <item name="dialogCornerRadius">8dp</item>
        <item name="android:windowSoftInputMode">adjustResize</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="DialogFragmentStyle" parent="Theme.MaterialComponents.Light.Dialog.Alert">
        <item name="android:background">@drawable/shape_dialog_background</item>
    </style>

</resources>

❂ Step-2 : Create dialog background drawable shape_dialog_background.xml which you want to use as dialog fragment background by default.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/dialog_background_color" />

    <corners android:radius="8dp" />

</shape>

❂ Step-3 : Create BaseDialogFragment Class as Dialog Fragment parent class to inherit this to all custom dialog fragments, which will reduce setting dialog theme boiler plate codes every time you create a dialog fragment.

open class BaseDialogFragment : DialogFragment() {

    override fun getTheme(): Int = R.style.DialogFragmentTheme

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog =
        Dialog(requireContext(), theme)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setupView()
    }

    private fun setupView() {
        setStyle(STYLE_NO_TITLE, R.style.DialogFragmentStyle)

        dialog?.window?.setLayout(
            WindowManager.LayoutParams.WRAP_CONTENT,
            WindowManager.LayoutParams.WRAP_CONTENT
        )
    }
}

❂ Step-4 : Design custom Dialog UI. I have given an example below.

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 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="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <LinearLayout
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            app:srcCompat="@drawable/ic_done_circular_green" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="@string/your_comment_has_been_recorded"
            android:textColor="@color/black" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="16dp"
            android:text="@string/thank_you_for_your_valuable_feedback"
            android:textAlignment="center"
            android:textColor="@color/black" />

        <Button
            android:id="@+id/btnSeeCertificate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="24dp"
            android:text="@string/continue_" />

    </LinearLayout>

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

❂ Step-5 : Extend BaseDialogFragment Class to Dialog Fragment to avoid setting theme boiler plate codes.

class CustomDialog : BaseDialogFragment() {

    private lateinit var binding: DialogCustomBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = DialogCustomBinding.inflate(layoutInflater)

        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        setupClickListeners()
    }

    private fun setupClickListeners() {
        binding.btnSeeCertificate.setOnClickListener {
            dismiss()
        }
    }
}

❂ Step-6 : Open Custom Dialog Fragment.

val customDialog = CustomDialog()
customDialog?.show(supportFragmentManager, "TAG")

Nice work!!! If you followed the steps I have shown properly, I hope you have created your own custom Android Dialog successfully. If you have any question feel free to ask. And Constructive feedbacks will be appreciated.