Skip to content

Commit 447fd02

Browse files
pekingmepekingme
committed
[Shape] Added new attributes in Material3 themes.
PiperOrigin-RevId: 718524523
1 parent 40ec5c5 commit 447fd02

File tree

6 files changed

+136
-14
lines changed

6 files changed

+136
-14
lines changed

‎docs/theming/Shape.md

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,18 @@ application.
5353

5454
#### Shape styles
5555

56-
Style Name | Description | Corner Sizes
57-
--------------------------------------------- | ------------------------------------- | ------------
58-
`ShapeAppearance.Material3.Corner.None` | No corners (i.e., fully rectangular) | 0dp
59-
`ShapeAppearance.Material3.Corner.ExtraSmall` | Shape with extra small corner size | 4dp
60-
`ShapeAppearance.Material3.Corner.Small` | Shape with small corner size | 8dp
61-
`ShapeAppearance.Material3.Corner.Medium` | Shape with medium corner size | 12dp
62-
`ShapeAppearance.Material3.Corner.Large` | Shape with large corner size | 16dp
63-
`ShapeAppearance.Material3.Corner.ExtraLarge` | Shape with extra large corner size | 28dp
64-
`ShapeAppearance.Material3.Corner.Full` | Shape with full corner size </br> i.e., circle with rounded corners or rhombus with cut corners | 50%
56+
Style Name | Description | Corner Sizes
57+
------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | ------------
58+
`ShapeAppearance.Material3.Corner.None` | No corners (i.e., fully rectangular) | 0dp
59+
`ShapeAppearance.Material3.Corner.ExtraSmall` | Shape with extra small corner size | 4dp
60+
`ShapeAppearance.Material3.Corner.Small` | Shape with small corner size | 8dp
61+
`ShapeAppearance.Material3.Corner.Medium` | Shape with medium corner size | 12dp
62+
`ShapeAppearance.Material3.Corner.Large` | Shape with large corner size | 16dp
63+
`ShapeAppearance.Material3.Corner.LargeIncreased` | Shape with increased large corner size | 20dp
64+
`ShapeAppearance.Material3.Corner.ExtraLarge` | Shape with extra large corner size | 28dp
65+
`ShapeAppearance.Material3.Corner.ExtraLargeIncreased` | Shape with increased extra large corner size | 32dp
66+
`ShapeAppearance.Material3.Corner.ExtraExtraLarge` | Shape with extra extra large corner size | 48dp
67+
`ShapeAppearance.Material3.Corner.Full` | Shape with full corner size </br> i.e., circle with rounded corners or rhombus with cut corners | 50%
6568

6669
These are the shape styles providing the Material 3 shape scale. The shape
6770
families in these styles (i.e., `cornerFamily`) are mapped to the theme
@@ -81,6 +84,20 @@ Attribute Name | Description
8184
`shapeAppearanceCornerLarge` | The style reference that contains shape appearance with large corners | `ShapeAppearance.Material3.Corner.Large`
8285
`shapeAppearanceCornerExtraLarge` | The style reference that contains shape appearance with extra large corners | `ShapeAppearance.Material3.Corner.ExtraLarge`
8386

87+
### Corner family and corner sizes
88+
89+
Shape role | Android attribute | values
90+
--------------------------------- | ---------------------------------- | -------
91+
Corner Family | shapeCornerFamily | Rounded
92+
Corner Size Extra Small | shapeCornerSizeExtraSmall | 4dp
93+
Corner Size Small | shapeCornerSizeSmall | 8dp
94+
Corner Size Medium | shapeCornerSizeMedium | 12dp
95+
Corner Size Large | shapeCornerSizeLarge | 16dp
96+
Corner Size Large Increased | shapeCornerSizeLargeIncreased | 20dp
97+
Corner Size Extra Large | shapeCornerSizeExtraLarge | 28dp
98+
Corner Size Extra Large Increased | shapeCornerSizeExtraLargeIncreased | 32dp
99+
Corner Size Extra Extra Large | shapeCornerSizeExtraExtraLarge | 48dp
100+
84101
Aside from defining these attributes in your theme, you likely will not need to
85102
reference these attributes at all; the widget styles are already mapped to the
86103
appropriate theme attribute to create a seamless shape theming experience. To

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,23 @@
2626
<public name="shapeAppearanceLargeComponent" type="attr"/>
2727

