https://kotlinlang.org logo
#compose
Title
# compose
a

Alexander Black

08/06/2021, 11:42 PM
Is there any way to change the default size of a RadioButton() ? They look absolutely enormous.
c

Colton Idle

08/06/2021, 11:54 PM
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
a

Alexander Black

08/06/2021, 11:56 PM
obviously my formatting is currently not beautiful.
but doesn’t that look abnormally big?
This is what I’m trying to accomplish
am I crazy or is the above one like 20%+ bigger
c

Colton Idle

08/07/2021, 12:04 AM
Hm. I'll leave this for Louis Pullen-Freilich to comment on. I think it looks fine? But it does look off?
👍 1
a

Alexander Black

08/07/2021, 12:06 AM
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
👍 1
a

Abhishek Dewan

08/07/2021, 2:03 AM
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
👍 1
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) )
a

Alexander Black

08/07/2021, 2:04 AM
that’s a fantastic point! Thank you @Abhishek Dewan
I didn’t even think about that.
a

Abhishek Dewan

08/07/2021, 2:04 AM
sorry the formatting is off slack on phone isn't the best
a

Alexander Black

08/07/2021, 2:05 AM
no problem. Definitely get what you are saying.
a

Alexander Black

08/07/2021, 2:08 AM
👍 Fantastic! Super appreciate the help @Abhishek Dewan
t

Tin Tran

08/07/2021, 4:38 AM
You can also use a
Box
with circle shape to make a custom radio and add custom animation to it too
👍 1
a

Alexander Black

08/07/2021, 4:39 AM
Oh that’s a great point. I might give that an attempt
k

K Merle

08/07/2021, 6:34 AM
Out of context, but I love bottom navigation icons
👍 1
a

Alexander Black

08/07/2021, 2:24 PM
@K Merle thank you. 🙂 Wish I could take credit, but my company has a fantastic UX/UI designer.
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:
Copy code
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:
Copy code
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
    )
}
Copy code
@Immutable
class RadioButtonProperties(
    val animationDuration: Int,
    val buttonRippleRadius: Dp,
    val buttonPadding: Dp,
    val buttonSize: Dp,
    val radius: Dp,
    val buttonDotSize: Dp,
    val strokeWidth: Dp,
)
then I just pass that into version of the RadioButton composable.
c

Colton Idle

08/07/2021, 4:36 PM
So what size did you change it to?
a

Alexander Black

08/07/2021, 4:51 PM
I think I’m landing on 16 Dp but I’m still playing with it
It’s like a 20% reduction in size. Looks a lot better IMO in the context of a dialogue
c

Colton Idle

08/07/2021, 5:25 PM
Just make sure you hit that 48dp touch target size 😁
a

Alexander Black

08/07/2021, 5:49 PM
Oh good point. 👍👍👍
3 Views