Skip to content

Commit 4b9df08

Browse files
imhappileticiarossi
imhappi
authored and
leticiarossi
committed
[FloatingToolbar][DockedToolbar] Added m3 styles for buttons and theme overlays
PiperOrigin-RevId: 749086012
1 parent 834ce09 commit 4b9df08

File tree

12 files changed

+266
-24
lines changed

12 files changed

+266
-24
lines changed

‎catalog/java/io/material/catalog/dockedtoolbar/DockedToolbarFragment.java

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,13 @@ public Fragment createFragment() {
6565
return new DockedToolbarThreeItemDemoFragment();
6666
}
6767
});
68+
additionalDemos.add(
69+
new Demo(R.string.cat_docked_toolbar_text_button_demo_title) {
70+
@Override
71+
public Fragment createFragment() {
72+
return new DockedToolbarTextButtonDemoFragment();
73+
}
74+
});
6875
return additionalDemos;
6976
}
7077

‎catalog/java/io/material/catalog/dockedtoolbar/DockedToolbarTextButtonDemoFragment.java

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/*
2+
* Copyright 2025 The Android Open Source Project
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
package io.material.catalog.dockedtoolbar;
17+
18+
import io.material.catalog.R;
19+
20+
import android.os.Bundle;
21+
import androidx.appcompat.app.AppCompatActivity;
22+
import androidx.appcompat.widget.Toolbar;
23+
import android.view.LayoutInflater;
24+
import android.view.View;
25+
import android.view.ViewGroup;
26+
import android.widget.Button;
27+
import android.widget.LinearLayout;
28+
import androidx.annotation.LayoutRes;
29+
import androidx.annotation.NonNull;
30+
import androidx.annotation.Nullable;
31+
import com.google.android.material.dockedtoolbar.DockedToolbarLayout;
32+
import com.google.android.material.snackbar.Snackbar;
33+
import io.material.catalog.feature.DemoFragment;
34+
35+
/** A fragment that displays a Docked Toolbar demo with text buttons for the Catalog app. */
36+
public class DockedToolbarTextButtonDemoFragment extends DemoFragment {
37+
38+
private DockedToolbarLayout dockedToolbar;
39+
40+
@Override
41+
@NonNull
42+
public View onCreateDemoView(
43+
@NonNull LayoutInflater layoutInflater,
44+
@Nullable ViewGroup viewGroup,
45+
@Nullable Bundle bundle) {
46+
View view = layoutInflater.inflate(getLayoutResId(), viewGroup, /* attachToRoot= */ false);
47+
Toolbar toolbar = view.findViewById(R.id.toolbar);
48+
dockedToolbar = view.findViewById(R.id.docked_toolbar);
49+
((AppCompatActivity) requireActivity()).setSupportActionBar(toolbar);
50+
51+
LinearLayout dockedToolbarChild = view.findViewById(R.id.docked_toolbar_child);
52+
53+
View content = layoutInflater.inflate(getDockedToolbarContent(), dockedToolbarChild, /* attachToRoot= */ true);
54+
55+
Button backButton = content.findViewById(R.id.docked_toolbar_back_button);
56+
Button nextButton = content.findViewById(R.id.docked_toolbar_next_button);
57+
setupSnackbarOnClick(backButton);
58+
setupSnackbarOnClick(nextButton);
59+
60+
return view;
61+
}
62+
63+
private void setupSnackbarOnClick(@NonNull View view) {
64+
view.setOnClickListener(
65+
v ->
66+
Snackbar.make(
67+
dockedToolbar,
68+
view.getContentDescription(),
69+
Snackbar.LENGTH_SHORT)
70+
.setAnchorView(dockedToolbar)
71+
.show());
72+
}
73+
74+
@LayoutRes
75+
protected int getLayoutResId() {
76+
return R.layout.cat_docked_toolbar_vibrant_fragment;
77+
}
78+
79+
@Override
80+
public boolean shouldShowDefaultDemoActionBar() {
81+
return false;
82+
}
83+
84+
@LayoutRes
85+
protected int getDockedToolbarContent() {
86+
return R.layout.cat_docked_toolbar_text_button_content;
87+
}
88+
}

