Material 3 Dialogs 

Overview

Dialogs are modal windows that interrupt app flow to provide critical information or prompt decisions.

Material 3 Dialogs, using MaterialAlertDialogBuilder for Basic dialogs and DialogFragment for Full-screen dialogs, support two variants: Basic (compact prompts) and Full-screen (complex tasks). They disable app functionality until dismissed or acted upon. This guide covers implementation, accessibility, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use MaterialAlertDialogBuilder for Basic dialogs
• Use DialogFragment for Full-screen dialogs
• Apply Theme.Material3.* for styling

Accessibility

• Set android:contentDescription on icons for TalkBack
• Ensure buttons and interactive elements are focusable
• Use descriptive titles for clear announcements

Behavior and Configuration

• Configure with setTitle, setMessage, setView
• Add buttons with setPositiveButton, setNegativeButton, setNeutralButton
• Handle interactions with button listeners

      
val dialog = MaterialAlertDialogBuilder(context)
    .setTitle("Confirm Action")
    .setMessage("Are you sure you want to proceed?")
    .setPositiveButton("OK") { _, _ -> /* Handle OK */ }
    .setNegativeButton("Cancel") { _, _ -> /* Handle Cancel */ }
    .show()
      
    

Dialog Variants

• Basic: Compact prompts for simple decisions
• Full-screen: Full-screen for complex tasks

Basic Dialog

• Compact, for alerts or simple confirmations
• Supports up to three buttons and custom content

Example

      
val dialog = MaterialAlertDialogBuilder(context)
    .setTitle(R.string.dialog_title)
    .setMessage(R.string.dialog_message)
    .setIcon(R.drawable.ic_info_24)
    .setIconAttribute(android.R.attr.alertDialogIcon)
    .setNeutralButton(R.string.cancel) { _, _ -> /* Handle cancel */ }
    .setNegativeButton(R.string.decline) { _, _ -> /* Handle decline */ }
    .setPositiveButton(R.string.accept) { _, _ -> /* Handle accept */ }
    .show()
      
    

Basic Dialog Anatomy

Component	Description	Behavior
Container	Modal window, rounded, colorSurfaceContainerHigh	Centers content, 24dp inset
Headline	Optional title, colorOnSurface	Describes task, top-aligned
Icon	Optional, colorSecondary	Enhances context, above headline
Supporting Text	Optional, colorOnSurfaceVariant	Provides details, below headline
Buttons	Up to three (neutral, negative, positive)	Triggers actions, bottom-aligned
Scrim	Dims background, 32% opacity	Blocks app interaction

Full-screen Dialog

• Fills screen for complex tasks like forms
• Custom content with close affordance

Example

      
class FullScreenDialog : DialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fullscreen_dialog, container, false)
        val closeButton = view.findViewById<Button>(R.id.close_button)
        closeButton.setOnClickListener {
            dismiss()
        }
        return view
    }
    override fun onStart() {
        super.onStart()
        dialog?.window?.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
    }
}
// In Activity
val dialog = FullScreenDialog()
dialog.show(supportFragmentManager, "FULL_SCREEN_DIALOG")
      
    

      
<!-- res/layout/fullscreen_dialog.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fullscreen_title"
        android:textAppearance="?attr/textAppearanceHeadlineSmall"
        android:contentDescription="@string/fullscreen_title_desc"/>
    <!-- Add custom content, e.g., form fields -->
    <Button
        android:id="@+id/close_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/close"
        android:contentDescription="@string/close_desc"/>
</LinearLayout>
      
    

Full-screen Dialog Anatomy

Component	Description	Behavior
Container	Full-screen, custom layout	Fills screen, holds content
Header	Title, colorOnSurface	Describes task, top-aligned
Icon	Close affordance, colorSecondary	Triggers dismiss, top-right
Content	Custom views, e.g., forms	User-defined interaction
Divider	Optional, separates sections	Visible if set

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Container	app:backgroundTint	N/A	?attr/colorSurfaceContainerHigh	Sets dialog background color
Container	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerExtraLarge	Sets dialog corner shape
Container	app:backgroundInsetStart, app:backgroundInsetEnd	setBackgroundInsetStart, setBackgroundInsetEnd	24dp	Sets horizontal insets
Container	app:backgroundInsetTop, app:backgroundInsetBottom	setBackgroundInsetTop, setBackgroundInsetBottom	80dp	Sets vertical insets
Title	N/A	setTitle, setCustomTitle	null	Sets dialog title
Icon	N/A	setIcon, setIconAttribute	null	Sets title icon
Supporting Text	N/A	setMessage	null	Sets dialog message
Buttons	N/A	setPositiveButton, setNegativeButton, setNeutralButton	null	Sets action buttons
Scrim	android:backgroundDimAmount	N/A	32%	Sets background dim opacity

Theming Dialogs

• Customize color, typography, and shape
• Use res/values/styles.xml or programmatic theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorSurface">@color/shrine_pink_light</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="materialAlertDialogTheme">@style/ThemeOverlay.App.MaterialAlertDialog</item>
</style>
<style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorSurface">@color/shrine_pink_light</item>
    <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
    <item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.App.Title.Text</item>
    <item name="buttonBarPositiveButtonStyle">@style/Widget.App.Button</item>
    <item name="buttonBarNegativeButtonStyle">@style/Widget.App.Button</item>
</style>
<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.Material3">
    <item name="shapeAppearance">@style/ShapeAppearance.App.MediumComponent</item>
</style>
<style name="MaterialAlertDialog.App.Title.Text" parent="MaterialAlertDialog.Material3.Title.Text">
    <item name="android:textColor">@color/shrine_pink_900</item>
</style>
<style name="Widget.App.Button" parent="Widget.Material3.Button.TextButton.Dialog">
    <item name="android:textColor">@color/shrine_pink_900</item>
</style>
<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.Material3.MediumComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">8dp</item>
</style>
      
    

      
val dialog = MaterialAlertDialogBuilder(context, R.style.ThemeOverlay_App_MaterialAlertDialog)
    .setTitle("Custom Dialog")
    .setMessage("This is a themed dialog.")
    .setPositiveButton("OK") { _, _ -> /* Handle OK */ }
    .show()
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Dialogs
• Covers design, behavior, theming specifications
• Includes accessibility and custom content support
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Dialogs?

• Modal windows for critical information or decisions

---

How many dialog variants are there?

• Two variants: Basic and Full-screen

---

When to use a Full-screen Dialog?

• Use for complex tasks like forms or multi-step processes

---

How to make dialogs accessible?

• Set content descriptions; ensure focusable elements

---

Can I customize dialog appearance?

• Yes, theme via res/values/styles.xml or code

---

How to add the Material 3 library?

• Include Material Components for Android library

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for Dialogs