Shapes

Class

Common
class Shapes
@ExperimentalMaterial3ExpressiveApi
constructor(
    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,
    largeIncreased: CornerBasedShape = ShapeDefaults.LargeIncreased,
    extraLargeIncreased: CornerBasedShape = ShapeDefaults.ExtraLargeIncreased,
    extraExtraLarge: CornerBasedShape = ShapeDefaults.ExtraExtraLarge,
)

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, Large Increased
  • Extra Large, Extra Large Increased
  • Extra 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

extraSmallA 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.
smallA 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.
mediumA 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.
largeA 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.
extraLargeA 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.
largeIncreasedA shape style with 4 same-sized corners whose size are bigger than Shapes.medium and smaller than Shapes.extraLarge. Slightly larger variant to Shapes.large.
extraLargeIncreasedA shape style with 4 same-sized corners whose size are bigger than Shapes.large and smaller than Shapes.extraExtraLarge. Slightly larger variant to Shapes.extraLarge.
extraExtraLargeA shape style with 4 same-sized corners whose size are bigger than Shapes.extraLarge and smaller than CircleShape.

Secondary Constructors

constructor(
    extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall,
    small: CornerBasedShape = ShapeDefaults.Small,
    medium: CornerBasedShape = ShapeDefaults.Medium,
    large: CornerBasedShape = ShapeDefaults.Large,
    extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge,
) : this(
    extraSmall = extraSmall,
    small = small,
    medium = medium,
    large = large,
    extraLarge = extraLarge,
    largeIncreased = ShapeDefaults.LargeIncreased,
    extraLargeIncreased = ShapeDefaults.ExtraLargeIncreased,
    extraExtraLarge = ShapeDefaults.ExtraExtraLarge,
)

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, Large Increased
  • Extra Large, Extra Large Increased
  • Extra 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

extraSmallA 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.
smallA 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.
mediumA 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.
largeA 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.
extraLargeA 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.

Properties

Common
@ExperimentalMaterial3ExpressiveApi

val largeIncreased = largeIncreased

A shape style with 4 same-sized corners whose size are bigger than Shapes.medium and smaller than Shapes.extraLarge. Slightly larger variant to Shapes.large.

Common
@ExperimentalMaterial3ExpressiveApi

val extraLargeIncreased = extraLargeIncreased

A shape style with 4 same-sized corners whose size are bigger than Shapes.large and smaller than Shapes.extraExtraLarge. Slightly larger variant to Shapes.extraLarge.

Common
@ExperimentalMaterial3ExpressiveApi

val extraExtraLarge = extraExtraLarge

A shape style with 4 same-sized corners whose size are bigger than Shapes.extraLarge and smaller than CircleShape.

Functions

@ExperimentalMaterial3ExpressiveApi
    fun copy(
        extraSmall: CornerBasedShape = this.extraSmall,
        small: CornerBasedShape = this.small,
        medium: CornerBasedShape = this.medium,
        large: CornerBasedShape = this.large,
        extraLarge: CornerBasedShape = this.extraLarge,
        largeIncreased: CornerBasedShape = this.largeIncreased,
        extraLargeIncreased: CornerBasedShape = this.extraLargeIncreased,
        extraExtraLarge: CornerBasedShape = this.extraExtraLarge,
    ): Shapes

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

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.