androidx.compose.foundation.shape

Interfaces

CornerSize

Defines size of a corner in pixels.
Cmn
PolygonShapeScope

Builds PolygonShapeGeometry for a PolygonShape at layout resolution.
Cmn
PolygonShapeTransformScope

Transforms a PolygonShape's geometry inside PolygonShape.transform.
Cmn

Classes

AbsoluteCutCornerShape

A shape describing the rectangle with cut corners.
Cmn
AbsoluteRoundedCornerShape

A shape describing the rectangle with rounded corners.
Cmn
CornerBasedShape

Base class for Shapes defined by four CornerSizes.
Cmn
CornerRounding

Defines the radius and smoothness of rounding at a polygon vertex.
Cmn
CutCornerShape

A shape describing the rectangle with cut corners.
Cmn
GenericShape

Creates Shape defined by applying the provided builder on a Path.
Cmn
PolygonShape

Defines a Shape built from rounded polygon geometry.
Cmn
PolygonShapeGeometry

Defines a polygon's vertices, center, and corner rounding.
Cmn
RoundedCornerShape

A shape describing the rectangle with rounded corners.
Cmn

Top-level functions summary

AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.
Cmn
AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.
Cmn
AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.
Cmn
AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.
Cmn
AbsoluteCutCornerShape
AbsoluteCutCornerShape(
    topLeft: Dp,
    topRight: Dp,
    bottomRight: Dp,
    bottomLeft: Dp
)

Creates AbsoluteCutCornerShape with sizes defined in Dp.
Cmn
AbsoluteCutCornerShape
AbsoluteCutCornerShape(
    topLeft: Float,
    topRight: Float,
    bottomRight: Float,
    bottomLeft: Float
)

Creates AbsoluteCutCornerShape with sizes defined in float.
Cmn
AbsoluteCutCornerShape
AbsoluteCutCornerShape(
    topLeftPercent: @IntRange(from = 0, to = 100) Int,
    topRightPercent: @IntRange(from = 0, to = 100) Int,
    bottomRightPercent: @IntRange(from = 0, to = 100) Int,
    bottomLeftPercent: @IntRange(from = 0, to = 100) Int
)

Creates AbsoluteCutCornerShape with sizes defined in percents of the shape's smaller side.
Cmn
AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.
Cmn
AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.
Cmn
AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.
Cmn
AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.
Cmn
AbsoluteRoundedCornerShape
AbsoluteRoundedCornerShape(
    topLeft: Dp,
    topRight: Dp,
    bottomRight: Dp,
    bottomLeft: Dp
)

Creates AbsoluteRoundedCornerShape with sizes defined in Dp.
Cmn
AbsoluteRoundedCornerShape
AbsoluteRoundedCornerShape(
    topLeft: Float,
    topRight: Float,
    bottomRight: Float,
    bottomLeft: Float
)

Creates AbsoluteRoundedCornerShape with sizes defined in pixels.
Cmn
AbsoluteRoundedCornerShape
AbsoluteRoundedCornerShape(
    topLeftPercent: @IntRange(from = 0, to = 100) Int,
    topRightPercent: @IntRange(from = 0, to = 100) Int,
    bottomRightPercent: @IntRange(from = 0, to = 100) Int,
    bottomLeftPercent: @IntRange(from = 0, to = 100) Int
)

Creates AbsoluteRoundedCornerShape with sizes defined in percents of the shape's smaller side.
Cmn
CornerSize
CornerSize(percent: @IntRange(from = 0, to = 100) Int)

Creates CornerSize with provided size.
Cmn
CornerSize
CornerSize(size: Dp)

Creates CornerSize with provided size.
Cmn
CornerSize

Creates CornerSize with provided size.
Cmn
CutCornerShape

Creates CutCornerShape with the same size applied for all four corners.
Cmn
CutCornerShape
CutCornerShape(percent: Int)

Creates CutCornerShape with the same size applied for all four corners.
Cmn
CutCornerShape

Creates CutCornerShape with the same size applied for all four corners.
Cmn
CutCornerShape

Creates CutCornerShape with the same size applied for all four corners.
Cmn
CutCornerShape
CutCornerShape(topStart: Dp, topEnd: Dp, bottomEnd: Dp, bottomStart: Dp)

Creates CutCornerShape with sizes defined in Dp.
Cmn
CutCornerShape
CutCornerShape(
    topStart: Float,
    topEnd: Float,
    bottomEnd: Float,
    bottomStart: Float
)

