[Dialog] Added support for full width buttons in dialogs.

PiperOrigin-RevId: 368853063
material-components · Apr 16, 2021 · cd9e620 · cd9e620
1 parent b4cca5b
commit cd9e620
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 5 deletions.
diff --git a/docs/components/Button.md b/docs/components/Button.md
@@ -149,10 +149,11 @@ Element                                         | Attribute         | Related me
 
 #### Styles
 
-Element           | Style
------------------ | --------------------------------------------------
-**Default style** | `Widget.MaterialComponents.Button.TextButton`
-**Icon style**    | `Widget.MaterialComponents.Button.TextButton.Icon`
+| Element                | Style                                                          |
+| ---------------------- | -------------------------------------------------------------- |
+| **Default style**      | `Widget.MaterialComponents.Button.TextButton`                  |
+| **Icon style**         | `Widget.MaterialComponents.Button.TextButton.Icon`             |
+| **Full Width Buttons** | `Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth` |
 
 Default style theme attribute: `?attr/borderlessButtonStyle`
 

diff --git a/docs/components/Dialog.md b/docs/components/Dialog.md
@@ -43,6 +43,34 @@ such as an icon on a title having a content description via the
 `android:contentDescription` attribute set in the
 `MaterialAlertDialog.MaterialComponents.Title.Icon` style or descendant.
 