‎catalog/java/io/material/catalog/dockedtoolbar/res/layout/cat_docked_toolbar_small_content.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
android:layout_width="48dp"
3131
android:layout_height="48dp"
3232
android:layout_gravity="center"
33-
style="@style/Widget.Material3.DockedToolbar.IconButton.Vibrant"
33+
style="?attr/materialIconButtonStyle"
3434
android:contentDescription="@string/cat_docked_toolbar_left_arrow_button_description"
3535
app:icon="@drawable/ic_arrow_back_24px" />
3636
</FrameLayout>
@@ -59,7 +59,7 @@
5959
android:layout_width="48dp"
6060
android:layout_height="48dp"
6161
android:layout_gravity="center"
62-
style="@style/Widget.Material3.DockedToolbar.IconButton.Vibrant"
62+
style="?attr/materialIconButtonStyle"
6363
android:contentDescription="@string/cat_docked_toolbar_right_arrow_button_description"
6464
app:icon="@drawable/ic_arrow_forward_24px" />
6565
</FrameLayout>

‎catalog/java/io/material/catalog/dockedtoolbar/res/layout/cat_docked_toolbar_text_button_content.xml

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:app="http://schemas.android.com/apk/res-auto"
19+
android:baselineAligned="false" android:orientation="horizontal"
20+
android:layout_width="match_parent"
21+
android:layout_height="wrap_content">
22+
23+
<Button
24+
android:id="@+id/docked_toolbar_back_button"
25+
android:layout_width="wrap_content"
26+
android:layout_height="wrap_content"
27+
android:layout_gravity="start"
28+
style="?attr/borderlessButtonStyle"
29+
android:contentDescription="@string/cat_docked_toolbar_back_text_button_text"
30+
android:text="@string/cat_docked_toolbar_back_text_button_text"/>
31+
32+
<Button
33+
android:id="@+id/docked_toolbar_next_button"
34+
android:layout_width="wrap_content"
35+
android:layout_height="wrap_content"
36+
android:layout_gravity="end"
37+
android:contentDescription="@string/cat_docked_toolbar_next_text_button_text"
38+
android:text="@string/cat_docked_toolbar_next_text_button_text"/>
39+
40+
</FrameLayout>

‎catalog/java/io/material/catalog/dockedtoolbar/res/values/strings.xml

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,14 @@
1919
description="Title for the screen that showcases the Docked Toolbar widget [CHAR LIMIT=NONE]">
2020
Docked Toolbar
2121
</string>
22-
<string name="cat_docked_toolbar_three_item_title"
22+
<string name="cat_docked_toolbar_three_item_title"
2323
description="Title for the screen that showcases the Docked Toolbar widget with three items [CHAR LIMIT=NONE]">
2424
Docked Toolbar with 3 items
2525
</string>
26+
<string name="cat_docked_toolbar_text_button_demo_title"
27+
description="Title for the screen that showcases the Docked Toolbar widget with text buttons [CHAR LIMIT=NONE]">
28+
Docked Toolbar with Text Buttons
29+
</string>
2630
<string name="cat_docked_toolbar_description"
2731
description="Body text describing the Docked Toolbar component within the design system [CHAR LIMIT=NONE]">
2832
The docked toolbar is pinned to the top or bottom and can be used to display contextual actions relevant to the body content or the specific page.
@@ -42,4 +46,6 @@
4246
<string name="cat_docked_toolbar_overflow_option_one" description="Content description for an option in an overflow menu [CHAR LIMIT=NONE]">One</string>
4347
<string name="cat_docked_toolbar_overflow_option_two" description="Content description for an option in an overflow menu [CHAR LIMIT=NONE]">Two</string>
4448
<string name="cat_docked_toolbar_overflow_option_three" description="Content description for an option in an overflow menu [CHAR LIMIT=NONE]">Three</string>
49+
<string name="cat_docked_toolbar_back_text_button_text" description="Content description for a back button [CHAR LIMIT=NONE]">Back</string>
50+
<string name="cat_docked_toolbar_next_text_button_text" description="Content description for a next button [CHAR LIMIT=NONE]">Next</string>
4551
</resources>

