Skip to content

Commit b07e48b

Browse files
imhappiimhappi
committed
[FloatingToolbar] Update styles to consolidate horizontal/vertical styles to a single style
PiperOrigin-RevId: 709100303
1 parent 95025c6 commit b07e48b

File tree

9 files changed

+132
-180
lines changed

9 files changed

+132
-180
lines changed

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

Lines changed: 101 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -31,102 +31,118 @@
3131
app:title="@string/cat_floating_toolbar_title"/>
3232
</com.google.android.material.appbar.AppBarLayout>
3333

34-
<androidx.core.widget.NestedScrollView
34+
<androidx.core.widget.NestedScrollView
35+
android:layout_width="match_parent"
36+
android:layout_height="match_parent"
37+
app:layout_behavior="@string/appbar_scrolling_view_behavior">
38+
39+
<LinearLayout
40+
android:id="@+id/body_container"
3541
android:layout_width="match_parent"
36-
android:layout_height="match_parent"
37-
app:layout_behavior="@string/appbar_scrolling_view_behavior">
38-
<LinearLayout
39-
android:id="@+id/body_container"
40-
android:layout_width="match_parent"
42+
android:layout_height="wrap_content"
43+
android:gravity="center"
44+
android:orientation="vertical">
45+
46+
<TextView
47+
android:layout_width="wrap_content"
48+
android:layout_height="wrap_content"
49+
android:layout_marginBottom="4dp"
50+
android:text="@string/cat_floating_toolbar_orientation"
51+
android:textAppearance="?attr/textAppearanceBody1" />
52+
53+
<com.google.android.material.button.MaterialButtonToggleGroup
54+
android:layout_width="wrap_content"
4155
android:layout_height="wrap_content"
42-
android:gravity="center"
43-
android:orientation="vertical">
56+
app:selectionRequired="true"
57+
app:singleSelection="true">
4458

45-
<TextView
59+
<Button
60+
android:id="@+id/bottom_button"
61+
style="?attr/materialButtonOutlinedStyle"
4662
android:layout_width="wrap_content"
4763
android:layout_height="wrap_content"
48-
android:layout_marginBottom="4dp"
49-
android:text="@string/cat_floating_toolbar_orientation"
50-
android:textAppearance="?attr/textAppearanceBody1"/>
64+
android:text="@string/cat_floating_toolbar_orientation_bottom" />
5165

52-
<com.google.android.material.button.MaterialButtonToggleGroup
66+
<Button
67+
android:id="@+id/left_button"
68+
style="?attr/materialButtonOutlinedStyle"
5369
android:layout_width="wrap_content"
5470
android:layout_height="wrap_content"
55-
app:selectionRequired="true"
56-
app:singleSelection="true">
57-
<Button
58-
android:id="@+id/bottom_button"
59-
style="?attr/materialButtonOutlinedStyle"
60-
android:layout_width="wrap_content"
61-
android:layout_height="wrap_content"
62-
android:text="@string/cat_floating_toolbar_orientation_bottom" />
63-
<Button
64-
android:id="@+id/left_button"
65-
style="?attr/materialButtonOutlinedStyle"
66-
android:layout_width="wrap_content"
67-
android:layout_height="wrap_content"
68-
android:text="@string/cat_floating_toolbar_orientation_left" />
69-
<Button
70-
android:id="@+id/right_button"
71-
style="?attr/materialButtonOutlinedStyle"
72-
android:layout_width="wrap_content"
73-
android:layout_height="wrap_content"
74-
android:text="@string/cat_floating_toolbar_orientation_right" />
75-
</com.google.android.material.button.MaterialButtonToggleGroup>
76-
77-
<TextView
78-
android:id="@+id/body_text"
79-
android:layout_width="match_parent"
80-
android:layout_height="wrap_content"
81-
android:layout_margin="16dp"
82-
android:lineSpacingMultiplier="1.2"
83-
android:text="@string/cat_floating_toolbar_filler_text" />
71+
android:text="@string/cat_floating_toolbar_orientation_left" />
8472

85-
</LinearLayout>
86-
</androidx.core.widget.NestedScrollView>
73+
<Button
74+
android:id="@+id/right_button"
75+
style="?attr/materialButtonOutlinedStyle"
76+
android:layout_width="wrap_content"
77+
android:layout_height="wrap_content"
78+
android:text="@string/cat_floating_toolbar_orientation_right" />
79+
</com.google.android.material.button.MaterialButtonToggleGroup>
8780

