jetpack compose cut composable in half

Viewed 392

how can I cut composables like Text or Button like the image below in jetpack compose?

enter image description here

1 Answers

You can use the drawWithContent modifier.

Button(
    onClick = {},
    modifier = Modifier.drawWithContent {
        if (layoutDirection == LayoutDirection.Rtl) {
            clipRect(left = size.width / 2f) {
                this@drawWithContent.drawContent()
            }
        } else {
            clipRect(right = size.width / 2f) {
                this@drawWithContent.drawContent()
            }
        }
    }
) {
    Text("some text")
}

Noticing that I added support for RTL languages cutting off the left of the component.

Related