Creates CutCornerShape with sizes defined in float.
Cmn
CutCornerShape
CutCornerShape(
    topStartPercent: @IntRange(from = 0, to = 100) Int,
    topEndPercent: @IntRange(from = 0, to = 100) Int,
    bottomEndPercent: @IntRange(from = 0, to = 100) Int,
    bottomStartPercent: @IntRange(from = 0, to = 100) Int
)

Creates CutCornerShape with sizes defined in percents of the shape's smaller side.
Cmn
Shape
@RememberInComposition
MorphPolygonShape(
    start: PolygonShape,
    end: PolygonShape,
    progress: () -> Float
)

Creates a Shape that morphs between start and end as progress moves from 0f to 1f.
Cmn
PolygonShape

Creates a PolygonShape from geometry returned by builder.
Cmn
RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.
Cmn
RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.
Cmn
RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.
Cmn
RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.
Cmn
RoundedCornerShape
RoundedCornerShape(topStart: Dp, topEnd: Dp, bottomEnd: Dp, bottomStart: Dp)

Creates RoundedCornerShape with sizes defined in Dp.
Cmn
RoundedCornerShape
RoundedCornerShape(
    topStart: Float,
    topEnd: Float,
    bottomEnd: Float,
    bottomStart: Float
)

Creates RoundedCornerShape with sizes defined in pixels.
Cmn
RoundedCornerShape
RoundedCornerShape(
    topStartPercent: @IntRange(from = 0, to = 100) Int,
    topEndPercent: @IntRange(from = 0, to = 100) Int,
    bottomEndPercent: @IntRange(from = 0, to = 100) Int,
    bottomStartPercent: @IntRange(from = 0, to = 100) Int
)

Creates RoundedCornerShape with sizes defined in percents of the shape's smaller side.
Cmn

Extension functions summary

PolygonShape

Converts a RoundedCornerShape to a PolygonShape.
Cmn
PolygonShape

Converts an AbsoluteRoundedCornerShape to a PolygonShape.
Cmn
PolygonShape

Converts a CutCornerShape to a PolygonShape.
Cmn
PolygonShape

Converts an AbsoluteCutCornerShape to a PolygonShape.
Cmn

Top-level properties summary

RoundedCornerShape

Circular Shape with all the corners sized as the 50 percent of the shape size.
Cmn
CornerSize

CornerSize always equals to zero.
Cmn

Top-level functions

AbsoluteCutCornerShape

Cmn 
fun AbsoluteCutCornerShape(corner: CornerSize): AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.

Parameters
corner: CornerSize

CornerSize to apply.

AbsoluteCutCornerShape

Cmn 
fun AbsoluteCutCornerShape(percent: Int): AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.

Parameters
percent: Int

Size in percents to apply.

AbsoluteCutCornerShape

Cmn 
fun AbsoluteCutCornerShape(size: Dp): AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.

Parameters
size: Dp

Size in Dp to apply.

AbsoluteCutCornerShape

Cmn 
fun AbsoluteCutCornerShape(size: Float): AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with the same size applied for all four corners.

Parameters
size: Float

Size in pixels to apply.

AbsoluteCutCornerShape

Cmn 
fun AbsoluteCutCornerShape(
    topLeft: Dp = 0.dp,
    topRight: Dp = 0.dp,
    bottomRight: Dp = 0.dp,
    bottomLeft: Dp = 0.dp
): AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with sizes defined in Dp.

AbsoluteCutCornerShape

Cmn 
fun AbsoluteCutCornerShape(
    topLeft: Float = 0.0f,
    topRight: Float = 0.0f,
    bottomRight: Float = 0.0f,
    bottomLeft: Float = 0.0f
): AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with sizes defined in float.

AbsoluteCutCornerShape

Cmn 
fun AbsoluteCutCornerShape(
    topLeftPercent: @IntRange(from = 0, to = 100) Int = 0,
    topRightPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomRightPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomLeftPercent: @IntRange(from = 0, to = 100) Int = 0
): AbsoluteCutCornerShape

Creates AbsoluteCutCornerShape with sizes defined in percents of the shape's smaller side.

Parameters
topLeftPercent: @IntRange(from = 0, to = 100) Int = 0

The top left corner clip size as a percentage of the smaller side, with a range of 0 - 100.
topRightPercent: @IntRange(from = 0, to = 100) Int = 0

The top right corner clip size as a percentage of the smaller side, with a range of 0 - 100.
bottomRightPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom right clip size radius as a percentage of the smaller side, with a range of 0 - 100.
bottomLeftPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom left clip size radius as a percentage of the smaller side, with a range of 0 - 100.

AbsoluteRoundedCornerShape

