androidkotlinandroid-jetpack-compose

How to remove RadioButton's padding in Jetpack Compose?

I have a problem with RadioButton component in my Jetpack Compose application. I have some RadioButtons with text and this have a lot of padding by default. Can I remove this padding or to set a custom padding to avoid a lot of space between each?

Currently I have this:

enter image description here

My code is:

Column {
    MyEnum.values().filter { rb -> rb.visible }.forEach { rb ->
        Row(
            Modifier
                .fillMaxWidth()
                .padding(horizontal = 0.dp, vertical = 0.dp)
                .clickable(
                    interactionSource = interactionSource,
                    indication = null
                ) {
                    TODO()
                },
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = (rb.position == selectedOption),
                onClick = {
                    TODO()
                },
                colors = RadioButtonDefaults.colors(
                    selectedColor = DialogOutlinedTextFocus,
                    unselectedColor = DialogOutlinedTextUnfocus
                )
            )
    
            Text(
                text = stringResource(id = rb.idText),
                color = Color.Black,
                fontSize = 14.sp,
                modifier = Modifier
                    .padding(horizontal = 3.dp, vertical = 2.dp)
            )
        }
    }
}

I tried with contentPadding, but this property does not exist in RadioButton component.

Solution

  • The source code for RadioButton.kt sets the padding modifier at line 108. With modifiers, order matters. Even if you provide your own padding modifier it will be overridden by line 108.

    RadioButton.kt

    The sizing values are hardcoded at the bottom of the file.

    RadioButton.kt

    If you really want to "reduce the padding", apply a size modifier. I use 20.dp because it's equal to radioButtonSize in RadioButton.kt so the button doesn't get clipped. This should work for your purposes since the entire row is clickable.

    RadioButton(
    modifier = Modifier.size(20.dp),
    selected = selected,
    onClick = { TODO() },
)

    Preview

    Although, you're probably better off in the long term making custom components you can control. Luckily, the source code is ready available. Just copy, paste and adjust to your needs.

    [Updated Answer Below]

    LocalMinimumInteractiveComponentEnforcement

    As mentioned in other answers, LocalMinimumInteractiveComponentEnforcement can be used. If you're on a version where LocalMinimumInteractiveComponentEnforcement is not deprecated and cannot easily update your dependencies, this is how to use it:

    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
    RadioButton(
        selected = true,
        onClick = {},
    )
}

    androidx.compose.material3:material3: introduced with 1.1.0 and deprecated by 1.3.0

    LocalMinimumInteractiveComponentSize

    Documentation for material3:

    Use LocalMinimumInteractiveComponentSize with 0.dp to turn off enforcement instead.

    CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 0.dp) {
    RadioButton(
        selected = true,
        onClick = {},
    )
}