2828
<public name="shapeCornerFamily" type="attr"/>
29+
<public name="shapeCornerSizeExtraSmall" type="attr"/>
30+
<public name="shapeCornerSizeSmall" type="attr"/>
31+
<public name="shapeCornerSizeMedium" type="attr"/>
32+
<public name="shapeCornerSizeLarge" type="attr"/>
33+
<public name="shapeCornerSizeLargeIncreased" type="attr"/>
34+
<public name="shapeCornerSizeExtraLarge" type="attr"/>
35+
<public name="shapeCornerSizeExtraLargeIncreased" type="attr"/>
36+
<public name="shapeCornerSizeExtraExtraLarge" type="attr"/>
37+
2938
<public name="shapeAppearanceCornerExtraSmall" type="attr"/>
3039
<public name="shapeAppearanceCornerSmall" type="attr"/>
3140
<public name="shapeAppearanceCornerMedium" type="attr"/>
3241
<public name="shapeAppearanceCornerLarge" type="attr"/>
42+
<public name="shapeAppearanceCornerLargeIncreased" type="attr"/>
3343
<public name="shapeAppearanceCornerExtraLarge" type="attr"/>
44+
<public name="shapeAppearanceCornerExtraLargeIncreased" type="attr"/>
45+
<public name="shapeAppearanceCornerExtraExtraLarge" type="attr"/>
3446

3547
<public name="cornerSize" type="attr"/>
3648
<public name="cornerSizeTopLeft" type="attr"/>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,23 @@
7474
<attr name="widthChange" format="dimension|fraction"/>
7575
</declare-styleable>
7676

77+
<!-- The size of extra small corners. -->
78+
<attr name="shapeCornerSizeExtraSmall" format="dimension|fraction"/>
79+
<!-- The size of small corners. -->
80+
<attr name="shapeCornerSizeSmall" format="dimension|fraction"/>
81+
<!-- The size of medium corners. -->
82+
<attr name="shapeCornerSizeMedium" format="dimension|fraction"/>
83+
<!-- The size of large corners. -->
84+
<attr name="shapeCornerSizeLarge" format="dimension|fraction"/>
85+
<!-- The size of corners that are slightly larger than "Large". -->
86+
<attr name="shapeCornerSizeLargeIncreased" format="dimension|fraction"/>
87+
<!-- The size of extra large corners. -->
88+
<attr name="shapeCornerSizeExtraLarge" format="dimension|fraction"/>
89+
<!-- The size of corners that are slightly larger than "Extra Large". -->
90+
<attr name="shapeCornerSizeExtraLargeIncreased" format="dimension|fraction"/>
91+
<!-- The size of extra extra large corners. -->
92+
<attr name="shapeCornerSizeExtraExtraLarge" format="dimension|fraction"/>
93+
7794
<!-- Shape appearance style reference with extra small corners. -->
7895
<attr name="shapeAppearanceCornerExtraSmall" format="reference"/>
7996
<!-- Shape appearance style reference with small corners. -->
@@ -82,8 +99,14 @@
8299
<attr name="shapeAppearanceCornerMedium" format="reference"/>
83100
<!-- Shape appearance style reference with large corners. -->
84101
<attr name="shapeAppearanceCornerLarge" format="reference"/>
102+
<!-- Shape appearance style reference with corners that are slightly larger than "Large". -->
103+
<attr name="shapeAppearanceCornerLargeIncreased" format="reference"/>
85104
<!-- Shape appearance style reference with extra large corners. -->
86105
<attr name="shapeAppearanceCornerExtraLarge" format="reference"/>
106+
<!-- Shape appearance style reference with corners that are slightly larger than "Extra Large". -->
107+
<attr name="shapeAppearanceCornerExtraLargeIncreased" format="reference"/>
108+
<!-- Shape appearance style reference with extra extra large corners. -->
109+
<attr name="shapeAppearanceCornerExtraExtraLarge" format="reference"/>
87110

88111
<!-- Deprecated: Use shapeAppearanceCorner* attributes. -->
89112
<!-- Shape appearance style reference for small components. -->

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

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,38 @@
3434
</style>
3535