‎catalog/java/io/material/catalog/floatingtoolbar/res/layout/cat_floating_toolbar_fragment.xml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,37 +147,37 @@
147147

148148
<Button
149149
android:id="@+id/floating_toolbar_vibrant_button_bold"
150-
style="@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant"
150+
style="?attr/materialIconButtonStyle"
151151
android:layout_width="wrap_content"
152152
android:layout_height="wrap_content"
153153
android:checkable="true"
154154
android:contentDescription="@string/cat_floating_toolbar_button_bold_content_description"
155155
app:icon="@drawable/ic_format_bold_24px" />
156156
<Button
157-
style="@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant"
157+
style="?attr/materialIconButtonStyle"
158158
android:id="@+id/floating_toolbar_vibrant_button_italic"
159159
android:layout_width="wrap_content"
160160
android:layout_height="wrap_content"
161161
android:checkable="true"
162162
android:contentDescription="@string/cat_floating_toolbar_button_italic_content_description"
163163
app:icon="@drawable/ic_format_italic_24px" />
164164
<Button
165-
style="@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant"
165+
style="?attr/materialIconButtonStyle"
166166
android:id="@+id/floating_toolbar_vibrant_button_underlined"
167167
android:layout_width="wrap_content"
168168
android:layout_height="wrap_content"
169169
android:checkable="true"
170170
android:contentDescription="@string/cat_floating_toolbar_button_underlined_content_description"
171171
app:icon="@drawable/ic_format_underlined_24px" />
172172
<Button
173-
style="@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant"
173+
style="?attr/materialIconButtonStyle"
174174
android:id="@+id/floating_toolbar_vibrant_button_color_text"
175175
android:layout_width="wrap_content"
176176
android:layout_height="wrap_content"
177177
android:contentDescription="@string/cat_floating_toolbar_button_color_text_content_description"
178178
app:icon="@drawable/ic_format_color_text_24px" />
179179
<Button
180-
style="@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant"
180+
style="?attr/materialIconButtonStyle"
181181
android:id="@+id/floating_toolbar_vibrant_button_color_fill"
182182
android:layout_width="wrap_content"
183183
android:layout_height="wrap_content"

‎docs/components/DockedToolbar.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -243,15 +243,16 @@ inset padding.
243243
**Default style** | `Widget.Material3.DockedToolbar`
244244
**Vibrant style** | `Widget.Material3.DockedToolbar.Vibrant`
245245

246-
Standard style theme attribute: `?attr/floatingToolbarStyle`
247-
Vibrant style theme attribute: `?attr/floatingToolbarVibrantStyle`
246+
Standard style theme attribute: `?attr/dockedToolbarStyle`
247+
Vibrant style theme attribute: `?attr/dockedToolbarVibrantStyle`
248248

249249
The default style is the standard style.
250250

251-
Docked Toolbar may also recommend styles for specific components for when they
252-
are inside of a docked toolbar. Currently, there are styles for icon buttons:
253-
`Widget.Material3.DockedToolbar.IconButton` and
254-
`Widget.Material3.DockedToolbar.IconButton.Vibrant`.
251+
Docked Toolbar also recommends a special style for specific components for when
252+
they are inside of a docked toolbar. Currently, the Docked Toolbar styles also
253+
include a theme overlay for `?attr/materialButtonStyle`,
254+
`?attr/materialIconButtonStyle`, and `?attr/borderlessButtonStyle` to
255+
style buttons inside of a Docked Toolbar.
255256

