Shapes

class Shapes

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.

Summary

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

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.
open operator Boolean
equals(other: Any?)
open Int
open String

Public properties
CornerBasedShape

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

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

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

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

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

Public constructors

Shapes

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

Public functions

copy

Added in 1.0.0
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.

equals

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

hashCode

open fun hashCode(): Int

toString

open fun toString(): String

Public properties

extraLarge

Added in 1.0.0
val extraLarge: CornerBasedShape

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.

extraSmall

Added in 1.0.0
val extraSmall: CornerBasedShape

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

Added in 1.0.0
val large: CornerBasedShape

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.

medium

Added in 1.0.0
val medium: CornerBasedShape

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

Added in 1.0.0
val small: CornerBasedShape

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.