Skip to content

Commit c24c67d

Browse files
afohrmanpaulfthomas
afohrman
authored and
paulfthomas
committed
[FloatingToolbar] Added materialThemeOverlays to automatically set orientation and the proper icon button style on floating toolbar children.
These new materialThemeOverlays allow the FloatingToolbar style variants to elegantly handle configuration of its children, by automatically setting the orientation of the .Horizontal style variants' children to horizontal and the orientation of the .Vertical variants' children to vertical, and setting the appropriate icon button style for each floating toolbar variant, as determined by the parent style. Also added vibrant icon button styles so that they can be set from the new theme overlays, so that the proper button styling is set on both checkable and non-checkable buttons on both vibrant and non-vibrant variants. Reconfigured the catalog demo to remove android:orientation from the children since it's no longer necessary. PiperOrigin-RevId: 699262068
1 parent 8f860a2 commit c24c67d

File tree

5 files changed

+124
-13
lines changed

5 files changed

+124
-13
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,39 +16,39 @@
1616
<merge xmlns:android="http://schemas.android.com/apk/res/android"
1717
xmlns:app="http://schemas.android.com/apk/res-auto">
1818
<Button
19+
style="?attr/materialIconButtonStyle"
1920
android:id="@+id/floating_toolbar_button_bold"
20-
style="?attr/materialIconButtonFilledStyle"
2121
android:layout_width="wrap_content"
2222
android:layout_height="wrap_content"
2323
android:checkable="true"
2424
android:contentDescription="@string/cat_floating_toolbar_button_bold_content_description"
2525
app:icon="@drawable/ic_format_bold_24px" />
2626
<Button
27+
style="?attr/materialIconButtonStyle"
2728
android:id="@+id/floating_toolbar_button_italic"
28-
style="?attr/materialIconButtonFilledStyle"
2929
android:layout_width="wrap_content"
3030
android:layout_height="wrap_content"
3131
android:checkable="true"
3232
android:contentDescription="@string/cat_floating_toolbar_button_italic_content_description"
3333
app:icon="@drawable/ic_format_italic_24px" />
3434
<Button
35+
style="?attr/materialIconButtonStyle"
3536
android:id="@+id/floating_toolbar_button_underlined"
36-
style="?attr/materialIconButtonFilledStyle"
3737
android:layout_width="wrap_content"
3838
android:layout_height="wrap_content"
3939
android:checkable="true"
4040
android:contentDescription="@string/cat_floating_toolbar_button_underlined_content_description"
4141
app:icon="@drawable/ic_format_underlined_24px" />
4242
<Button
43-
android:id="@+id/floating_toolbar_button_color_text"
4443
style="?attr/materialIconButtonStyle"
44+
android:id="@+id/floating_toolbar_button_color_text"
4545
android:layout_width="wrap_content"
4646
android:layout_height="wrap_content"
4747
android:contentDescription="@string/cat_floating_toolbar_button_color_text_content_description"
4848
app:icon="@drawable/ic_format_color_text_24px" />
4949
<Button
50-
android:id="@+id/floating_toolbar_button_color_fill"
5150
style="?attr/materialIconButtonStyle"
51+
android:id="@+id/floating_toolbar_button_color_fill"
5252
android:layout_width="wrap_content"
5353
android:layout_height="wrap_content"
5454
android:contentDescription="@string/cat_floating_toolbar_button_color_fill_content_description"

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575

7676
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
7777
android:id="@+id/floating_toolbar_left"
78-
style="@style/Widget.Material3.FloatingToolbar.Vertical"
78+
style="@style/Widget.Material3.FloatingToolbar.Vertical.Vibrant"
7979
android:layout_width="wrap_content"
8080
android:layout_height="wrap_content"
8181
android:layout_gravity="left|center"
@@ -84,8 +84,7 @@
8484
android:id="@+id/floating_toolbar_child_left"
8585
android:layout_width="match_parent"
8686
android:layout_height="wrap_content"
87-
android:layout_gravity="center"
88-
android:orientation="vertical">
87+
android:layout_gravity="center">
8988
<include layout="@layout/cat_floating_toolbar_content" />
9089
</LinearLayout>
9190
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
@@ -100,23 +99,21 @@
10099
android:id="@+id/floating_toolbar_child_right"
101100
android:layout_width="match_parent"
102101
android:layout_height="wrap_content"
103-
android:layout_gravity="center"
104-
android:orientation="vertical">
102+
android:layout_gravity="center">
105103
<include layout="@layout/cat_floating_toolbar_content" />
106104
</LinearLayout>
107105
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
108106