3636
<style name="ShapeAppearance.Material3.Corner.None" parent="ShapeAppearance.M3.Sys.Shape.Corner.None"/>
37-
<style name="ShapeAppearance.Material3.Corner.ExtraSmall" parent="ShapeAppearance.M3.Sys.Shape.Corner.ExtraSmall"/>
38-
<style name="ShapeAppearance.Material3.Corner.Small" parent="ShapeAppearance.M3.Sys.Shape.Corner.Small"/>
39-
<style name="ShapeAppearance.Material3.Corner.Medium" parent="ShapeAppearance.M3.Sys.Shape.Corner.Medium"/>
40-
<style name="ShapeAppearance.Material3.Corner.Large" parent="ShapeAppearance.M3.Sys.Shape.Corner.Large"/>
41-
<style name="ShapeAppearance.Material3.Corner.ExtraLarge" parent="ShapeAppearance.M3.Sys.Shape.Corner.ExtraLarge"/>
37+
<style name="ShapeAppearance.Material3.Corner.ExtraSmall" parent="">
38+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
39+
<item name="cornerSize">?attr/shapeCornerSizeExtraSmall</item>
40+
</style>
41+
<style name="ShapeAppearance.Material3.Corner.Small" parent="">
42+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
43+
<item name="cornerSize">?attr/shapeCornerSizeSmall</item>
44+
</style>
45+
<style name="ShapeAppearance.Material3.Corner.Medium" parent="">
46+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
47+
<item name="cornerSize">?attr/shapeCornerSizeMedium</item>
48+
</style>
49+
<style name="ShapeAppearance.Material3.Corner.Large" parent="">
50+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
51+
<item name="cornerSize">?attr/shapeCornerSizeLarge</item>
52+
</style>
53+
<style name="ShapeAppearance.Material3.Corner.LargeIncreased" parent="">
54+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
55+
<item name="cornerSize">?attr/shapeCornerSizeLargeIncreased</item>
56+
</style>
57+
<style name="ShapeAppearance.Material3.Corner.ExtraLarge" parent="">
58+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
59+
<item name="cornerSize">?attr/shapeCornerSizeExtraLarge</item>
60+
</style>
61+
<style name="ShapeAppearance.Material3.Corner.ExtraLargeIncreased" parent="">
62+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
63+
<item name="cornerSize">?attr/shapeCornerSizeExtraLargeIncreased</item>
64+
</style>
65+
<style name="ShapeAppearance.Material3.Corner.ExtraExtraLarge" parent="">
66+
<item name="cornerFamily">?attr/shapeCornerFamily</item>
67+
<item name="cornerSize">?attr/shapeCornerSizeExtraExtraLarge</item>
68+
</style>
4269
<style name="ShapeAppearance.Material3.Corner.Full" parent="ShapeAppearance.M3.Sys.Shape.Corner.Full"/>
4370

4471
<style name="ShapeAppearanceOverlay.Material3.Corner.Top" parent="">

‎lib/java/com/google/android/material/shape/res/values/tokens.xml

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,5 +75,26 @@
7575
<item name="cornerFamily">rounded</item>
7676
<item name="cornerSize">0dp</item>
7777
</style>
78+
<style name="ShapeAppearance.M3.Sys.Shape.Corner.LargeIncreased" parent="">
79+
<item name="cornerFamily">rounded</item>
80+
<item name="cornerSize">20dp</item>
81+
</style>
82+
<style name="ShapeAppearance.M3.Sys.Shape.Corner.ExtraLargeIncreased" parent="">
83+
<item name="cornerFamily">rounded</item>
84+
<item name="cornerSize">32dp</item>
85+
</style>
86+
<style name="ShapeAppearance.M3.Sys.Shape.Corner.ExtraExtraLarge" parent="">
87+
<item name="cornerFamily">rounded</item>
88+
<item name="cornerSize">48dp</item>
89+
</style>
90+
<dimen name="m3_sys_shape_corner_value_none">0dp</dimen>
91+
<dimen name="m3_sys_shape_corner_value_extra_small">4dp</dimen>
92+
<dimen name="m3_sys_shape_corner_value_small">8dp</dimen>
93+
<dimen name="m3_sys_shape_corner_value_medium">12dp</dimen>
94+
<dimen name="m3_sys_shape_corner_value_large">16dp</dimen>
95+
<dimen name="m3_sys_shape_corner_value_large_increased">20dp</dimen>
96+
<dimen name="m3_sys_shape_corner_value_extra_large">28dp</dimen>
97+
<dimen name="m3_sys_shape_corner_value_extra_large_increased">32dp</dimen>
98+
<dimen name="m3_sys_shape_corner_value_extra_extra_large">48dp</dimen>
7899

79100
</resources>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,11 +259,22 @@
259259