Cmn 
fun AbsoluteRoundedCornerShape(corner: CornerSize): AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.

Parameters
corner: CornerSize

CornerSize to apply.

AbsoluteRoundedCornerShape

Cmn 
fun AbsoluteRoundedCornerShape(percent: Int): AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.

Parameters
percent: Int

Size in percents to apply.

AbsoluteRoundedCornerShape

Cmn 
fun AbsoluteRoundedCornerShape(size: Dp): AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.

Parameters
size: Dp

Size in Dp to apply.

AbsoluteRoundedCornerShape

Cmn 
fun AbsoluteRoundedCornerShape(size: Float): AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with the same size applied for all four corners.

Parameters
size: Float

Size in pixels to apply.

AbsoluteRoundedCornerShape

Cmn 
fun AbsoluteRoundedCornerShape(
    topLeft: Dp = 0.dp,
    topRight: Dp = 0.dp,
    bottomRight: Dp = 0.dp,
    bottomLeft: Dp = 0.dp
): AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with sizes defined in Dp.

AbsoluteRoundedCornerShape

Cmn 
fun AbsoluteRoundedCornerShape(
    topLeft: Float = 0.0f,
    topRight: Float = 0.0f,
    bottomRight: Float = 0.0f,
    bottomLeft: Float = 0.0f
): AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with sizes defined in pixels.

AbsoluteRoundedCornerShape

Cmn 
fun AbsoluteRoundedCornerShape(
    topLeftPercent: @IntRange(from = 0, to = 100) Int = 0,
    topRightPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomRightPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomLeftPercent: @IntRange(from = 0, to = 100) Int = 0
): AbsoluteRoundedCornerShape

Creates AbsoluteRoundedCornerShape with sizes defined in percents of the shape's smaller side.

Parameters
topLeftPercent: @IntRange(from = 0, to = 100) Int = 0

The top left corner radius as a percentage of the smaller side, with a range of 0 - 100.
topRightPercent: @IntRange(from = 0, to = 100) Int = 0

The top right corner radius as a percentage of the smaller side, with a range of 0 - 100.
bottomRightPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom right corner radius as a percentage of the smaller side, with a range of 0 - 100.
bottomLeftPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom left corner radius as a percentage of the smaller side, with a range of 0 - 100.

CornerSize

Cmn 
fun CornerSize(percent: @IntRange(from = 0, to = 100) Int): CornerSize

Creates CornerSize with provided size.

Parameters
percent: @IntRange(from = 0, to = 100) Int

the corner size defined in percents of the shape's smaller side. Can't be negative or larger then 100 percents.

CornerSize

Cmn 
fun CornerSize(size: Dp): CornerSize

Creates CornerSize with provided size.

Parameters
size: Dp

the corner size defined in Dp.

CornerSize

Cmn 
fun CornerSize(size: Float): CornerSize

Creates CornerSize with provided size.

Parameters
size: Float

the corner size defined in pixels.

CutCornerShape

Cmn 
fun CutCornerShape(corner: CornerSize): CutCornerShape

Creates CutCornerShape with the same size applied for all four corners.

Parameters
corner: CornerSize

CornerSize to apply.

CutCornerShape

Cmn 
fun CutCornerShape(percent: Int): CutCornerShape

Creates CutCornerShape with the same size applied for all four corners.

Parameters
percent: Int

Size in percents to apply.

CutCornerShape

Cmn 
fun CutCornerShape(size: Dp): CutCornerShape

Creates CutCornerShape with the same size applied for all four corners.

Parameters
size: Dp

Size in Dp to apply.

CutCornerShape

Cmn 
fun CutCornerShape(size: Float): CutCornerShape

Creates CutCornerShape with the same size applied for all four corners.

Parameters
size: Float

Size in pixels to apply.

CutCornerShape

Cmn 
fun CutCornerShape(
    topStart: Dp = 0.dp,
    topEnd: Dp = 0.dp,
    bottomEnd: Dp = 0.dp,
    bottomStart: Dp = 0.dp
): CutCornerShape

Creates CutCornerShape with sizes defined in Dp.

CutCornerShape

Cmn 
fun CutCornerShape(
    topStart: Float = 0.0f,
    topEnd: Float = 0.0f,
    bottomEnd: Float = 0.0f,
    bottomStart: Float = 0.0f
): CutCornerShape

Creates CutCornerShape with sizes defined in float.

CutCornerShape

Cmn 
fun CutCornerShape(
    topStartPercent: @IntRange(from = 0, to = 100) Int = 0,
    topEndPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomEndPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomStartPercent: @IntRange(from = 0, to = 100) Int = 0
): CutCornerShape

