How to create a Custom Dialog box in android? - Android Material UI/UX

Let us create a Custom Privacy Policy Dialog box in Android using a View binding. Use this syntax for a 100% crash-free custom dialog solution & create your own customized dialog box.

No 3rd party plugin is required.

Step 1

Need to add a view binding in app-level Gradle (by default it will be added while you create a new project)

 buildFeatures {
        viewBinding true
    }

Step 2

Making the Custom Dialog Layout - UI Design (add your own assets)

Go to res > layout and create the Custom Dialog UI design layout (dialog_privacy_policy.xml):

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="8dp"
    app:cardElevation="3dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:orientation="horizontal">
            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="1" />
            <ImageButton
                android:id="@+id/bt_close"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                app:srcCompat="@drawable/ic_baseline_close_24"
                app:tint="@color/md_theme_light_primary" />
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/grey_5" />
        <View
            android:layout_width="0dp"
            android:layout_height="20dp" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="@dimen/spacing_mlarge">
            <ImageView
                android:id="@+id/image"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/intro_1"
              />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/spacing_large"
                android:text="@string/app_name"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textColor="@color/grey_80"
                android:textStyle="bold" />
            <TextView
                android:layout_gravity="start"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/privacy_policy_privacy"
                android:contentDescription="@string/privacy_policy_privacy"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="@color/grey_40" />
            <View
                android:layout_width="0dp"
                android:layout_height="@dimen/spacing_small" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="@dimen/spacing_middle">
            <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
                android:text="Accept"
                android:contentDescription="Accept"
                android:letterSpacing=".2"
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/submitBtnCheck"
                android:layout_gravity="center|bottom"
                app:rippleColor="@color/white"
                android:minWidth="0dp"
                android:minHeight="0dp"
                style="@style/ThemeOverlay.Material3.Button.TextButton"
                app:backgroundTint="@color/md_theme_light_primary"
                app:iconTint="@color/white"
                android:textColor="@color/white"
                />
        </LinearLayout>
    </LinearLayout>
</androidx.cardview.widget.CardView>

Step 3

Create a Fragment page in the java folder with a custom dialog box (Steps 1 to 3)

package com.shopping.cart.ui

import android.app.Dialog
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.Window
import androidx.fragment.app.Fragment
import com.shopping.cart.databinding.DialogPrivacyPolicyBinding
import com.shopping.cart.databinding.FragmentProductsBinding
import dagger.hilt.android.AndroidEntryPoint


@AndroidEntryPoint
class ProductsFragment : Fragment() {

    // Step 3A
    var dialog: Dialog? = null

    private var _binding: FragmentProductsBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {

        _binding = FragmentProductsBinding.inflate(inflater, container, false)

        // Step 3B : inside onCreateView : dialog box using view model
        if (dialog != null) {
            dialog!!.dismiss()
        }
        dialog = Dialog(requireContext())
        dialog!!.requestWindowFeature(Window.FEATURE_NO_TITLE)
        val bind: DialogPrivacyPolicyBinding = DialogPrivacyPolicyBinding.inflate(layoutInflater)
        dialog!!.setContentView(bind.root)
        dialog!!.window!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
        dialog!!.setCancelable(true)
        bind.btClose.setOnClickListener { dialog!!.dismiss() }
        dialog!!.show()

        return binding.root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null

        // Step 3C : inside onDestroyView :  to avoid memory leak
        if(dialog != null){
            dialog!!.dismiss()
        }
    }
}

..

Step 4

res/ value/ String.xml

<string name="privacy_policy_privacy">By clicking \"Accept\", you agree to the <a href="https://www.boltuix.com/"><font color='blue'>Terms of Use</font></a> and <a href="https://www.boltuix.com/"><font color='blue'>Privacy Policy</font></a>
    </string>

..

Basic Material Dialog

 MaterialAlertDialogBuilder(context)
                            .setTitle("Material Design 3")//resources.getString(R.string.title)
                            .setMessage("Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.")
                            .setNeutralButton("Cancel") { dialog, which ->
                            }
                            .setNegativeButton("Decline") { dialog, which ->
                                // Respond to negative button press
                            }
                            .setPositiveButton("Accept") { dialog, which ->
                                // Respond to positive button press
                                //   findNavController().navigate(R.id.action_nav_components_list_to_fullScreenDialogFragment)
                            }
                            .show()

..