88-
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
89-
android:id="@+id/floating_toolbar_left"
90-
style="@style/Widget.Material3.FloatingToolbar.Vertical.Vibrant"
91-
android:layout_width="wrap_content"
92-
android:layout_height="wrap_content"
93-
android:layout_gravity="left|center"
94-
android:visibility="gone">
95-
<LinearLayout
96-
android:id="@+id/floating_toolbar_child_left"
81+
<TextView
82+
android:id="@+id/body_text"
9783
android:layout_width="match_parent"
9884
android:layout_height="wrap_content"
99-
android:layout_gravity="center">
100-
<include layout="@layout/cat_floating_toolbar_content" />
101-
</LinearLayout>
102-
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
103-
104-
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
105-
android:id="@+id/floating_toolbar_right"
106-
style="@style/Widget.Material3.FloatingToolbar.Vertical"
107-
android:layout_width="wrap_content"
85+
android:layout_margin="16dp"
86+
android:lineSpacingMultiplier="1.2"
87+
android:text="@string/cat_floating_toolbar_filler_text" />
88+
89+
</LinearLayout>
90+
</androidx.core.widget.NestedScrollView>
91+
92+
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
93+
android:id="@+id/floating_toolbar_left"
94+
android:layout_width="wrap_content"
95+
android:layout_height="wrap_content"
96+
android:layout_gravity="left|center"
97+
android:layout_margin="16dp"
98+
android:visibility="gone">
99+
100+
<LinearLayout
101+
android:id="@+id/floating_toolbar_child_left"
102+
android:layout_width="match_parent"
108103
android:layout_height="wrap_content"
109-
android:visibility="gone">
110-
<LinearLayout
111-
android:id="@+id/floating_toolbar_child_right"
112-
android:layout_width="match_parent"
113-
android:layout_height="wrap_content"
114-
android:layout_gravity="center">
115-
<include layout="@layout/cat_floating_toolbar_content" />
116-
</LinearLayout>
117-
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
118-
119-
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
120-
android:id="@+id/floating_toolbar_bottom"
121-
style="@style/Widget.Material3.FloatingToolbar.Horizontal.Vibrant"
122-
android:layout_width="wrap_content"
123-
android:layout_height="wrap_content">
124-
<LinearLayout
125-
android:id="@+id/floating_toolbar_child_bottom"
126-
android:layout_width="match_parent"
127-
android:layout_height="wrap_content"
128-
android:layout_gravity="center">
129-
<include layout="@layout/cat_floating_toolbar_content" />
130-
</LinearLayout>
131-
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
104+
android:layout_gravity="center"
105+
android:orientation="vertical">
106+
107+
<include layout="@layout/cat_floating_toolbar_content" />
108+
</LinearLayout>
109+
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
110+
111+
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
112+
android:id="@+id/floating_toolbar_right"
113+
android:layout_width="wrap_content"
114+
android:layout_height="wrap_content"
115+
android:layout_gravity="right|center"
116+
android:layout_margin="16dp"
117+
android:visibility="gone">
118+
119+
<LinearLayout
120+
android:id="@+id/floating_toolbar_child_right"
121+
android:layout_width="match_parent"
122+
android:layout_height="wrap_content"
123+
android:layout_gravity="center"
124+
android:orientation="vertical">
125+
126+
<include layout="@layout/cat_floating_toolbar_content" />
127+
</LinearLayout>
128+
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
129+
130+
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
131+
android:id="@+id/floating_toolbar_bottom"
132+
style="?attr/floatingToolbarVibrantStyle"
133+
android:layout_width="wrap_content"
134+
android:layout_height="wrap_content"
135+
android:layout_gravity="bottom|center"
136+
android:layout_margin="16dp">
137+
138+
<LinearLayout
139+
android:id="@+id/floating_toolbar_child_bottom"
140+
android:layout_width="match_parent"
141+
android:layout_height="wrap_content"
142+
android:layout_gravity="center"
143+
android:orientation="horizontal">
144+
145+
<include layout="@layout/cat_floating_toolbar_content" />
146+
</LinearLayout>
147+
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
132148
</androidx.coordinatorlayout.widget.CoordinatorLayout>

‎docs/components/FloatingToolBar.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,10 @@ Here's what a typical layout would look like:
6464

6565
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
6666
android:id="@+id/floating_toolbar"
67-
style="@style/Widget.Material3.FloatingToolbar.Horizontal"
6867
android:layout_width="wrap_content"
69-
android:layout_height="wrap_content">
68+
android:layout_height="wrap_content"
69+
android:layout_gravity="bottom|center"
70+
android:layout_margin="16dp">
7071

7172
<!-- floating toolbar sample content -->
7273
<LinearLayout
@@ -175,14 +176,13 @@ The following is an anatomy diagram for the navigation rail:
175176

