CODEWITHSUNDEEP
androidandroid-jetpack-compose
AmazingHorsess
AmazingHorsess

Reputation: 15

How i can make button like this in jetpack compose?

I can't understand how I can make this shape with short bottom angle:

enter image description here

I tried searching information about shapes and only found about rounded corners.

Upvotes: 0

Views: 925

Answers (2)

sweak
sweak

Reputation: 2000

You can use CutCornerShape like this:

Button(
    onClick = { /*TODO*/ },
    shape = CutCornerShape(
        topStart = 0f,
        topEnd = 0f,
        bottomEnd = 0f,
        bottomStart = 100f
    ),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Green.copy(alpha = 0.25f)),
    border = BorderStroke(width = 1.dp, Color.Green),
    contentPadding = PaddingValues(horizontal = 64.dp)
) {
    Text(
        text = "Button",
        color = Color.Green
    )
}

The effect:

enter image description here

Upvotes: 1

AmazingHorsess
AmazingHorsess

Reputation: 15

Find this solution:

@Composable
fun ButtonWithCutCornerShape() {

    Button(onClick = {}, shape = CutCornerShape(bottomStart = 50.dp)) {
        Text(text = "Cut corner shape")
    }
}

Upvotes: 1

Related Questions