260260
<!-- Shape attributes. -->
261261
<item name="shapeCornerFamily">@integer/m3_sys_shape_corner_full_corner_family</item>
262+
<item name="shapeCornerSizeExtraSmall">@dimen/m3_sys_shape_corner_value_extra_small</item>
263+
<item name="shapeCornerSizeSmall">@dimen/m3_sys_shape_corner_value_small</item>
264+
<item name="shapeCornerSizeMedium">@dimen/m3_sys_shape_corner_value_medium</item>
265+
<item name="shapeCornerSizeLarge">@dimen/m3_sys_shape_corner_value_large</item>
266+
<item name="shapeCornerSizeLargeIncreased">@dimen/m3_sys_shape_corner_value_large_increased</item>
267+
<item name="shapeCornerSizeExtraLarge">@dimen/m3_sys_shape_corner_value_extra_large</item>
268+
<item name="shapeCornerSizeExtraLargeIncreased">@dimen/m3_sys_shape_corner_value_extra_large_increased</item>
269+
<item name="shapeCornerSizeExtraExtraLarge">@dimen/m3_sys_shape_corner_value_extra_extra_large</item>
262270
<item name="shapeAppearanceCornerExtraSmall">@style/ShapeAppearance.Material3.Corner.ExtraSmall</item>
263271
<item name="shapeAppearanceCornerSmall">@style/ShapeAppearance.Material3.Corner.Small</item>
264272
<item name="shapeAppearanceCornerMedium">@style/ShapeAppearance.Material3.Corner.Medium</item>
265273
<item name="shapeAppearanceCornerLarge">@style/ShapeAppearance.Material3.Corner.Large</item>
274+
<item name="shapeAppearanceCornerLargeIncreased">@style/ShapeAppearance.Material3.Corner.LargeIncreased</item>
266275
<item name="shapeAppearanceCornerExtraLarge">@style/ShapeAppearance.Material3.Corner.ExtraLarge</item>
276+
<item name="shapeAppearanceCornerExtraLargeIncreased">@style/ShapeAppearance.Material3.Corner.ExtraLargeIncreased</item>
277+
<item name="shapeAppearanceCornerExtraExtraLarge">@style/ShapeAppearance.Material3.Corner.ExtraExtraLarge</item>
267278

268279
<!-- Deprecated shape styles. -->
269280
<item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.Material3.SmallComponent</item>
@@ -553,11 +564,22 @@
553564

554565
<!-- Shape attributes. -->
555566
<item name="shapeCornerFamily">@integer/m3_sys_shape_corner_full_corner_family</item>
567+
<item name="shapeCornerSizeExtraSmall">@dimen/m3_sys_shape_corner_value_extra_small</item>
568+
<item name="shapeCornerSizeSmall">@dimen/m3_sys_shape_corner_value_small</item>
569+
<item name="shapeCornerSizeMedium">@dimen/m3_sys_shape_corner_value_medium</item>
570+
<item name="shapeCornerSizeLarge">@dimen/m3_sys_shape_corner_value_large</item>
571+
<item name="shapeCornerSizeLargeIncreased">@dimen/m3_sys_shape_corner_value_large_increased</item>
572+
<item name="shapeCornerSizeExtraLarge">@dimen/m3_sys_shape_corner_value_extra_large</item>
573+
<item name="shapeCornerSizeExtraLargeIncreased">@dimen/m3_sys_shape_corner_value_extra_large_increased</item>
574+
<item name="shapeCornerSizeExtraExtraLarge">@dimen/m3_sys_shape_corner_value_extra_extra_large</item>
556575
<item name="shapeAppearanceCornerExtraSmall">@style/ShapeAppearance.Material3.Corner.ExtraSmall</item>
557576
<item name="shapeAppearanceCornerSmall">@style/ShapeAppearance.Material3.Corner.Small</item>
558577
<item name="shapeAppearanceCornerMedium">@style/ShapeAppearance.Material3.Corner.Medium</item>
559578
<item name="shapeAppearanceCornerLarge">@style/ShapeAppearance.Material3.Corner.Large</item>
579+
<item name="shapeAppearanceCornerLargeIncreased">@style/ShapeAppearance.Material3.Corner.LargeIncreased</item>
560580
<item name="shapeAppearanceCornerExtraLarge">@style/ShapeAppearance.Material3.Corner.ExtraLarge</item>
581+
<item name="shapeAppearanceCornerExtraLargeIncreased">@style/ShapeAppearance.Material3.Corner.ExtraLargeIncreased</item>
582+
<item name="shapeAppearanceCornerExtraExtraLarge">@style/ShapeAppearance.Material3.Corner.ExtraExtraLarge</item>
561583

562584
<!-- Deprecated shape styles. -->
563585
<item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.Material3.SmallComponent</item>

0 commit comments

Comments
 (0)