Creates CutCornerShape with sizes defined in percents of the shape's smaller side.

Parameters
topStartPercent: @IntRange(from = 0, to = 100) Int = 0

The top start corner clip size as a percentage of the smaller side, with a range of 0 - 100.
topEndPercent: @IntRange(from = 0, to = 100) Int = 0

The top end corner clip size as a percentage of the smaller side, with a range of 0 - 100.
bottomEndPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom end clip size radius as a percentage of the smaller side, with a range of 0 - 100.
bottomStartPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom start clip size radius as a percentage of the smaller side, with a range of 0 - 100.

MorphPolygonShape

Cmn 
@RememberInComposition
fun MorphPolygonShape(
    start: PolygonShape,
    end: PolygonShape,
    progress: () -> Float
): Shape

Creates a Shape that morphs between start and end as progress moves from 0f to 1f.

Reads progress each time the outline is resolved. Values at or below 0f resolve to start; values at or above 1f resolve to end. Create a separate instance for each morphing element.

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CornerRounding
import androidx.compose.foundation.shape.MorphPolygonShape
import androidx.compose.foundation.shape.PolygonShape
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// A badge that morphs between a rounded hexagon and a star as it is toggled. No remember
// keys are needed: the endpoints are constant and the current progress is read through the
// lambda each time the outline is resolved.
var selected by remember { mutableStateOf(false) }
val progress by animateFloatAsState(if (selected) 1f else 0f)
val shape = remember {
    MorphPolygonShape(
        start =
            PolygonShape {
                polygon(numVertices = 6, rounding = CornerRounding.fraction(0.2f))
            },
        end =
            PolygonShape.star(
                numPoints = 6,
                innerRadiusRatio = 0.6f,
                outerRounding = CornerRounding.fraction(0.2f),
            ),
        progress = { progress },
    )
}
Box(
    Modifier.size(96.dp).clip(shape).background(Color(0xFF4CAF50)).clickable {
        selected = !selected
    }
)
Parameters
start: PolygonShape

starting shape of the morph
end: PolygonShape

ending shape of the morph
progress: () -> Float

returns the current morph progress

PolygonShape

Cmn 
@RememberInComposition
fun PolygonShape(builder: PolygonShapeScope.() -> PolygonShapeGeometry): PolygonShape

Creates a PolygonShape from geometry returned by builder.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CornerRounding
import androidx.compose.foundation.shape.PolygonShape
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// A diamond built from pixel coordinates derived from the resolved layout size, with an
// exact 8dp corner rounding.
val diamond = remember {
    PolygonShape {
        polygon(
            vertices =
                listOf(
                    Offset(size.width / 2f, 0f),
                    Offset(size.width, size.height / 2f),
                    Offset(size.width / 2f, size.height),
                    Offset(0f, size.height / 2f),
                ),
            rounding = CornerRounding.dp(radius = 8.dp),
        )
    }
}
Box(Modifier.size(96.dp).clip(diamond).background(Color(0xFFFF5722)))
 
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CornerRounding
import androidx.compose.foundation.shape.PolygonShape
import androidx.compose.foundation.shape.PolygonShapeGeometry
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// A kite authored in the unit square [0..1] with per-vertex rounding as fractions of the
// bounds, scaled and centered into the container via transform { scaleToFit() }.
val kite = remember {
    val geometry =
        PolygonShapeGeometry(
            vertices =
                listOf(Offset(0.5f, 0f), Offset(1f, 0.4f), Offset(0.5f, 1f), Offset(0f, 0.4f)),
            perVertexRounding =
                listOf(
                    CornerRounding.fraction(0.1f),
                    CornerRounding.fraction(0.15f),
                    CornerRounding.fraction(0.05f),
                    CornerRounding.fraction(0.15f),
                ),
        )
    PolygonShape { geometry }.apply { transform { scaleToFit() } }
}

Box(Modifier.size(width = 120.dp, height = 84.dp).clip(kite).background(Color(0xFF673AB7)))
Parameters
builder: PolygonShapeScope.() -> PolygonShapeGeometry

lambda run in PolygonShapeScope returning the shape's PolygonShapeGeometry

RoundedCornerShape

Cmn 
fun RoundedCornerShape(corner: CornerSize): RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.

Parameters
corner: CornerSize

CornerSize to apply.

RoundedCornerShape

Cmn 
fun RoundedCornerShape(percent: Int): RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.

Parameters
percent: Int

Size in percents to apply.

RoundedCornerShape

Cmn 
fun RoundedCornerShape(size: Dp): RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.