256257
See the full list of
257258
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/dockedtoolbar/res/values/styles.xml) and

‎docs/components/FloatingToolbar.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -235,9 +235,11 @@ The following is an anatomy diagram for the floating toolbar:
235235
Standard style theme attribute: `?attr/floatingToolbarStyle`
236236
Vibrant style theme attribute: `?attr/floatingToolbarVibrantStyle`
237237

238-
Floating toolbar also provides specific styles for icon buttons,
239-
`Widget.Material3.FloatingToolbar.IconButton` and
240-
`Widget.Material3.FloatingToolbar.IconButton.Vibrant`.
238+
Floating Toolbar also recommends a special style for specific components for
239+
when they are inside of a floating toolbar. Currently, the Floating Toolbar
240+
styles also include a theme overlay for `?attr/materialButtonStyle`,
241+
`?attr/materialIconButtonStyle`, and `?attr/borderlessButtonStyle` to
242+
style buttons inside of a Floating Toolbar.
241243

242244
See the full list of
243245
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingtoolbar/res/values/styles.xml) and

‎lib/java/com/google/android/material/color/res/color/m3_standard_toolbar_icon_button_text_color_selector.xml renamed to ‎lib/java/com/google/android/material/color/res/color/m3_standard_toolbar_button_text_color_selector.xml

File renamed without changes.

‎lib/java/com/google/android/material/color/res/color/m3_vibrant_toolbar_icon_button_text_color_selector.xml renamed to ‎lib/java/com/google/android/material/color/res/color/m3_vibrant_toolbar_button_text_color_selector.xml

File renamed without changes.

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

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,76 @@
2727
</style>
2828

2929
<!-- Style for Standard Docked Toolbar. -->
30-
<style name="Widget.Material3.DockedToolbar" parent="Base.Widget.Material3.DockedToolbar"/>
30+
<style name="Widget.Material3.DockedToolbar" parent="Base.Widget.Material3.DockedToolbar">
31+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.DockedToolbar</item>
32+
</style>
3133

3234
<!-- Style for Vibrant Docked Toolbar. -->
3335
<style name="Widget.Material3.DockedToolbar.Vibrant">
3436
<item name="backgroundTint">@macro/m3_comp_toolbar_vibrant_vibrant_container_color</item>
37+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.DockedToolbar.Vibrant</item>
3538
</style>
3639

37-
<!-- Style for Icon Buttons in Docked Toolbar. -->
38-
40+
<!-- Style for Icon Button in Standard Docked Toolbar. -->
3941
<style name="Widget.Material3.DockedToolbar.IconButton" parent="Widget.Material3Expressive.Button.IconButton">
4042
<item name="backgroundTint">@color/m3_standard_toolbar_icon_button_container_color_selector</item>
41-
<item name="android:textColor">@color/m3_standard_toolbar_icon_button_text_color_selector</item>
43+
<item name="android:textColor">@color/m3_standard_toolbar_button_text_color_selector</item>
44+
<item name="iconTint">@color/m3_standard_toolbar_icon_button_icon_color_selector</item>
45+
<item name="rippleColor">@color/m3_standard_toolbar_icon_button_ripple_color_selector</item>
46+
</style>
47+
48+
<!-- Style for Buttons in Standard Docked Toolbar. -->
49+
<style name="Widget.Material3.DockedToolbar.Button" parent="Widget.Material3Expressive.Button">
50+
<item name="backgroundTint">@color/m3_standard_toolbar_icon_button_container_color_selector</item>
51+
<item name="android:textColor">@color/m3_standard_toolbar_button_text_color_selector</item>
4252
<item name="iconTint">@color/m3_standard_toolbar_icon_button_icon_color_selector</item>
4353
<item name="rippleColor">@color/m3_standard_toolbar_icon_button_ripple_color_selector</item>
4454
</style>
4555

