How to remove RadioButton's padding in Jetpack Compose?

Question

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:

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.

This line `padding(horizontal = 0.dp, vertical = 0.dp)` just has no effect. Each padding modifier adds padding to the current modifiers set, see more details in [why modifiers order matters](https://stackoverflow.com/questions/64206648/jetpack-compose-order-of-modifiers). Suggested answer is the only way to override default element padding. — Phil Dukhov, Feb 14 '22 at 03:29
if set `onClick` then changed Modifier, so you can set `onClick = null` and set clickable for radio button parent — abbasalim, Jul 05 '22 at 08:28

Darryl Johnson · Accepted Answer · 2022-04-13T01:22:58.830

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.

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

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() },
)

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.

I think the "padding" is caused by both of the hard coded `RadioButtonSize` and `RadioButtonPadding` — dumbfingers, Jun 28 '22 at 15:30

score 1 · Answer 2 · answered Feb 13 '22 at 19:59

1

You could specify the Row height in the Row.Modifier like this:

 Row(
    Modifier
        .fillMaxWidth()
        //HERE YOU GO
        .height(30.dp)                
        .padding(horizontal = 0.dp, vertical = 0.dp)

answered Feb 13 '22 at 19:59

David Aleksanyan

2,953
4
29
39

How to remove RadioButton's padding in Jetpack Compose?

2 Answers2

Linked