Simple dialogs can present additional details about a list item or provide actions related to the primary task. For example, simple dialogs can display avatars, icons, or clarifying subtext, or they can enable users to perform an orthogonal action such as adding an account that’s not currently listed as an option.
Touch mechanics:
- Choosing an option immediately commits the option and closes the menu.
- Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.
Simple dialogs are more interruptive than simple menus and should be used sparingly.
Example of a simple dialog
The width of a dialog on mobile is defined as a multiple of a unit.
Each unit is 56dp wide
Minimum width on mobile = 56dp * 5 = 280dp
Simple dialogs do not have explicit buttons that accept or cancel the operation.
Specifications:
- A simple dialog appears centered vertically and horizontally in the screen.
- The distance between the edges of the screen and the edges of the dialog is minimum 40dp on the left and right, and minimum 24dp on the top and bottom.
- The distance between the edge of the dialog and content is 24dp.
This simple dialog has an explicit “Cancel” button.
This simple dialog has an explicit “Cancel” button.
Row heights can vary in simple dialogs.
If any text in a simple menu wraps to another line, use a simple dialog instead.
This simple dialog has varying row heights.