Dialogs

Dialogs

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Design & API documentation

• Material Design guidelines: Dialogs
• Class: MDCDialogTransitionController
• Class: MDCAlertAction
• Class: MDCAlertController
• Class: MDCAlertControllerView
• Class: MDCDialogPresentationController
• Protocol: MDCDialogPresentationControllerDelegate
• Enumeration: Enumerations
• Enumeration: MDCActionEmphasis

Table of contents

• Overview
  • Presentation and transition controller
  • Alert controller
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Typical use: modal dialog
  • Typical use: alert
• Extensions
  • Theming Extensions
  • Theming Actions
  • Using a Themer
• Accessibility
  • MDCPresentationController Accessibility

---

Overview

To display a modal using MaterialDialogs you set two properties on the view controller to be presented. Set modalPresentationStyle to UIModalPresentationCustom and set transitioningDelegate to and instance of MDCDialogTransitionController. Then you present the view controller from the root controller to display it as a modal dialog.

Presentation and transition controller

Presenting dialogs uses two classes: MDCDialogPresentationController and MDCDialogTransitionController. These allow the presentation of view controllers in a material specificed manner. MDCDialogPresentationController is a subclass of UIPresentationController that observes the presented view controller for preferred content size. MDCDialogTransitionController implements UIViewControllerAnimatedTransitioning and UIViewControllerTransitioningDelegate to vend the presentation controller during the transition.

Alert controller

MDCAlertController provides a simple interface for developers to present a modal dialog according to the Material spec.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/Dialogs'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialDialogs

Objective-C

#import "MaterialDialogs.h"

Usage

Typical use: modal dialog

Swift

// The following is called from the presenting view controller and has the
// following variable defined to keep a reference to the transition
// controller.
strong var dialogTransitionController: MDCDialogTransitionController

// To present the dialog myDialogViewController
dialogTransitionController = MDCDialogTransitionController()
myDialogViewController.modalPresentationStyle = .custom
myDialogViewController.transitioningDelegate = dialogTransitionController

present(myDialogViewController, animated: true, completion:...)

Objective-C

// self is the presenting view controller and which has the following property
// defined to keep a reference to the transition controller.
@property(nonatomic) MDCDialogTransitionController *dialogTransitionController;

// To present the dialog myDialogViewController
self.dialogTransitionController = [[MDCDialogTransitionController alloc] init];
myDialogViewController.modalPresentationStyle = UIModalPresentationCustom;
myDialogViewController.transitioningDelegate = self.dialogTransitionController;
[self presentViewController:myDialogViewController animated:YES completion:...];

Typical use: alert

Swift

// Present a modal alert
let alertController = MDCAlertController(title: titleString, message: messageString)
let action = MDCAlertAction(title:"OK") { (action) in print("OK") }
alertController.addAction(action)

present(alertController, animated:true, completion:...)

Objective-C

// Present a modal alert
MDCAlertController *alertController =
[MDCAlertController alertControllerWithTitle:titleString
                                     message:messageString];

MDCAlertAction *alertAction =
    [MDCAlertAction actionWithTitle:@"OK"
                            handler:^(MDCAlertAction *action) {
       NSLog(@"OK");
    }];

[alertController addAction:alertAction];

[self presentViewController:alertController animated:YES completion:...];

Extensions

Theming Extensions

You can theme an MDCDialog to match the Material Design Dialog using your app's scheme and the Dialogs theming extension. To add the theming extension to your project add the following line to your Podfile:

pod 'MaterialComponents/Dialogs+Theming'

Then import the theming extension and the MDCContainerScheme and create an MDCContainerScheme instance. A container scheme defines the design parameters that you can use to theme your dialogs. Finally, call the appropriate method on the theming extension.

Swift

// Step 1: Import the Dialog theming extension and container scheme
import MaterialComponents.MaterialDialogs_Theming
import MaterialComponents.MaterialContainerScheme

// Step 2: Create or get a container scheme
let containerScheme = MDCContainerScheme()