56+
<!-- Style for Text Buttons in Standard Docked Toolbar. -->
57+
<style name="Widget.Material3.DockedToolbar.TextButton" parent="Widget.Material3Expressive.Button.TextButton">
58+
<item name="backgroundTint">@color/m3_standard_toolbar_icon_button_container_color_selector</item>
59+
<item name="android:textColor">@color/m3_standard_toolbar_button_text_color_selector</item>
60+
<item name="iconTint">@color/m3_standard_toolbar_icon_button_icon_color_selector</item>
61+
<item name="rippleColor">@color/m3_standard_toolbar_icon_button_ripple_color_selector</item>
62+
</style>
63+
64+
<!-- Style for Icon button within Vibrant Docked Toolbars. -->
4665
<style name="Widget.Material3.DockedToolbar.IconButton.Vibrant">
47-
<item name="android:textColor">@color/m3_vibrant_toolbar_icon_button_text_color_selector</item>
66+
<item name="android:textColor">@color/m3_vibrant_toolbar_button_text_color_selector</item>
67+
<item name="backgroundTint">@color/m3_vibrant_toolbar_icon_button_container_color_selector</item>
68+
<item name="iconTint">@color/m3_vibrant_toolbar_icon_button_icon_color_selector</item>
69+
<item name="rippleColor">@color/m3_vibrant_toolbar_icon_button_ripple_color_selector</item>
70+
</style>
71+
72+
<!-- Style for Button within Vibrant Docked Toolbars. -->
73+
<style name="Widget.Material3.DockedToolbar.Button.Vibrant">
74+
<item name="android:textColor">@color/m3_vibrant_toolbar_button_text_color_selector</item>
4875
<item name="backgroundTint">@color/m3_vibrant_toolbar_icon_button_container_color_selector</item>
4976
<item name="iconTint">@color/m3_vibrant_toolbar_icon_button_icon_color_selector</item>
5077
<item name="rippleColor">@color/m3_vibrant_toolbar_icon_button_ripple_color_selector</item>
5178
</style>
5279

80+
<!-- Style for Text button within Vibrant Docked Toolbars. -->
81+
<style name="Widget.Material3.DockedToolbar.TextButton.Vibrant">
82+
<item name="android:textColor">@color/m3_vibrant_toolbar_button_text_color_selector</item>
83+
<item name="backgroundTint">@color/m3_vibrant_toolbar_icon_button_container_color_selector</item>
84+
<item name="iconTint">@color/m3_vibrant_toolbar_icon_button_icon_color_selector</item>
85+
<item name="rippleColor">@color/m3_vibrant_toolbar_icon_button_ripple_color_selector</item>
86+
</style>
87+
88+
<!-- Theme overlay to be set on Docked Toolbars. -->
89+
<style name="ThemeOverlay.Material3.DockedToolbar" parent="">
90+
<item name="materialIconButtonStyle">@style/Widget.Material3.DockedToolbar.IconButton</item>
91+
<item name="materialButtonStyle">@style/Widget.Material3.DockedToolbar.TextButton</item>
92+
<item name="borderlessButtonStyle">@style/Widget.Material3.DockedToolbar.TextButton</item>
93+
</style>
94+
95+
<!-- Theme overlay to be set on Vibrant Docked Toolbars. -->
96+
<style name="ThemeOverlay.Material3.DockedToolbar.Vibrant">
97+
<item name="materialIconButtonStyle">@style/Widget.Material3.DockedToolbar.IconButton.Vibrant</item>
98+
<item name="materialButtonStyle">@style/Widget.Material3.DockedToolbar.Button.Vibrant</item>
99+
<item name="borderlessButtonStyle">@style/Widget.Material3.DockedToolbar.TextButton.Vibrant</item>
100+
</style>
101+
53102
</resources>

0 commit comments

Comments
 (0)