109107
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
110108
android:id="@+id/floating_toolbar_bottom"
111-
style="@style/Widget.Material3.FloatingToolbar.Horizontal"
109+
style="@style/Widget.Material3.FloatingToolbar.Horizontal.Vibrant"
112110
android:layout_width="wrap_content"
113111
android:layout_height="wrap_content">
114112
<LinearLayout
115113
android:id="@+id/floating_toolbar_child_bottom"
116114
android:layout_width="match_parent"
117115
android:layout_height="wrap_content"
118-
android:layout_gravity="center"
119-
android:orientation="horizontal">
116+
android:layout_gravity="center">
120117
<include layout="@layout/cat_floating_toolbar_content" />
121118
</LinearLayout>
122119
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>

‎lib/java/com/google/android/material/floatingtoolbar/res/color/m3_floating_toolbar_vibrant_icon_button_container_color_selector.xml

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 2024 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="?attr/colorOnSurface" android:alpha="@dimen/material_emphasis_disabled_background" android:state_enabled="false"/>
20+
<!-- Checkable, checked state -->
21+
<item android:color="?attr/colorSurfaceContainer" android:state_checkable="true" android:state_checked="true"/>
22+
<!-- Default, Enabled state -->
23+
<item android:color="@android:color/transparent"/>
24+
</selector>

‎lib/java/com/google/android/material/floatingtoolbar/res/color/m3_floating_toolbar_vibrant_icon_button_text_color_selector.xml

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 2024 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="?attr/colorOnSurface" android:alpha="@dimen/material_emphasis_disabled_background" android:state_enabled="false"/>
20+
<!-- Checkable, checked state -->
21+
<item android:color="?attr/colorOnSurface" android:state_checkable="true" android:state_checked="true"/>
22+
<!-- Default, Enabled state -->
23+
<item android:color="?attr/colorOnPrimaryContainer"/>
24+
</selector>

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
Note that layout_* attributes break when set via a default style. Always set this style
3131
explicitly on the layout to ensure that layout_* attributes are set properly. -->
3232
<style name="Widget.Material3.FloatingToolbar.Horizontal" parent="Base.Widget.Material3.FloatingToolbar">
33+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingToolbar.Horizontal</item>
3334
<item name="android:layout_gravity">bottom|center</item>
3435
<item name="android:paddingStart">@dimen/m3_comp_toolbar_floating_container_leading_space</item>
3536
<item name="android:paddingEnd">@dimen/m3_comp_toolbar_floating_container_trailing_space</item>
@@ -39,6 +40,7 @@
3940
Note that layout_* attributes break when set via a default style. Always set this style
4041
explicitly on the layout to ensure that layout_* attributes are set properly. -->
4142
<style name="Widget.Material3.FloatingToolbar.Horizontal.Vibrant">
43+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingToolbar.Horizontal.Vibrant</item>
4244
<item name="backgroundTint">@macro/m3_comp_toolbar_floating_vibrant_container_color</item>
4345
</style>
4446

@@ -47,6 +49,7 @@
4749
layout_* attributes break when set via a default style. Always set this style explicitly on
4850
the layout to ensure that layout_* attributes are set properly. -->
4951
<style name="Widget.Material3.FloatingToolbar.Vertical" parent="Base.Widget.Material3.FloatingToolbar">
52+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingToolbar.Vertical</item>
5053
<item name="android:layout_gravity">right|center</item>
5154
<item name="android:paddingTop">@dimen/m3_comp_toolbar_floating_container_leading_space</item>
5255
<item name="android:paddingBottom">@dimen/m3_comp_toolbar_floating_container_trailing_space</item>
@@ -57,7 +60,70 @@
5760
layout_* attributes break when set via a default style. Always set this style explicitly on
5861
the layout to ensure that layout_* attributes are set properly. -->
5962
<style name="Widget.Material3.FloatingToolbar.Vertical.Vibrant">
63+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingToolbar.Vertical.Vibrant</item>
6064
<item name="backgroundTint">@macro/m3_comp_toolbar_floating_vibrant_container_color</item>
6165
</style>
6266