// Step 3: Apply the container scheme to your component using the desired alert style
alertController.applyTheme(withScheme: containerScheme)

Objective-C

// Step 1: Import the Dialog theming extension and container scheme
#import "MaterialDialogs+Theming.h"
#import "MaterialContainerScheme.h"

// Step 2: Create or get a container scheme
MDCContainerScheme *containerScheme = [[MDCContainerScheme alloc] init];

// Step 3: Apply the container scheme to your component using the desired alert style
[alertController applyThemeWithScheme:containerScheme];

Theming Actions

Actions in MDCAlertController have emphasis which affects how the Dialog's buttons will be themed. High, Medium and low emphasis are supported.

Swift

  // Create or reuse a Container scheme
  let scheme = MDCContainerScheme()

  // Create an Alert dialog
  let alert = MDCAlertController(title: "Button Theming", message: "Add item to cart?")

  // Add actions with emphases that will generate buttons with the desired appearance. 
  // An example of a high and a medium emphasis actions:
  alert.addAction(MDCAlertAction(title:"Add Item", emphasis: .high, handler: handler))
  alert.addAction(MDCAlertAction(title:"Cancel", emphasis: .medium, handler: handler))

  // Make sure to apply theming after all actions are added, so they are themed too!
  alert.applyTheme(withScheme: scheme)

  // present the alert
  present(alertController, animated:true, completion:nil)

Objective-C

  // Create or reuse a Container scheme
  MDCContainerScheme *scheme = [[MDCContainerScheme alloc] init];

  // Create an Alert dialog
  MDCAlertController *alert = 
      [MDCAlertController alertControllerWithTitle:@"Button Theming" message:@"Add item to cart?"];

  // Add actions with different emphasis, creating buttons with different themes.
  MDCAlertAction *primaryAction = [MDCAlertAction actionWithTitle:@"Add Item"
                                                          emphasis:MDCActionEmphasisHigh
                                                           handler:handler];
  [alert addAction:primaryAction];

  MDCAlertAction *cancelAction = [MDCAlertAction actionWithTitle:@"Cancel"
                                                         emphasis:MDCActionEmphasisMedium
                                                          handler:handler];
  [alert addAction:cancelAction];

  // Make sure to apply theming after all actions are added, so they are themed too!
  [alert applyThemeWithScheme:scheme];

  // present the alert
  [self presentViewController:alert animated:YES completion:...];

Using a Themer

You can theme an MDCDialog to match the Material Design Dialog using your app's schemes in the DialogThemer extension.

You must first add the DialogThemer extension to your project:

pod 'MaterialComponents/Dialogs+DialogThemer'

You can then import the extension and create an MDCAlertControllerThemer instance. A dialog scheme defines the design parameters that you can use to theme your dialogs.

Swift

// Step 1: Import the DialogThemer extension
import MaterialComponents.MaterialDialogs_DialogThemer

// Step 2: Create or get a alert scheme
let alertScheme = MDCAlertScheme()

// Step 3: Apply the alert scheme to your component using the desired alert style
MDCAlertControllerThemer.applyScheme(scheme, to: alertController)

Objective-C

// Step 1: Import the DialogThemer extension
#import "MaterialDialogs+DialogThemer.h"

// Step 2: Create or get a alert scheme
MDCAlertScheme *alertScheme = [[MDCAlertScheme alloc] init];

// Step 3: Apply the alert scheme to your component using the desired alert style
[MDCAlertControllerThemer applyScheme:alertScheme toAlertController:alertController];

Accessibility

MDCPresentationController Accessibility

As MDCPresentationController is responsible for the presentation of your custom view controllers, it does not implement any accessibility functionality itself.

-accessibilityPerformEscape Behavior

If you intend your presented view controller to dismiss when a user in VoiceOver mode has performed the escape gesture the view controller should implement the accessibilityPerformEscape method.

- (BOOL)accessibilityPerformEscape {
  [self.presentingViewController dismissViewControllerAnimated:YES completion:NULL];
  return YES;
}