Is there any way to change the default size of a R...

# compose

[Alexander Black]

Is there any way to change the default size of a RadioButton() ? They look absolutely enormous.

[Colton Idle]

Got a screen shot? I actually got a request from my designer to increase the size because they were too small and I agree that it's on the small side, but I couldn't enlarge it lol

[Alexander Black]

[Alexander Black]

obviously my formatting is currently not beautiful.

[Alexander Black]

but doesn’t that look abnormally big?

[Alexander Black]

This is what I’m trying to accomplish

[Alexander Black]

am I crazy or is the above one like 20%+ bigger

[Colton Idle]

Hm. I'll leave this for Louis Pullen-Freilich to comment on. I think it looks fine? But it does look off?

[Alexander Black]

Thank you for getting back to me. Maybe I’ve just been looking at the same view for too long. 😂 always good to get a second opinion

[Abhishek Dewan]

To be honest it's pretty simple to implement a custom
radio button if you want in compose. all you need is a composable that based on state provided to it switches between two different icons and since you can freely resize the icons you can create a radio button of your liking

[Abhishek Dewan]

IIcon(
imageVector = if (isGameStatusSelected(gameListModel.value)) {
Icons.Outlined.CheckCircle
} else {
Icons.Outlined.RadioButtonUnchecked
},
contentDescription = "More",
tint = ScoutTheme.colors.textOnSecondaryBackground,
modifier = Modifier.padding(end = 10.dp)
)

[Alexander Black]

that’s a fantastic point! Thank you @Abhishek Dewan

[Alexander Black]

I didn’t even think about that.

[Abhishek Dewan]

sorry the formatting is off slack on phone isn't the best

[Alexander Black]

no problem. Definitely get what you are saying.

[Abhishek Dewan]

just in case you're looking for an example https://github.com/abhishekdewan101/Scout/blob/782c088bbd79eab3581560020a9d4b3ccdf7f068/app/src/main/java/com/abhishek101/gamescout/features/main/details/AddGameScreen.kt#L266

[Alexander Black]

👍 Fantastic! Super appreciate the help @Abhishek Dewan

[Tin Tran]

You can also use a Box with circle shape to make a custom radio and add custom animation to it too

[Alexander Black]

Oh that’s a great point. I might give that an attempt

[K Merle]

Out of context, but I love bottom navigation icons

[Alexander Black]

@K Merle thank you. 🙂 Wish I could take credit, but my company has a fantastic UX/UI designer.

[Alexander Black]

ended up solving this problem quite easily. My absolute favorite thing about Android is how most everything is open source… just looked at the source code of the Radio Button and realized it’s crazy simple. So I just copied some core components of it… and made my own off of that. I also made a property class so I can change the size whenever I want. They have all these private properties like this:

private const val RadioAnimationDuration = 100

private val RadioButtonRippleRadius = 24.dp
private val RadioButtonPadding = 2.dp
private val RadioButtonSize = 20.dp
private val RadioRadius = RadioButtonSize / 2
private val RadioButtonDotSize = 12.dp
private val RadioStrokeWidth = 2.dp

So I simply created a class to hold those values and created a method to create a default instance that has overrides for everything like this:

fun defaultRadioButtonProperties(
    animationDuration: Int = 100,
    buttonRippleRadius: Dp = 24.dp,
    buttonPadding: Dp = 2.dp,
    buttonSize: Dp = 20.dp,
    radius: Dp = buttonSize / 2,
    // so the default size is 12.dp, but i'd like this to be calculated,
    // so we can change the size without effecting the proportions.
    dotSize: Dp = (0.6 * buttonSize.value).dp,
    strokeWidth: Dp = 2.dp
): RadioButtonProperties {
    return RadioButtonProperties(
        animationDuration,
        buttonRippleRadius,
        buttonPadding,
        buttonSize,
        radius,
        dotSize,
        strokeWidth
    )
}

@Immutable
class RadioButtonProperties(
    val animationDuration: Int,
    val buttonRippleRadius: Dp,
    val buttonPadding: Dp,
    val buttonSize: Dp,
    val radius: Dp,
    val buttonDotSize: Dp,
    val strokeWidth: Dp,
)

[Alexander Black]

then I just pass that into version of the RadioButton composable.

[Colton Idle]

So what size did you change it to?

[Alexander Black]

I think I’m landing on 16 Dp but I’m still playing with it

[Alexander Black]

It’s like a 20% reduction in size. Looks a lot better IMO in the context of a dialogue

[Colton Idle]

Just make sure you hit that 48dp touch target size 😁

[Alexander Black]

Oh good point. 👍👍👍