Jetpack Compose: DrawBehind not same height as Button Background

Question

I am trying to draw a RoundRect with drawBehind-Modifier to my button. The button has also an background Color. My Problem is that the height of RoundRect doesnt match with the height of the Button Background. Any suggestions?

Code:

Button(
modifier = Modifier
    .fillMaxWidth()
    .padding(horizontal = 32.dp, vertical = 16.dp)
    .drawBehind {
        drawRoundRect(
            color = Color.Blue,
            size = Size(size.width, size.height),
            style = Stroke(
                width = 3f, pathEffect = PathEffect.dashPathEffect(
                    floatArrayOf(10f, 10f), 0f
                )
            ),
            cornerRadius = CornerRadius(25.dp.toPx())
        )
    },
colors = ButtonDefaults.buttonColors(
    containerColor = Color.Yellow,
    contentColor = MaterialTheme.colorScheme.onSurfaceVariant
),
onClick = {
    isErrorBank = isBankEmpty

    if (!isErrorBank) {
        saveButtonClicked = "gespeichert"
        onEvent(AccountEvent.SaveAccount)
        navHostController.popBackStack()
    }
})

Answer 1

Its height is 48.dp because of accessibility. You can change height to 48.dp, this is required because size Modifier is set after drawWithContent you assign or you can cancel 48.dp with CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) if you don't want to take accessibility height into consideration.

@Preview
@Composable
private fun ButtonTest() {

    Column {
        Button(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 32.dp, vertical = 16.dp)
                .height(48.dp)
                .drawWithContent {
                    drawContent()
                    drawRoundRect(
                        color = Color.Blue,
                        size = Size(size.width, size.height),
                        style = Stroke(
                            width = 3f, pathEffect = PathEffect.dashPathEffect(
                                floatArrayOf(10f, 10f), 0f
                            )
                        ),
                        cornerRadius = CornerRadius(25.dp.toPx())
                    )
                },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Yellow,
                contentColor = MaterialTheme.colorScheme.onSurfaceVariant
            ),
            onClick = {}
        ) {
            Text("HELLO WORLD")
        }

        CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 32.dp, vertical = 16.dp)
                    .drawWithContent {
                        drawContent()
                        drawRoundRect(
                            color = Color.Blue,
                            size = Size(size.width, size.height),
                            style = Stroke(
                                width = 3f, pathEffect = PathEffect.dashPathEffect(
                                    floatArrayOf(10f, 10f), 0f
                                )
                            ),
                            cornerRadius = CornerRadius(25.dp.toPx())
                        )
                    },
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color.Yellow,
                    contentColor = MaterialTheme.colorScheme.onSurfaceVariant
                ),
                onClick = {}
            ) {
                Text("HELLO WORLD")
            }
        }
    }
}