Shape

Create shapes to use as backgrounds for composables

View in Playground

Corners with the same dimension

fun CutCornerShape(corner: CornerSize)

Box(
    shape = CutCornerShape(CornerSize(12.dp)),
    backgroundColor = Color.Blue
)

fun CutCornerShape(size: Dp)

Box(
    shape = CutCornerShape(12.dp),
    backgroundColor = Color.Blue
)

fun CutCornerShape(size: Float)

Box(
    shape = CutCornerShape(12f),
    backgroundColor = Color.Blue
)

fun CutCornerShape(percent: Int)

Box(
    shape = CutCornerShape(12.dp),
    backgroundColor = Color.Blue
)

Cut Corner Shape

Corners with different dimensions

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

Box(
    shape = CutCornerShape(12.dp, 4.dp, 12.dp, 4.dp),
    backgroundColor = Color.Blue
)

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

Box(
    shape = CutCornerShape(12f, 4f, 12f, 4f),
    backgroundColor = Color.Blue
)

fun CutCornerShape(
    @IntRange(from = 0, to = 50) topLeftPercent: Int = 0,
    @IntRange(from = 0, to = 50) topRightPercent: Int = 0,
    @IntRange(from = 0, to = 50) bottomRightPercent: Int = 0,
    @IntRange(from = 0, to = 50) bottomLeftPercent: Int = 0
)

Box(
    shape = CutCornerShape(40, 20, 50, 10),
    backgroundColor = Color.Blue
)

Cut Corner Shape

Rounded Corner Shape

A rounded corner shape rounds the corners based on the provided values. A RoundedCornerShape can be created by using on of the provided approaches defined below.

Corners with the same dimension

fun RoundedCornerShape(corner: CornerSize)

Box(
    shape = RoundedCornerShape(CornerSize(12.dp)),
    backgroundColor = Color.Blue
)

fun RoundedCornerShape(size: Dp)

Box(
    shape = RoundedCornerShape(12.dp),
    backgroundColor = Color.Blue
)

fun RoundedCornerShape(size: Float)

Box(
    shape = RoundedCornerShape(12f),
    backgroundColor = Color.Blue
)

fun RoundedCornerShape(percent: Int)

Box(
    shape = RoundedCornerShape(12.dp),
    backgroundColor = Color.Blue
)

Rounded Corner Shape

Corners with different dimensions

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

Box(
    shape = RoundedCornerShape(12.dp, 4.dp, 12.dp, 4.dp),
    backgroundColor = Color.Blue
)

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

Box(
    shape = RoundedCornerShape(12f, 4f, 12f, 4f),
    backgroundColor = Color.Blue
)

fun RoundedCornerShape(
    @IntRange(from = 0, to = 50) topLeftPercent: Int = 0,
    @IntRange(from = 0, to = 50) topRightPercent: Int = 0,
    @IntRange(from = 0, to = 50) bottomRightPercent: Int = 0,
    @IntRange(from = 0, to = 50) bottomLeftPercent: Int = 0
)

Box(
    shape = RoundedCornerShape(40, 20, 50, 10),
    backgroundColor = Color.Blue
)

Rounded Corner Shape