CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Paul9999
Paul9999

Reputation: 1001

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.

Upvotes: 11

Views: 4722

Answers (4)

Fayaz
Fayaz

Reputation: 2114

wrt @Hugo Djemaa's answer

CompositionLocalProvider(
            LocalMinimumInteractiveComponentSize provides 0.dp
        ) {
            RadioButton(
                selected = selected,
                onClick = onSelect,
                modifier = Modifier
                    .padding(horizontal = Spacing.nil, vertical = Spacing.nil)
                    .semantics { contentDescription = option.name },
            )
        }

Upvotes: 0

Hugo Djemaa
Hugo Djemaa

Reputation: 81

@Thracian answer's about checkbox works also with RadioButton

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

Upvotes: 6

Darryl Johnson
Darryl Johnson

Reputation: 950

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.

Upvotes: 31

David Aleksanyan
David Aleksanyan

Reputation: 3359

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)

Upvotes: 1

Related Questions