Parameters
size: Dp

Size in Dp to apply.

RoundedCornerShape

Cmn 
fun RoundedCornerShape(size: Float): RoundedCornerShape

Creates RoundedCornerShape with the same size applied for all four corners.

Parameters
size: Float

Size in pixels to apply.

RoundedCornerShape

Cmn 
fun RoundedCornerShape(
    topStart: Dp = 0.dp,
    topEnd: Dp = 0.dp,
    bottomEnd: Dp = 0.dp,
    bottomStart: Dp = 0.dp
): RoundedCornerShape

Creates RoundedCornerShape with sizes defined in Dp.

RoundedCornerShape

Cmn 
fun RoundedCornerShape(
    topStart: Float = 0.0f,
    topEnd: Float = 0.0f,
    bottomEnd: Float = 0.0f,
    bottomStart: Float = 0.0f
): RoundedCornerShape

Creates RoundedCornerShape with sizes defined in pixels.

RoundedCornerShape

Cmn 
fun RoundedCornerShape(
    topStartPercent: @IntRange(from = 0, to = 100) Int = 0,
    topEndPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomEndPercent: @IntRange(from = 0, to = 100) Int = 0,
    bottomStartPercent: @IntRange(from = 0, to = 100) Int = 0
): RoundedCornerShape

Creates RoundedCornerShape with sizes defined in percents of the shape's smaller side.

Parameters
topStartPercent: @IntRange(from = 0, to = 100) Int = 0

The top start corner radius as a percentage of the smaller side, with a range of 0 - 100.
topEndPercent: @IntRange(from = 0, to = 100) Int = 0

The top end corner radius as a percentage of the smaller side, with a range of 0 - 100.
bottomEndPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom end corner radius as a percentage of the smaller side, with a range of 0 - 100.
bottomStartPercent: @IntRange(from = 0, to = 100) Int = 0

The bottom start corner radius as a percentage of the smaller side, with a range of 0 - 100.

Extension functions

RoundedCornerShape.toPolygonShape

Cmn 
fun RoundedCornerShape.toPolygonShape(): PolygonShape

Converts a RoundedCornerShape to a PolygonShape.

Note: Approximates RoundedCornerShape using cubic Bézier curves and is not pixel-identical.

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.MorphPolygonShape
import androidx.compose.foundation.shape.PolygonShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.shape.toPolygonShape
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Converting a corner-based shape to a PolygonShape lets it morph with any other polygon
// shape; here a rounded rectangle relaxes into a circle.
var expanded by remember { mutableStateOf(false) }
val progress by animateFloatAsState(if (expanded) 1f else 0f)
val shape = remember {
    MorphPolygonShape(
        start = RoundedCornerShape(12.dp).toPolygonShape(),
        end = PolygonShape.circle(),
        progress = { progress },
    )
}
Box(
    Modifier.size(96.dp).clip(shape).background(Color(0xFF03A9F4)).clickable {
        expanded = !expanded
    }
)

AbsoluteRoundedCornerShape.toPolygonShape

Cmn 
fun AbsoluteRoundedCornerShape.toPolygonShape(): PolygonShape

Converts an AbsoluteRoundedCornerShape to a PolygonShape.

Corners do not swap with the layout direction.

Note: The resulting outline closely approximates the original shape, but is not pixel-identical because PolygonShape and AbsoluteRoundedCornerShape use different geometry and curve calculations. Avoid comparing them for 1:1 pixel equivalence.

CutCornerShape.toPolygonShape

Cmn 
fun CutCornerShape.toPolygonShape(): PolygonShape

Converts a CutCornerShape to a PolygonShape.

Note: The resulting outline closely approximates the original shape, but is not pixel-identical because PolygonShape and CutCornerShape use different geometry and curve calculations. Avoid comparing them for 1:1 pixel equivalence.

AbsoluteCutCornerShape.toPolygonShape

Cmn 
fun AbsoluteCutCornerShape.toPolygonShape(): PolygonShape

Converts an AbsoluteCutCornerShape to a PolygonShape.

Corners do not swap with the layout direction.

Note: The resulting outline closely approximates the original shape, but is not pixel-identical because PolygonShape and AbsoluteCutCornerShape use different geometry and curve calculations. Avoid comparing them for 1:1 pixel equivalence.

Top-level properties

CircleShape

Cmn 
val CircleShape: RoundedCornerShape

Circular Shape with all the corners sized as the 50 percent of the shape size.

ZeroCornerSize

Cmn 
val ZeroCornerSize: CornerSize

CornerSize always equals to zero.