176177
#### Styles
177178

178-
**Element** | **Style**
179-
----------------- | -------------------------------------
180-
**Default style** | `Widget.Material3.FloatingToolbar.Horizontal`
181-
**Vertical style** | `Widget.Material3.FloatingToolbar.Vertical`
182-
**Horizontal Vibrant style** | `Widget.Material3.FloatingToolbar.Horizontal.Vibrant`
183-
**Vertical Vibrant style** | `Widget.Material3.FloatingToolbar.Vertical.Vibrant`
179+
**Element** | **Style**
180+
------------------ | ------------------------------------------
181+
**Standard style** | `Widget.Material3.FloatingToolbar`
182+
**Vibrant style** | `Widget.Material3.FloatingToolbar.Vibrant`
184183

185-
Default style theme attribute: `?attr/floatingToolbarStyle`
184+
Standard style theme attribute: `?attr/floatingToolbarStyle`
185+
Vibrant style theme attribute: `?attr/floatingToolbarVibrantStyle`
186186

187187
See the full list of
188188
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingtoolbar/res/values/styles.xml) and
@@ -231,10 +231,10 @@ all floating toolbars but do not affect other components:
231231
```xml
232232
<style name="Theme.App" parent="Theme.Material3.*">
233233
...
234-
<item name="floatingToolbarStyle">@style/Widget.App.FloatingToolbar.Horizontal</item>
234+
<item name="floatingToolbarStyle">@style/Widget.App.FloatingToolbar</item>
235235
</style>
236236

237-
<style name="Widget.App.FloatingToolbar.Horizontal" parent="Widget.Material3.FloatingToolbar.Horizontal">
237+
<style name="Widget.App.FloatingToolbar" parent="Widget.Material3.FloatingToolbar">
238238
<item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingToolbar</item>
239239
</style>
240240

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,8 @@
129129
<item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>
130130
<item name="floatingActionButtonLargeTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Tertiary</item>
131131
<item name="floatingActionButtonLargeSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Large.Surface</item>
132-
<item name="floatingToolbarStyle">@style/Widget.Material3.FloatingToolbar.Horizontal</item>
132+
<item name="floatingToolbarStyle">@style/Widget.Material3.FloatingToolbar</item>
133+
<item name="floatingToolbarVibrantStyle">@style/Widget.Material3.FloatingToolbar.Vibrant</item>
133134
<item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
134135
<item name="loadingIndicatorStyle">@style/Widget.Material3.LoadingIndicator</item>
135136
<item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>

‎lib/java/com/google/android/material/floatingtoolbar/FloatingToolbarLayout.java

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
* {@link android.view.ViewGroup}.
4848
*/
4949
public class FloatingToolbarLayout extends FrameLayout implements AttachedBehavior {
50-
private static final int DEF_STYLE_RES = R.style.Widget_Material3_FloatingToolbar_Horizontal;
50+
private static final int DEF_STYLE_RES = R.style.Widget_Material3_FloatingToolbar;
5151
@Nullable private Behavior behavior;
5252

5353
public FloatingToolbarLayout(@NonNull Context context) {

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616
-->
1717
<resources>
1818
<public name="floatingToolbarStyle" type="attr"/>
19-
<public name="Widget.Material3.FloatingToolbar.Horizontal" type="style"/>
20-
<public name="Widget.Material3.FloatingToolbar.Horizontal.Vibrant" type="style"/>
21-
<public name="Widget.Material3.FloatingToolbar.Vertical" type="style"/>
22-
<public name="Widget.Material3.FloatingToolbar.Vertical.Vibrant" type="style"/>
19+
<public name="floatingToolbarVibrantStyle" type="attr"/>
20+
<public name="Widget.Material3.FloatingToolbar" type="style"/>
21+
<public name="Widget.Material3.FloatingToolbar.Vibrant" type="style"/>
2322
</resources>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,12 @@
1515
~ limitations under the License.
1616
-->
1717
<resources>
18-
<!-- Style to use for FloatingToolbars in this theme. -->
18+
<!-- Style to use for standard FloatingToolbars in this theme. -->
1919
<attr name="floatingToolbarStyle" format="reference"/>
2020

21+
<!-- Style to use for vibrant FloatingToolbars in this theme. -->
22+
<attr name="floatingToolbarVibrantStyle" format="reference"/>
23+
2124
<declare-styleable name="FloatingToolbar">
2225
<!-- Color of the floating toolbar container. -->
2326
<attr name="backgroundTint"/>

0 commit comments

Comments
 (0)