Shapes

Class

Android

class Shapes(
    val extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall,
    val small: CornerBasedShape = ShapeDefaults.Small,
    val medium: CornerBasedShape = ShapeDefaults.Medium,
    val large: CornerBasedShape = ShapeDefaults.Large,
    val extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge
)

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.

There are different sizes of shapes:

Extra Small
Small
Medium
Large
Extra Large

You can customize the shape system for all components in the MaterialTheme or you can do it on a per component basis.

You can change the shape that a component has by overriding the shape parameter for that component. For example, by default, buttons use the shape style “full.” If your product requires a smaller amount of roundedness, you can override the shape parameter with a different shape value like MaterialTheme.shapes.small.

To learn more about shapes, see Material Design shapes(https://m3.material.io/styles/shape/overview).

Parameters


extraSmall	A shape style with 4 same-sized corners whose size are bigger than `RectangleShape` and smaller than `Shapes.small`. By default autocomplete menu, select menu, snackbars, standard menu, and text fields use this shape.
small	A shape style with 4 same-sized corners whose size are bigger than `Shapes.extraSmall` and smaller than `Shapes.medium`. By default chips use this shape.
medium	A shape style with 4 same-sized corners whose size are bigger than `Shapes.small` and smaller than `Shapes.large`. By default cards and small FABs use this shape.
large	A shape style with 4 same-sized corners whose size are bigger than `Shapes.medium` and smaller than `Shapes.extraLarge`. By default extended FABs, FABs, and navigation drawers use this shape.
extraLarge	A shape style with 4 same-sized corners whose size are bigger than `Shapes.large` and smaller than `CircleShape`. By default large FABs use this shape.

Functions

fun copy(
        extraSmall: CornerBasedShape = this.extraSmall,
        small: CornerBasedShape = this.small,
        medium: CornerBasedShape = this.medium,
        large: CornerBasedShape = this.large,
        extraLarge: CornerBasedShape = this.extraLarge
    ): Shapes

Returns a copy of this Shapes, optionally overriding some of the values.