Skip to content

Commit acc7569

Browse files
pekingmeafohrman
pekingme
authored and
afohrman
committed
[FAB] Added "Small" styles with new shape system.
PiperOrigin-RevId: 450003295
1 parent 78d2c1f commit acc7569

File tree

8 files changed

+80
-1
lines changed

8 files changed

+80
-1
lines changed

‎docs/components/FloatingActionButton.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,14 @@ Or, you can set a custom size via the `app:fabCustomSize` attribute. If set,
9494
`app:fabSize` will be ignored, unless the custom size is cleared via the
9595
`clearCustomSize` method.
9696

97+
If you'd like to use the small FAB, apply one of these style attributes:
98+
99+
* `?attr/floatingActionButtonSmallStyle`
100+
* `?attr/floatingActionButtonSmallPrimaryStyle`
101+
* `?attr/floatingActionButtonSmallSecondaryStyle`
102+
* `?attr/floatingActionButtonSmallTertiaryStyle`
103+
* `?attr/floatingActionButtonSmallSurfaceStyle`
104+
97105
If you'd like to use the large FAB, apply one of these style attributes:
98106

99107
* `?attr/floatingActionButtonLargeStyle`
@@ -198,7 +206,7 @@ In the layout:
198206

199207
<com.google.android.material.floatingactionbutton.FloatingActionButton
200208
...
201-
app:fabSize="mini"/>
209+
style="?attr/floatingActionButtonSmallStyle"/>
202210

203211
</androidx.coordinatorlayout.widget.CoordinatorLayout>
204212
```

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,11 @@
9898
<item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
9999
<item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
100100
<item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
101+
<item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
102+
<item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
103+
<item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
104+
<item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
105+
<item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
101106
<item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
102107
<item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
103108
<item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>
@@ -326,6 +331,11 @@
326331
<item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
327332
<item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
328333
<item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
334+
<item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
335+
<item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
336+
<item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
337+
<item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
338+
<item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
329339
<item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
330340
<item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
331341
<item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
<public name="floatingActionButtonSecondaryStyle" type="attr"/>
3333
<public name="floatingActionButtonTertiaryStyle" type="attr"/>
3434
<public name="floatingActionButtonSurfaceStyle" type="attr"/>
35+
<public name="floatingActionButtonSmallStyle" type="attr"/>
36+
<public name="floatingActionButtonSmallPrimaryStyle" type="attr"/>
37+
<public name="floatingActionButtonSmallSecondaryStyle" type="attr"/>
38+
<public name="floatingActionButtonSmallTertiaryStyle" type="attr"/>
39+
<public name="floatingActionButtonSmallSurfaceStyle" type="attr"/>
3540
<public name="floatingActionButtonLargeStyle" type="attr"/>
3641
<public name="floatingActionButtonLargePrimaryStyle" type="attr"/>
3742
<public name="floatingActionButtonLargeSecondaryStyle" type="attr"/>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,21 @@
108108
<!-- Style to use for Surface FloatingActionButtons in this theme. -->
109109
<attr name="floatingActionButtonSurfaceStyle" format="reference"/>
110110

111+
<!-- Style to use for Small FloatingActionButtons in this theme. -->
112+
<attr name="floatingActionButtonSmallStyle" format="reference"/>
113+
114+
<!-- Style to use for Small Primary color FloatingActionButtons in this theme. -->
115+
<attr name="floatingActionButtonSmallPrimaryStyle" format="reference"/>
116+
117+
<!-- Style to use for Small Secondary color FloatingActionButtons in this theme. -->
118+
<attr name="floatingActionButtonSmallSecondaryStyle" format="reference"/>
119+
120+
<!-- Style to use for Small Tertiary color FloatingActionButtons in this theme. -->
121+
<attr name="floatingActionButtonSmallTertiaryStyle" format="reference"/>
122+
123+
<!-- Style to use for Small Surface color FloatingActionButtons in this theme. -->
124+
<attr name="floatingActionButtonSmallSurfaceStyle" format="reference"/>
125+
111126
<!-- Style to use for Large FloatingActionButtons in this theme. -->
112127
<attr name="floatingActionButtonLargeStyle" format="reference"/>
113128

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@
5959
<dimen name="m3_extended_fab_top_padding">8dp</dimen>
6060
<dimen name="m3_extended_fab_min_height">56dp</dimen>
6161

62+
<dimen name="m3_small_fab_size">40dp</dimen>
63+
<dimen name="m3_small_fab_max_image_size">24dp</dimen>
6264
<dimen name="m3_large_fab_size">96dp</dimen>
6365
<dimen name="m3_large_fab_max_image_size">36dp</dimen>
6466

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,30 @@
192192
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Surface</item>
193193
</style>
194194

195+
<!-- M3 Small FABs -->
196+
<style name="Base.Widget.Material3.FloatingActionButton.Small" parent="Base.Widget.Material3.FloatingActionButton">
197+
<item name="fabCustomSize">@dimen/m3_small_fab_size</item>
198+
<item name="maxImageSize">@dimen/m3_small_fab_max_image_size</item>
199+
<item name="shapeAppearance">?attr/shapeAppearanceCornerMedium</item>
200+
<item name="shapeAppearanceOverlay">@null</item>
201+
</style>
202+
203+
<style name="Widget.Material3.FloatingActionButton.Small.Primary" parent="Base.Widget.Material3.FloatingActionButton.Small">
204+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Primary</item>
205+
</style>
206+
207+
<style name="Widget.Material3.FloatingActionButton.Small.Secondary" parent="Base.Widget.Material3.FloatingActionButton.Small">
208+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Secondary</item>
209+
</style>
210+
211+
<style name="Widget.Material3.FloatingActionButton.Small.Tertiary" parent="Base.Widget.Material3.FloatingActionButton.Small">
212+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Tertiary</item>
213+
</style>
214+
215+
<style name="Widget.Material3.FloatingActionButton.Small.Surface" parent="Base.Widget.Material3.FloatingActionButton.Small">
216+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Surface</item>
217+
</style>
218+
195219
<!-- M3 Large FABs -->
196220
<style name="Base.Widget.Material3.FloatingActionButton.Large" parent="Base.Widget.Material3.FloatingActionButton">
197221
<item name="fabCustomSize">@dimen/m3_large_fab_size</item>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,11 @@
112112
<item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
113113
<item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
114114
<item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
115+
<item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
116+
<item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
117+
<item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
118+
<item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
119+
<item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
115120
<item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
116121
<item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
117122
<item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>
@@ -342,6 +347,11 @@
342347
<item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
343348
<item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
344349
<item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
350+
<item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
351+
<item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
352+
<item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
353+
<item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
354+
<item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
345355
<item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
346356
<item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
347357
<item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>

‎lib/javatests/com/google/android/material/theme/ThemeTest.java‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,11 @@ public class ThemeTest {
362362
R.attr.floatingActionButtonSecondaryStyle,
363363
R.attr.floatingActionButtonTertiaryStyle,
364364
R.attr.floatingActionButtonSurfaceStyle,
365+
R.attr.floatingActionButtonSmallStyle,
366+
R.attr.floatingActionButtonSmallPrimaryStyle,
367+
R.attr.floatingActionButtonSmallSecondaryStyle,
368+
R.attr.floatingActionButtonSmallTertiaryStyle,
369+
R.attr.floatingActionButtonSmallSurfaceStyle,
365370
R.attr.floatingActionButtonLargeStyle,
366371
R.attr.floatingActionButtonLargePrimaryStyle,
367372
R.attr.floatingActionButtonLargeSecondaryStyle,

0 commit comments

Comments
 (0)