+### Adding full width buttons
+
+The buttons in a dialog can be made to span the full width of the dialog by
+using the theme overrides
+`R.style.ThemeOverlay_MaterialComponents_MaterialAlertDialog_FullWidthButtons`
+or
+`R.style.ThemeOverlay_MaterialComponents_MaterialAlertDialog_Centered_FullWidthButtons`.
+
+The following example shows an alert dialog with a long message and two full
+width buttons.
+
+!["Dialog with decline and accept buttons that span the full width"](assets/dialogs/dialogs_alert_with_fullwidth_buttons.png)
+
+In code:
+
+```kt
+MaterialAlertDialogBuilder(context,
+  R.style.ThemeOverlay_MaterialComponents_MaterialAlertDialog_FullWidthButtons)
+        .setMessage(resources.getString(R.string.long_message))
+        .setNegativeButton(resources.getString(R.string.decline)) { dialog, which ->
+            // Respond to negative button press
+        }
+        .setPositiveButton(resources.getString(R.string.accept)) { dialog, which ->
+            // Respond to positive button press
+        }
+        .show()
+```
+
 ### Types
 
 There are four types of dialogs: 1\. [Alert dialog](#alert-dialog), 2\.

diff --git a/docs/components/assets/dialogs/dialogs_alert_with_fullwidth_buttons.png b/docs/components/assets/dialogs/dialogs_alert_with_fullwidth_buttons.png
diff --git a/lib/java/com/google/android/material/button/res/values/styles.xml b/lib/java/com/google/android/material/button/res/values/styles.xml
@@ -115,6 +115,13 @@
     <item name="android:layout_marginLeft">0dp</item>
   </style>
 
+  <!-- Style to make buttons in a dialog to span the full width. -->
+  <style name="Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth">
+    <item name="android:layout_width">0dp</item>
+    <item name="android:layout_weight">1</item>
+    <item name="android:maxWidth">@null</item>
+  </style>
+
   <style name="Widget.MaterialComponents.Button.TextButton.Dialog.Icon">
     <!-- Icon text button has the same padding as a regular text button -->
   </style>

diff --git a/lib/java/com/google/android/material/dialog/res-public/values/public.xml b/lib/java/com/google/android/material/dialog/res-public/values/public.xml
@@ -50,6 +50,7 @@
   <public name="materialAlertDialogTitleIconStyle" type="attr"/>
   <public name="materialAlertDialogTitleTextStyle" type="attr"/>
   <public name="materialAlertDialogBodyTextStyle" type="attr"/>
+  <public name="materialAlertDialogButtonSpacerVisibility" type="attr"/>
 
   <public name="backgroundInsetStart" type="attr"/>
   <public name="backgroundInsetTop" type="attr"/>

diff --git a/lib/java/com/google/android/material/dialog/res/layout/mtrl_alert_dialog_actions.xml b/lib/java/com/google/android/material/dialog/res/layout/mtrl_alert_dialog_actions.xml
@@ -47,7 +47,7 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_weight="1"
-        android:visibility="invisible"/>
+        android:visibility="?attr/materialAlertDialogButtonSpacerVisibility"/>
 
     <Button
         android:id="@android:id/button2"

diff --git a/lib/java/com/google/android/material/dialog/res/values/attrs.xml b/lib/java/com/google/android/material/dialog/res/values/attrs.xml
@@ -25,6 +25,7 @@
     <attr name="materialAlertDialogTitleIconStyle" format="reference"/>
     <attr name="materialAlertDialogTitleTextStyle" format="reference"/>
     <attr name="materialAlertDialogBodyTextStyle" format="reference"/>
+    <attr name="materialAlertDialogButtonSpacerVisibility" format="integer"/>
   </declare-styleable>
 
   <declare-styleable name="MaterialAlertDialog">

diff --git a/lib/java/com/google/android/material/dialog/res/values/themes.xml b/lib/java/com/google/android/material/dialog/res/values/themes.xml
@@ -73,11 +73,28 @@
     <item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.MaterialComponents.Title.Text</item>
   </style>
 
+  <!-- A theme overlay for dialogs with buttons that span the width of the dialog. -->
+  <style name="ThemeOverlay.MaterialComponents.MaterialAlertDialog.FullWidthButtons">
+    <item name="materialAlertDialogButtonSpacerVisibility">@integer/mtrl_view_gone</item>
+    <item name="buttonBarPositiveButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth</item>
+    <item name="buttonBarNegativeButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth</item>
+    <item name="buttonBarNeutralButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth</item>
+  </style>
+
   <!-- A theme overlay for Alert Dialog panels with a center aligned title text and icon. -->
   <style name="ThemeOverlay.MaterialComponents.MaterialAlertDialog.Centered" parent="Base.ThemeOverlay.MaterialComponents.MaterialAlertDialog">
     <item name="materialAlertDialogTitlePanelStyle">@style/MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked</item>
     <item name="materialAlertDialogTitleIconStyle">@style/MaterialAlertDialog.MaterialComponents.Title.Icon.CenterStacked</item>
     <item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.MaterialComponents.Title.Text.CenterStacked</item>
   </style>
 
+  <!-- A theme overlay for dialogs with a center aligned title text, icon and buttons that span the width of the dialog. -->
+  <style name="ThemeOverlay.MaterialComponents.MaterialAlertDialog.Centered.FullWidthButtons">
+    <!-- Mark spacer as gone when showing full width buttons -->
+    <item name="materialAlertDialogButtonSpacerVisibility">@integer/mtrl_view_gone</item>
+    <item name="buttonBarPositiveButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth</item>
+    <item name="buttonBarNegativeButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth</item>
+    <item name="buttonBarNeutralButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth</item>
+  </style>
+
 </resources>
diff --git a/lib/java/com/google/android/material/dialog/res/values/themes_base.xml b/lib/java/com/google/android/material/dialog/res/values/themes_base.xml
@@ -122,6 +122,7 @@
   </style>
   <style name="Base.V14.ThemeOverlay.MaterialComponents.MaterialAlertDialog" parent="ThemeOverlay.AppCompat.Dialog.Alert">
     <!-- Widget styles -->
+    <item name="materialAlertDialogButtonSpacerVisibility">@integer/mtrl_view_invisible</item>
     <item name="alertDialogStyle">@style/MaterialAlertDialog.MaterialComponents</item>
     <item name="android:checkedTextViewStyle" tools:ignore="NewApi">@style/Widget.MaterialComponents.CheckedTextView</item>
     <item name="android:dialogCornerRadius" tools:ignore="newApi">@null</item>

diff --git a/lib/java/com/google/android/material/internal/res/values/integers.xml b/lib/java/com/google/android/material/internal/res/values/integers.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<resources>
+  <!-- View.VISIBLE - view is visible on screen. -->
+  <integer name="mtrl_view_visible">0</integer>
+  <!-- View.INVISIBLE - view is not visible on screen, but occupies the space. -->
+  <integer name="mtrl_view_invisible">1</integer>
+  <!-- View.GONE - view is not visible on screen and does not occupy any space. -->
+  <integer name="mtrl_view_gone">2</integer>
+</resources>