Fabian Kozynski | 5cfb883 | 2021-11-29 16:26:18 -0500 | [diff] [blame] | 1 | # Dialogs in SystemUI |
| 2 | |
Fabian Kozynski | 115f93d | 2021-12-01 13:32:24 -0500 | [diff] [blame] | 3 | ## Creating a dialog |
Fabian Kozynski | 5cfb883 | 2021-11-29 16:26:18 -0500 | [diff] [blame] | 4 | |
| 5 | ### Styling |
| 6 | |
| 7 | In order to have uniform styling in dialogs, use [SystemUIDialog][1] with its default theme. |
| 8 | If not possible, use [AlertDialog][2] with the SystemUI theme `R.style.Theme_SystemUI_Dialog`. |
| 9 | If needed, consider extending this theme instead of creating a new one. |
| 10 | |
| 11 | ### Setting the internal elements |
| 12 | |
| 13 | The internal elements of the dialog are laid out using the following resources: |
| 14 | |
| 15 | * [@layout/alert_dialog_systemui][3] |
| 16 | * [@layout/alert_dialog_title_systemui][4] |
| 17 | * [@layout/alert_dialog_button_bar_systemui][5] |
| 18 | |
| 19 | Use the default components of the layout by calling the appropriate setters (in the dialog or |
| 20 | [AlertDialog.Builder][2]). The supported styled setters are: |
| 21 | |
| 22 | * `setIcon`: tinted using `attr/colorAccentPrimaryVariant`. |
| 23 | * `setTitle`: this will use `R.style.TextAppearance_Dialog_Title`. |
| 24 | * `setMessage`: this will use `R.style.TextAppearance_Dialog_Body_Message`. |
| 25 | * `SystemUIDialog.set<Positive|Negative|Neutral>Button` or `AlertDialog.setButton`: this will use |
| 26 | the following styles for buttons. |
| 27 | * `R.style.Widget_Dialog_Button` for the positive button. |
| 28 | * `R.style.Widget_Dialog_Button_BorderButton` for the negative and neutral buttons. |
| 29 | |
| 30 | If needed to use the same style for all three buttons, the style attributes |
| 31 | `?android:attr/buttonBar<Positive|NegativeNeutral>Button` can be overriden in a theme that extends |
| 32 | from `R.style.Theme_SystemUI_Dialog`. |
| 33 | * `setView`: to set a custom view in the dialog instead of using `setMessage`. |
| 34 | |
| 35 | Using `setContentView` is discouraged as this replaces the content completely. |
| 36 | |
| 37 | All these calls should be made before `Dialog#create` or `Dialog#show` (which internally calls |
| 38 | `create`) are called, as that's when the content is installed. |
| 39 | |
| 40 | ## Showing the dialog |
| 41 | |
Luca Zuccarini | fd3adee | 2024-02-07 11:39:56 +0000 | [diff] [blame] | 42 | When showing a dialog triggered by clicking on a `View`, you should use [DialogTransitionAnimator][6] to |
Fabian Kozynski | 5cfb883 | 2021-11-29 16:26:18 -0500 | [diff] [blame] | 43 | nicely animate the dialog from/to that `View`, instead of calling `Dialog.show`. |
| 44 | |
| 45 | This animator provides the following methods: |
| 46 | |
| 47 | * `showFromView`: animates the dialog show from a view , and the dialog dismissal/cancel/hide to the |
| 48 | same view. |
| 49 | * `showFromDialog`: animates the dialog show from a currently showing dialog, and the dialog |
| 50 | dismissal/cancel/hide back to that dialog. The originating dialog must have been shown using |
Luca Zuccarini | fd3adee | 2024-02-07 11:39:56 +0000 | [diff] [blame] | 51 | `DialogTransitionAnimator`. |
Fabian Kozynski | 5cfb883 | 2021-11-29 16:26:18 -0500 | [diff] [blame] | 52 | * `dismissStack`: dismisses a stack of dialogs that were launched using `showFromDialog` animating |
| 53 | the top-most dialog back into the view that was used in the initial `showFromView`. |
| 54 | |
| 55 | ## Example |
| 56 | |
| 57 | Here's a short code snippet with an example on how to use the guidelines. |
| 58 | |
| 59 | ```kotlin |
| 60 | val dialog = SystemUIDialog(context).apply { |
| 61 | setIcon(R.drawable.my_icon) |
| 62 | setTitle(context.getString(R.string.title)) |
| 63 | setMessage(context.getString(R.string.message)) |
| 64 | // Alternatively to setMessage: |
| 65 | // val content = LayoutManager.from(context).inflate(R.layout.content, null) |
| 66 | // setView(content) |
| 67 | setPositiveButton(R.string.positive_button_text, ::onPositiveButton) |
| 68 | setNegativeButton(R.string.negative_button_text, ::onNegativeButton) |
| 69 | setNeutralButton(R.string.neutral_button_text, ::onNeutralButton) |
| 70 | } |
Luca Zuccarini | fd3adee | 2024-02-07 11:39:56 +0000 | [diff] [blame] | 71 | dialogTransitionAnimator.showFromView(dialog, view) |
Fabian Kozynski | 5cfb883 | 2021-11-29 16:26:18 -0500 | [diff] [blame] | 72 | ``` |
| 73 | |
| 74 | [1]: /packages/SystemUI/src/com/android/systemui/statusbar/phone/SystemUIDialog.java |
| 75 | [2]: /core/java/android/app/AlertDialog.java |
| 76 | [3]: /packages/SystemUI/res/layout/alert_dialog_systemui.xml |
| 77 | [4]: /packages/SystemUI/res/layout/alert_dialog_title_systemui.xml |
| 78 | [5]: /packages/SystemUI/res/layout/alert_dialog_button_bar_systemui.xml |
Luca Zuccarini | fd3adee | 2024-02-07 11:39:56 +0000 | [diff] [blame] | 79 | [6]: /packages/SystemUI/animation/src/com/android/systemui/animation/DialogTransitionAnimator.kt |