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.

Summary

Public constructors

Shapes(
    extraSmall: CornerBasedShape,
    small: CornerBasedShape,
    medium: CornerBasedShape,
    large: CornerBasedShape,
    extraLarge: CornerBasedShape
)

Material surfaces can be displayed in different shapes.

Cmn
@ExperimentalMaterial3ExpressiveApi
Shapes(
    extraSmall: CornerBasedShape,
    small: CornerBasedShape,
    medium: CornerBasedShape,
    large: CornerBasedShape,
    extraLarge: CornerBasedShape,
    largeIncreased: CornerBasedShape,
    extraLargeIncreased: CornerBasedShape,
    extraExtraLarge: CornerBasedShape
)
Cmn

Public functions

Shapes
copy(
    extraSmall: CornerBasedShape,
    small: CornerBasedShape,
    medium: CornerBasedShape,
    large: CornerBasedShape,
    extraLarge: CornerBasedShape
)

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

Cmn
Shapes
@ExperimentalMaterial3ExpressiveApi
copy(
    extraSmall: CornerBasedShape,
    small: CornerBasedShape,
    medium: CornerBasedShape,
    large: CornerBasedShape,
    extraLarge: CornerBasedShape,
    largeIncreased: CornerBasedShape,
    extraLargeIncreased: CornerBasedShape,
    extraExtraLarge: CornerBasedShape
)

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

Cmn
open operator Boolean
equals(other: Any?)
Cmn
open Int
Cmn
open String
Cmn

Public properties

CornerBasedShape

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

Cmn
CornerBasedShape

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

Cmn
CornerBasedShape

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

Cmn
CornerBasedShape

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

Cmn
CornerBasedShape

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

Cmn
CornerBasedShape

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

Cmn
CornerBasedShape

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

Cmn
CornerBasedShape

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

Cmn

Public constructors

Shapes

Shapes(
    extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall,
    small: CornerBasedShape = ShapeDefaults.Small,
    medium: CornerBasedShape = ShapeDefaults.Medium,
    large: CornerBasedShape = ShapeDefaults.Large,
    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, 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.

Parameters
extraSmall: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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.

Shapes

@ExperimentalMaterial3ExpressiveApi
Shapes(
    extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall,
    small: CornerBasedShape = ShapeDefaults.Small,
    medium: CornerBasedShape = ShapeDefaults.Medium,
    large: CornerBasedShape = ShapeDefaults.Large,
    extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge,
    largeIncreased: CornerBasedShape = ShapeDefaults.LargeIncreased,
    extraLargeIncreased: CornerBasedShape = ShapeDefaults.ExtraLargeIncreased,
    extraExtraLarge: CornerBasedShape = ShapeDefaults.ExtraExtraLarge
)
Parameters
extraSmall: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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: CornerBasedShape = ShapeDefaults.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.

largeIncreased: CornerBasedShape = ShapeDefaults.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.

extraLargeIncreased: CornerBasedShape = ShapeDefaults.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.

extraExtraLarge: CornerBasedShape = ShapeDefaults.ExtraExtraLarge

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

Public functions

copy

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.

copy

@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.

equals

open operator fun equals(other: Any?): Boolean

hashCode

open fun hashCode(): Int

toString

open fun toString(): String

Public properties

extraExtraLarge

@ExperimentalMaterial3ExpressiveApi
val extraExtraLargeCornerBasedShape

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

extraLarge

val extraLargeCornerBasedShape

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.

extraLargeIncreased

@ExperimentalMaterial3ExpressiveApi
val extraLargeIncreasedCornerBasedShape

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.

extraSmall

val extraSmallCornerBasedShape

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.

large

val largeCornerBasedShape

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.

largeIncreased

@ExperimentalMaterial3ExpressiveApi
val largeIncreasedCornerBasedShape

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.

medium

val mediumCornerBasedShape

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.

small

val smallCornerBasedShape

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.