67+
<!-- Style for icon buttons within Floating Toolbars. This style is
68+
automatically set on all buttons which use ?attr/materialIconButtonStyle
69+
for their button style and are children of a Floating Toolbar. -->
70+
<style name="Widget.Material3.FloatingToolbar.IconButton" parent="Widget.Material3.Button.IconButton"/>
71+
72+
<!-- Style for icon buttons within Vibrant Floating Toolbars. This style is
73+
automatically set on all buttons which use ?attr/materialIconButtonStyle
74+
for their button style and are children of a Vibrant Floating Toolbar. -->
75+
<style name="Widget.Material3.FloatingToolbar.IconButton.Vibrant" parent="Widget.Material3.Button.IconButton.Filled.Tonal">
76+
<item name="android:textColor">@color/m3_floating_toolbar_vibrant_icon_button_text_color_selector</item>
77+
<item name="backgroundTint">@color/m3_floating_toolbar_vibrant_icon_button_container_color_selector</item>
78+
<item name="iconTint">@color/m3_floating_toolbar_vibrant_icon_button_text_color_selector</item>
79+
</style>
80+
81+
<!-- Theme overlay to be set on Horizontal Floating Toolbars. Sets the
82+
orientation of children within the toolbar to vertical to ensure that the
83+
children of the toolbar are displayed properly. In order for the
84+
orientation in this theme overlay to take effect, the android:orientation
85+
attribute should not be set directly on the child. Only takes effect on
86+
children that support android:orientation, such as a LinearLayout. -->
87+
<style name="ThemeOverlay.Material3.FloatingToolbar.Horizontal" parent="">
88+
<item name="android:orientation">horizontal</item>
89+
</style>
90+
91+
<!-- Theme overlay to be set on Horizontal Vibrant Floating Toolbars. Sets the
92+
orientation of children within the toolbar to vertical to ensure that the
93+
children of the toolbar are displayed properly. In order for the
94+
orientation in this theme overlay to take effect, the android:orientation
95+
attribute should not be set directly on the child. Only takes effect on
96+
children that support android:orientation, such as a LinearLayout. Also
97+
sets icon buttons which use ?attr/materialIconButtonStyle to a vibrant
98+
icon button style variant. -->
99+
<style name="ThemeOverlay.Material3.FloatingToolbar.Horizontal.Vibrant">
100+
<item name="materialIconButtonStyle">
101+
@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant
102+
</item>
103+
</style>
104+
105+
<!-- Theme overlay to be set on Vertical Floating Toolbars. Sets the
106+
orientation of children within the toolbar to vertical to ensure that the
107+
children of the toolbar are displayed properly. In order for the
108+
orientation in this theme overlay to take effect, the android:orientation
109+
attribute should not be set directly on the child. Only takes effect on
110+
children that support android:orientation, such as a LinearLayout. -->
111+
<style name="ThemeOverlay.Material3.FloatingToolbar.Vertical" parent="">
112+
<item name="android:orientation">vertical</item>
113+
</style>
114+
115+
<!-- Theme overlay to be set on Vertical Vibrant Floating Toolbars. Sets the
116+
orientation of children within the toolbar to vertical to ensure that
117+
the children of the toolbar are displayed properly. In order for the
118+
orientation in this theme overlay to take effect, the
119+
android:orientation attribute should not be set directly on the child.
120+
Only takes effect on children that support android:orientation, such as
121+
a LinearLayout. Also sets icon buttons which use
122+
?attr/materialIconButtonStyle to a vibrant icon button style variant. -->
123+
<style name="ThemeOverlay.Material3.FloatingToolbar.Vertical.Vibrant">
124+
<item name="materialIconButtonStyle">
125+
@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant
126+
</item>
127+
</style>
128+
63129
</resources>

0 commit comments

Comments
 (0)