[FAB] Added "Small" styles with new shape system.

PiperOrigin-RevId: 450003295
material-components · May 23, 2022 · acc7569 · acc7569
1 parent 78d2c1f
commit acc7569
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 1 deletion.
diff --git a/docs/components/FloatingActionButton.md b/docs/components/FloatingActionButton.md
@@ -94,6 +94,14 @@ Or, you can set a custom size via the `app:fabCustomSize` attribute. If set,
 `app:fabSize` will be ignored, unless the custom size is cleared via the
 `clearCustomSize` method.
 
+If you'd like to use the small FAB, apply one of these style attributes:
+
+*   `?attr/floatingActionButtonSmallStyle`
+*   `?attr/floatingActionButtonSmallPrimaryStyle`
+*   `?attr/floatingActionButtonSmallSecondaryStyle`
+*   `?attr/floatingActionButtonSmallTertiaryStyle`
+*   `?attr/floatingActionButtonSmallSurfaceStyle`
+
 If you'd like to use the large FAB, apply one of these style attributes:
 
 *   `?attr/floatingActionButtonLargeStyle`
@@ -198,7 +206,7 @@ In the layout:
 
   <com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
-      app:fabSize="mini"/>
+      style="?attr/floatingActionButtonSmallStyle"/>
 
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
 ```

diff --git a/lib/java/com/google/android/material/dialog/res/values/themes_base.xml b/lib/java/com/google/android/material/dialog/res/values/themes_base.xml
@@ -98,6 +98,11 @@
     <item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
     <item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
     <item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
+    <item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
+    <item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
+    <item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
+    <item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
+    <item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
     <item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
     <item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
     <item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>
@@ -326,6 +331,11 @@
     <item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
     <item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
     <item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
+    <item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
+    <item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
+    <item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
+    <item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
+    <item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
     <item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
     <item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
     <item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>

diff --git a/lib/java/com/google/android/material/floatingactionbutton/res-public/values/public.xml b/lib/java/com/google/android/material/floatingactionbutton/res-public/values/public.xml
@@ -32,6 +32,11 @@
   <public name="floatingActionButtonSecondaryStyle" type="attr"/>
   <public name="floatingActionButtonTertiaryStyle" type="attr"/>
   <public name="floatingActionButtonSurfaceStyle" type="attr"/>
+  <public name="floatingActionButtonSmallStyle" type="attr"/>
+  <public name="floatingActionButtonSmallPrimaryStyle" type="attr"/>
+  <public name="floatingActionButtonSmallSecondaryStyle" type="attr"/>
+  <public name="floatingActionButtonSmallTertiaryStyle" type="attr"/>
+  <public name="floatingActionButtonSmallSurfaceStyle" type="attr"/>
   <public name="floatingActionButtonLargeStyle" type="attr"/>
   <public name="floatingActionButtonLargePrimaryStyle" type="attr"/>
   <public name="floatingActionButtonLargeSecondaryStyle" type="attr"/>

diff --git a/lib/java/com/google/android/material/floatingactionbutton/res/values/attrs.xml b/lib/java/com/google/android/material/floatingactionbutton/res/values/attrs.xml
@@ -108,6 +108,21 @@
   <!-- Style to use for Surface FloatingActionButtons in this theme. -->
   <attr name="floatingActionButtonSurfaceStyle" format="reference"/>
 
+  <!-- Style to use for Small FloatingActionButtons in this theme. -->
+  <attr name="floatingActionButtonSmallStyle" format="reference"/>
+
+  <!-- Style to use for Small Primary color FloatingActionButtons in this theme. -->
+  <attr name="floatingActionButtonSmallPrimaryStyle" format="reference"/>
+
+  <!-- Style to use for Small Secondary color FloatingActionButtons in this theme. -->
+  <attr name="floatingActionButtonSmallSecondaryStyle" format="reference"/>
+
+  <!-- Style to use for Small Tertiary color FloatingActionButtons in this theme. -->
+  <attr name="floatingActionButtonSmallTertiaryStyle" format="reference"/>
+
+  <!-- Style to use for Small Surface color FloatingActionButtons in this theme. -->
+  <attr name="floatingActionButtonSmallSurfaceStyle" format="reference"/>
+
   <!-- Style to use for Large FloatingActionButtons in this theme. -->
   <attr name="floatingActionButtonLargeStyle" format="reference"/>
 

diff --git a/lib/java/com/google/android/material/floatingactionbutton/res/values/dimens.xml b/lib/java/com/google/android/material/floatingactionbutton/res/values/dimens.xml
@@ -59,6 +59,8 @@
   <dimen name="m3_extended_fab_top_padding">8dp</dimen>
   <dimen name="m3_extended_fab_min_height">56dp</dimen>
 
+  <dimen name="m3_small_fab_size">40dp</dimen>
+  <dimen name="m3_small_fab_max_image_size">24dp</dimen>
   <dimen name="m3_large_fab_size">96dp</dimen>
   <dimen name="m3_large_fab_max_image_size">36dp</dimen>
 

diff --git a/lib/java/com/google/android/material/floatingactionbutton/res/values/styles.xml b/lib/java/com/google/android/material/floatingactionbutton/res/values/styles.xml
@@ -192,6 +192,30 @@
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Surface</item>
   </style>
 
+  <!-- M3 Small FABs -->
+  <style name="Base.Widget.Material3.FloatingActionButton.Small" parent="Base.Widget.Material3.FloatingActionButton">
+    <item name="fabCustomSize">@dimen/m3_small_fab_size</item>
+    <item name="maxImageSize">@dimen/m3_small_fab_max_image_size</item>
+    <item name="shapeAppearance">?attr/shapeAppearanceCornerMedium</item>
+    <item name="shapeAppearanceOverlay">@null</item>
+  </style>
+
+  <style name="Widget.Material3.FloatingActionButton.Small.Primary" parent="Base.Widget.Material3.FloatingActionButton.Small">
+    <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Primary</item>
+  </style>
+
+  <style name="Widget.Material3.FloatingActionButton.Small.Secondary" parent="Base.Widget.Material3.FloatingActionButton.Small">
+    <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Secondary</item>
+  </style>
+
+  <style name="Widget.Material3.FloatingActionButton.Small.Tertiary" parent="Base.Widget.Material3.FloatingActionButton.Small">
+    <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Tertiary</item>
+  </style>
+
+  <style name="Widget.Material3.FloatingActionButton.Small.Surface" parent="Base.Widget.Material3.FloatingActionButton.Small">
+    <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.FloatingActionButton.Surface</item>
+  </style>
+
   <!-- M3 Large FABs -->
   <style name="Base.Widget.Material3.FloatingActionButton.Large" parent="Base.Widget.Material3.FloatingActionButton">
     <item name="fabCustomSize">@dimen/m3_large_fab_size</item>

diff --git a/lib/java/com/google/android/material/theme/res/values/themes_base.xml b/lib/java/com/google/android/material/theme/res/values/themes_base.xml
@@ -112,6 +112,11 @@
     <item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
     <item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
     <item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
+    <item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
+    <item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
+    <item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
+    <item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
+    <item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
     <item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
     <item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
     <item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>
@@ -342,6 +347,11 @@
     <item name="floatingActionButtonSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Secondary</item>
     <item name="floatingActionButtonTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Tertiary</item>
     <item name="floatingActionButtonSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Surface</item>
+    <item name="floatingActionButtonSmallStyle">?attr/floatingActionButtonSmallPrimaryStyle</item>
+    <item name="floatingActionButtonSmallPrimaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Primary</item>
+    <item name="floatingActionButtonSmallSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Secondary</item>
+    <item name="floatingActionButtonSmallTertiaryStyle">@style/Widget.Material3.FloatingActionButton.Small.Tertiary</item>
+    <item name="floatingActionButtonSmallSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Small.Surface</item>
     <item name="floatingActionButtonLargeStyle">?attr/floatingActionButtonLargePrimaryStyle</item>
     <item name="floatingActionButtonLargePrimaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Primary</item>
     <item name="floatingActionButtonLargeSecondaryStyle">@style/Widget.Material3.FloatingActionButton.Large.Secondary</item>

diff --git a/lib/javatests/com/google/android/material/theme/ThemeTest.java b/lib/javatests/com/google/android/material/theme/ThemeTest.java
@@ -362,6 +362,11 @@ public class ThemeTest {
           R.attr.floatingActionButtonSecondaryStyle,
           R.attr.floatingActionButtonTertiaryStyle,
           R.attr.floatingActionButtonSurfaceStyle,
+          R.attr.floatingActionButtonSmallStyle,
+          R.attr.floatingActionButtonSmallPrimaryStyle,
+          R.attr.floatingActionButtonSmallSecondaryStyle,
+          R.attr.floatingActionButtonSmallTertiaryStyle,
+          R.attr.floatingActionButtonSmallSurfaceStyle,
           R.attr.floatingActionButtonLargeStyle,
           R.attr.floatingActionButtonLargePrimaryStyle,
           R.attr.floatingActionButtonLargeSecondaryStyle,