CODEWITHSUNDEEP
androidandroid-jetpack-compose
Nino van Hooff
Nino van Hooff

Reputation: 3893

Jetpack Compose Button padding outside of border: why?

Using Button, I want to make its diminensions such that its border hugs its width, with a minimum width and height of 40dp. In the sample below, I like the looks of the BigNumber preview. It does not have any outside horizontal padding. The Default preview does have padding outside the border. How do I fix this without setting an absolute width? Consider this sample:

@Composable
fun BasketQuantityStepper(
    quantityControlsViewState: QuantityControlsViewState,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Button(
        onClick = onClick,
        colors = ButtonDefaults.buttonColors(backgroundColor = colorResource(id = R.color.basketQuantityStepperBackground)),
        border = BorderStroke(dimensionResource(id = R.dimen.buttonBorderWidth), colorResource(id = R.color.basketQuantityStepperBorderColor)),
        modifier = modifier
            .heightIn(min = 40.dp)
            .widthIn(min = 40.dp),
    ) {
        Text(
            text = "${quantityControlsViewState.currentQuantity}",
        )
    }
}

@Preview
@Composable
private fun PreviewDefault() {
        BasketQuantityStepper(quantityControlsViewState = QuantityControlsViewState(
            currentQuantity = 1,
            minOrderQuantity = 1,
            maxOrderQuantity = 10,
            stepQuantity = 1
        ), onClick = {})
}

@Preview
@Composable
private fun PreviewBigNumber() {
        BasketQuantityStepper(quantityControlsViewState = QuantityControlsViewState(
            currentQuantity = 100,
            minOrderQuantity = 1,
            maxOrderQuantity = 1000,
            stepQuantity = 1
        ), onClick = {})
}

Previews

Upvotes: 6

Views: 4096

Answers (2)

sadat
sadat

Reputation: 4352

LocalMinimumTouchTargetEnforcement has been deprecated.

use LocalMinimumInteractiveComponentEnforcement

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {

}

Upvotes: 2

Thracian
Thracian

Reputation: 66849

Minimum dimension of Composables' touch area is 48.dp by default for accessibility.

You can remove it by wrapping your button with

CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {

}

but it's not advised to have Composable's smaller than accebility size. Icons, CheckBox, even Slider uses 48.dp by default.

        CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {
            Button(
                onClick = {},
                border = BorderStroke(2.dp, Color.LightGray),
                modifier = Modifier
                    .border(2.dp, Color.Green)
                    .heightIn(min = 40.dp)
                    .widthIn(min = 40.dp),
            ) {
                Text(
                    text = "$counter",
                )
            }
        }

https://developer.android.com/jetpack/compose/accessibility

Remove Default padding around checkboxes in Jetpack Compose new update

Upvotes: 16

Related Questions