Skip to content

Commit 0bd1749

Browse files
pekingmepekingme
committed
[Dialog] Added Expressive styles.
PiperOrigin-RevId: 750744509
1 parent 3a29699 commit 0bd1749

9 files changed

Lines changed: 238 additions & 13 deletions

File tree

‎catalog/java/io/material/catalog/dialog/DialogMainDemoFragment.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ public void onClick(DialogInterface dialog, int which) {
309309

310310
@StyleRes
311311
protected int getCenteredTitleThemeOverlay() {
312-
return com.google.android.material.R.style.ThemeOverlay_Material3_MaterialAlertDialog_Centered;
312+
return com.google.android.material.R.style.ThemeOverlay_Material3Expressive_MaterialAlertDialog_Centered;
313313
}
314314

315315
@StyleRes

‎catalog/java/io/material/catalog/dialog/res/values/styles.xml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,22 @@
1717

1818
<resources xmlns:tools="http://schemas.android.com/tools">
1919

20-
<style name="Widget.Catalog.Button.TextButton.Dialog.FullWidth" parent="Widget.Material3.Button.TextButton.Dialog">
20+
<style name="Widget.Catalog.Button.TextButton.Dialog.FullWidth" parent="Widget.Material3Expressive.Button.TextButton.Dialog">
2121
<item name="android:layout_width">0dp</item>
2222
<item name="android:layout_weight">1</item>
2323
<item name="android:maxWidth">@null</item>
2424
</style>
2525

2626
<!-- A theme overlay for dialogs with buttons that span the width of the dialog. -->
27-
<style name="ThemeOverlay.Catalog.MaterialAlertDialog.FullWidthButtons" parent="ThemeOverlay.Material3.MaterialAlertDialog">
27+
<style name="ThemeOverlay.Catalog.MaterialAlertDialog.FullWidthButtons" parent="ThemeOverlay.Material3Expressive.MaterialAlertDialog">
2828
<item name="materialAlertDialogButtonSpacerVisibility">@integer/mtrl_view_gone</item>
2929
<item name="buttonBarPositiveButtonStyle">@style/Widget.Catalog.Button.TextButton.Dialog.FullWidth</item>
3030
<item name="buttonBarNegativeButtonStyle">@style/Widget.Catalog.Button.TextButton.Dialog.FullWidth</item>
3131
<item name="buttonBarNeutralButtonStyle">@style/Widget.Catalog.Button.TextButton.Dialog.FullWidth</item>
3232
</style>
3333

3434
<!-- A theme overlay for dialogs with a center aligned title text, icon and buttons that span the width of the dialog. -->
35-
<style name="ThemeOverlay.Catalog.MaterialAlertDialog.Centered.FullWidthButtons" parent="ThemeOverlay.Material3.MaterialAlertDialog.Centered">
35+
<style name="ThemeOverlay.Catalog.MaterialAlertDialog.Centered.FullWidthButtons" parent="ThemeOverlay.Material3Expressive.MaterialAlertDialog.Centered">
3636
<!-- Mark spacer as gone when showing full width buttons -->
3737
<item name="materialAlertDialogButtonSpacerVisibility">@integer/mtrl_view_gone</item>
3838
<item name="buttonBarPositiveButtonStyle">@style/Widget.Catalog.Button.TextButton.Dialog.FullWidth</item>

‎lib/java/com/google/android/material/dialog/res-public/values/public.xml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,5 +94,28 @@
9494
<public name="MaterialAlertDialog.Material3.Title.Text.CenterStacked" type="style"/>
9595
<public name="MaterialAlertDialog.Material3.Body.Text.CenterStacked" type="style"/>
9696

97+
<public name="Theme.Material3Expressive.Light.Dialog" type="style"/>
98+
<public name="Theme.Material3Expressive.Light.Dialog.Alert" type="style"/>
99+
<public name="Theme.Material3Expressive.Light.Dialog.MinWidth" type="style"/>
100+
101+
<public name="Theme.Material3Expressive.Dark.Dialog" type="style"/>
102+
<public name="Theme.Material3Expressive.Dark.Dialog.Alert" type="style"/>
103+
<public name="Theme.Material3Expressive.Dark.Dialog.MinWidth" type="style"/>
104+
105+
<public name="Theme.Material3Expressive.DayNight.Dialog" type="style"/>
106+
<public name="Theme.Material3Expressive.DayNight.Dialog.Alert" type="style"/>
107+
<public name="Theme.Material3Expressive.DayNight.Dialog.MinWidth" type="style"/>
108+
109+
<public name="ThemeOverlay.Material3Expressive.Dialog" type="style"/>
110+
<public name="ThemeOverlay.Material3Expressive.Dialog.Alert" type="style"/>
111+
<public name="ThemeOverlay.Material3Expressive.MaterialAlertDialog" type="style"/>
112+
<public name="ThemeOverlay.Material3Expressive.MaterialAlertDialog.Centered" type="style"/>
113+
114+
<public name="MaterialAlertDialog.Material3Expressive" type="style"/>
115+
<public name="MaterialAlertDialog.Material3Expressive.Title.Panel" type="style"/>
116+
<public name="MaterialAlertDialog.Material3Expressive.Title.Panel.CenterStacked" type="style"/>
117+
<public name="MaterialAlertDialog.Material3Expressive.Title.Text" type="style"/>
118+
<public name="MaterialAlertDialog.Material3Expressive.Title.Text.CenterStacked" type="style"/>
119+
97120
</resources>
98121

‎lib/java/com/google/android/material/dialog/res/layout/m3expressive_alert_dialog.xml‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright (C) 2025 The Android Open Source Project
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
<androidx.appcompat.widget.AlertDialogLayout
18+
xmlns:android="http://schemas.android.com/apk/res/android"
19+
xmlns:app="http://schemas.android.com/apk/res-auto"
20+
android:id="@+id/parentPanel"
21+
android:layout_width="match_parent"
22+
android:layout_height="wrap_content"
23+
android:gravity="start|left|top"
24+
android:orientation="vertical"
25+
android:clipChildren="true"
26+
android:filterTouchesWhenObscured="true">
27+
28+
<include layout="@layout/m3expressive_alert_dialog_title"/>
29+
30+
<FrameLayout
31+
android:id="@+id/contentPanel"
32+
android:layout_width="match_parent"
33+
android:layout_height="wrap_content"
34+
android:minHeight="48dp">
35+
36+
<ImageView android:id="@+id/scrollIndicatorUp"
37+
android:layout_width="match_parent"
38+
android:layout_height="1dp"
39+
android:layout_gravity="top"
40+
android:background="#1f000000"
41+
android:visibility="gone"
42+
android:contentDescription="@null"
43+
app:backgroundTint="?android:attr/colorForeground"/>
44+
45+
<androidx.core.widget.NestedScrollView
46+
android:id="@+id/scrollView"
47+
android:layout_width="match_parent"
48+
android:layout_height="wrap_content"
49+
android:clipToPadding="false">
50+
51+
<LinearLayout
52+
android:layout_width="match_parent"
53+
android:layout_height="wrap_content"
54+
android:orientation="vertical">
55+
56+
<android.widget.Space
57+
android:id="@+id/textSpacerNoTitle"
58+
android:layout_width="match_parent"
59+
android:layout_height="@dimen/m3expressive_alert_dialog_top_padding"
60+
android:visibility="gone"/>
61+
62+
<TextView
63+
android:id="@android:id/message"
64+
style="?attr/materialAlertDialogBodyTextStyle"
65+
android:layout_width="match_parent"
66+
android:layout_height="wrap_content"
67+
android:paddingLeft="?attr/dialogPreferredPadding"
68+
android:paddingRight="?attr/dialogPreferredPadding"/>
69+
70+
<android.widget.Space
71+
android:id="@+id/textSpacerNoButtons"
72+
android:layout_width="match_parent"
73+
android:layout_height="@dimen/m3expressive_alert_dialog_bottom_padding"
74+
android:visibility="gone"/>
75+
</LinearLayout>
76+
</androidx.core.widget.NestedScrollView>
77+
78+
<ImageView android:id="@+id/scrollIndicatorDown"
79+
android:layout_width="match_parent"
80+
android:layout_height="1dp"
81+
android:layout_gravity="bottom"
82+
android:background="#1f000000"
83+
android:visibility="gone"
84+
android:contentDescription="@null"
85+
app:backgroundTint="?android:attr/colorForeground"/>
86+
87+
</FrameLayout>
88+
89+
<FrameLayout
90+
android:id="@+id/customPanel"
91+
android:layout_width="match_parent"
92+
android:layout_height="wrap_content"
93+
android:minHeight="48dp">
94+
95+
<FrameLayout
96+
android:id="@+id/custom"
97+
android:layout_width="match_parent"
98+
android:layout_height="wrap_content"/>
99+
</FrameLayout>
100+
101+
<include layout="@layout/m3_alert_dialog_actions"
102+
android:layout_width="match_parent"
103+
android:layout_height="wrap_content"/>
104+
105+
</androidx.appcompat.widget.AlertDialogLayout>

‎lib/java/com/google/android/material/dialog/res/layout/m3expressive_alert_dialog_title.xml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright (C) 2025 The Android Open Source Project
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
19+
xmlns:tools="http://schemas.android.com/tools"
20+
android:id="@+id/topPanel"
21+
android:layout_width="match_parent"
22+
android:layout_height="wrap_content"
23+
android:orientation="vertical"
24+
android:filterTouchesWhenObscured="true">
25+
26+
<!-- If the client uses a customTitle, it will be added here. -->
27+
28+
<LinearLayout
29+
android:id="@+id/title_template"
30+
style="?attr/materialAlertDialogTitlePanelStyle"
31+
tools:ignore="UseCompoundDrawables">
32+
33+
<ImageView
34+
android:id="@android:id/icon"
35+
tools:ignore="ContentDescription"
36+
style="?attr/materialAlertDialogTitleIconStyle"/>
37+
38+
<TextView
39+
android:id="@+id/alertTitle"
40+
style="?attr/materialAlertDialogTitleTextStyle"/>
41+
</LinearLayout>
42+
43+
<android.widget.Space
44+
android:id="@+id/titleDividerNoCustom"
45+
android:layout_width="match_parent"
46+
android:layout_height="@dimen/m3_alert_dialog_title_bottom_margin"
47+
android:visibility="gone"/>
48+
</LinearLayout>

‎lib/java/com/google/android/material/dialog/res/values/dimens.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,9 @@
3434
<dimen name="m3_alert_dialog_action_top_padding">14dp</dimen>
3535
<!-- equals 24dp - @dimen/m3_btn_padding_bottom (6dp) - @dimen/m3_btn_inset (4dp) -->
3636
<dimen name="m3_alert_dialog_action_bottom_padding">14dp</dimen>
37+
38+
<!-- Dialog container top padding. -->
39+
<dimen name="m3expressive_alert_dialog_top_padding">24dp</dimen>
40+
<!-- Dialog container bottom padding. -->
41+
<dimen name="m3expressive_alert_dialog_bottom_padding">24dp</dimen>
3742
</resources>

‎lib/java/com/google/android/material/dialog/res/values/styles.xml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,33 @@
1717

1818
<resources xmlns:tools="http://schemas.android.com/tools">
1919

20+
<!-- Styles for M3 Expressive Dialogs. -->
21+
22+
<style name="MaterialAlertDialog.Material3Expressive" parent="MaterialAlertDialog.Material3">
23+
<item name="android:layout">@layout/m3expressive_alert_dialog</item>
24+
</style>
25+
26+
<style name="MaterialAlertDialog.Material3Expressive.Title.Panel" parent="MaterialAlertDialog.Material3.Title.Panel">
27+
<item name="android:paddingLeft">?attr/dialogPreferredPadding</item>
28+
<item name="android:paddingRight">?attr/dialogPreferredPadding</item>
29+
<item name="android:paddingTop">@dimen/m3expressive_alert_dialog_top_padding</item>
30+
</style>
31+
32+
<style name="MaterialAlertDialog.Material3Expressive.Title.Panel.CenterStacked">
33+
<item name="android:orientation">vertical</item>
34+
</style>
35+
36+
<style name="MaterialAlertDialog.Material3Expressive.Title.Text" parent="MaterialAlertDialog.Material3.Title.Text">
37+
<item name="android:singleLine">false</item>
38+
<item name="android:maxLines">4</item>
39+
</style>
40+
41+
<style name="MaterialAlertDialog.Material3Expressive.Title.Text.CenterStacked">
42+
<item name="android:layout_gravity">center</item>
43+
<item name="android:gravity">center</item>
44+
<item name="android:textAlignment" tools:ignore="NewApi">gravity</item>
45+
</style>
46+
2047
<!-- Styles for M3 Dialogs. -->
2148

2249
<style name="Widget.Material3.CheckedTextView" parent="Widget.MaterialComponents.CheckedTextView">

‎lib/java/com/google/android/material/dialog/res/values/themes_base.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@
2828
<item name="colorOnTertiaryContainer">@color/m3_ref_palette_tertiary30</item>
2929
<item name="colorOnErrorContainer">@color/m3_ref_palette_error30</item>
3030

31+
<!-- Dialog themes. -->
32+
<item name="alertDialogTheme">@style/ThemeOverlay.Material3Expressive.Dialog.Alert</item>
33+
<item name="materialAlertDialogTheme">@style/ThemeOverlay.Material3Expressive.MaterialAlertDialog</item>
34+
3135
<!-- Widget styles. -->
3236
<item name="collapsingToolbarLayoutStyle">@style/Widget.Material3Expressive.CollapsingToolbar</item>
3337
<item name="collapsingToolbarLayoutMediumStyle">@style/Widget.Material3Expressive.CollapsingToolbar.Medium</item>
@@ -79,6 +83,11 @@
7983
</style>
8084

8185
<style name="Base.Theme.Material3Expressive.Dark.Dialog" parent="Theme.Material3.Dark.Dialog">
86+
87+
<!-- Dialog themes. -->
88+
<item name="alertDialogTheme">@style/ThemeOverlay.Material3Expressive.Dialog.Alert</item>
89+
<item name="materialAlertDialogTheme">@style/ThemeOverlay.Material3Expressive.MaterialAlertDialog</item>
90+
8291
<!-- Widget styles. -->
8392
<item name="collapsingToolbarLayoutStyle">@style/Widget.Material3Expressive.CollapsingToolbar</item>
8493
<item name="collapsingToolbarLayoutMediumStyle">@style/Widget.Material3Expressive.CollapsingToolbar.Medium</item>

‎lib/java/com/google/android/material/dialog/res/values/themes_overlay.xml‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
-->
1717
<resources xmlns:tools="http://schemas.android.com/tools">
1818

19-
<!-- Dialog theme overlays for Material3Expressive. -->
19+
<!-- Dialog theme overlays for M3 Expressive. -->
2020

2121
<style name="Base.ThemeOverlay.Material3Expressive.Dialog" parent="Base.ThemeOverlay.Material3.Dialog">
22-
<!-- Update materialButtonStyle with Expressive style. -->
22+
<item name="materialButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog.Flush</item>
2323
</style>
2424

2525
<style name="ThemeOverlay.Material3Expressive.Dialog" parent="Base.ThemeOverlay.Material3Expressive.Dialog"/>
@@ -29,7 +29,7 @@
2929
alertDialogTheme attribute.
3030
-->
3131
<style name="ThemeOverlay.Material3Expressive.Dialog.Alert" parent="ThemeOverlay.Material3.Dialog.Alert">
32-
<!-- Update buttonBarButtonStyle with Expressive style. -->
32+
<item name="buttonBarButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog.Flush</item>
3333
</style>
3434

3535
<!--
@@ -38,27 +38,35 @@
3838
It is recommended to use AppCompat alert dialogs, but Preferences does not.
3939
-->
4040
<style name="ThemeOverlay.Material3Expressive.Dialog.Alert.Framework" parent="ThemeOverlay.Material3.Dialog.Alert.Framework">
41-
<!-- Update buttonBarButtonStyle with Expressive style. -->
41+
<item name="android:buttonBarButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog.Flush</item>
4242
</style>
4343

4444
<style name="ThemeOverlay.Material3Expressive.Light.Dialog.Alert.Framework" parent="ThemeOverlay.Material3.Light.Dialog.Alert.Framework">
45-
<!-- Update buttonBarButtonStyle with Expressive style. -->
45+
<item name="android:buttonBarButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog.Flush</item>
4646
</style>
4747

4848
<!--
4949
The default Material3Expressive theme overlay for AlertDialogs built with the MaterialAlertDialogBuilder, via the
5050
materialAlertDialogTheme attribute.
5151
-->
5252
<style name="ThemeOverlay.Material3Expressive.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
53-
<!-- Update components styles to Expressive styles. -->
53+
<item name="alertDialogStyle">@style/MaterialAlertDialog.Material3Expressive</item>
54+
<item name="buttonBarButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog</item>
55+
<item name="buttonBarPositiveButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog</item>
56+
<item name="buttonBarNegativeButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog</item>
57+
<item name="buttonBarNeutralButtonStyle">@style/Widget.Material3Expressive.Button.TextButton.Dialog.Flush</item>
58+
<item name="materialAlertDialogTitlePanelStyle">@style/MaterialAlertDialog.Material3Expressive.Title.Panel</item>
59+
<item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.Material3Expressive.Title.Text</item>
5460
</style>
5561

5662
<!-- A theme overlay for Material3Expressive Alert Dialog panels with a center aligned title text and icon. -->
5763
<style name="ThemeOverlay.Material3Expressive.MaterialAlertDialog.Centered">
58-
<!-- Update components styles to Expressive styles. -->
64+
<item name="materialAlertDialogTitlePanelStyle">@style/MaterialAlertDialog.Material3Expressive.Title.Panel.CenterStacked</item>
65+
<item name="materialAlertDialogTitleIconStyle">@style/MaterialAlertDialog.Material3.Title.Icon.CenterStacked</item>
66+
<item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.Material3Expressive.Title.Text.CenterStacked</item>
5967
</style>
6068

61-
<!-- Dialog theme overlays for Material3. -->
69+
<!-- Dialog theme overlays for M3. -->
6270

6371
<style name="Base.ThemeOverlay.Material3.Dialog" parent="Base.ThemeOverlay.MaterialComponents.Dialog">
6472
<item name="materialButtonStyle">@style/Widget.Material3.Button.TextButton.Dialog.Flush</item>
@@ -118,7 +126,7 @@
118126
<item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.Material3.Title.Text.CenterStacked</item>
119127
</style>
120128

121-
<!-- Dialog theme overlays for MaterialComponents. -->
129+
<!-- Dialog theme overlays for M2. -->
122130

123131
<style name="Base.V14.ThemeOverlay.MaterialComponents.Dialog" parent="ThemeOverlay.AppCompat.Dialog">
124132
<!-- Widget styles -->

0 commit comments

Comments
 (0)