Thread
#compose
    Alexander Black

    Alexander Black

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

    Colton Idle

    1 year ago
    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

    1 year ago
    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
    Colton Idle

    Colton Idle

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

    Alexander Black

    1 year ago
    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
    a

    Abhishek Dewan

    1 year ago
    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
    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

    Alexander Black

    1 year ago
    that’s a fantastic point! Thank you @Abhishek Dewan
    I didn’t even think about that.
    a

    Abhishek Dewan

    1 year ago
    sorry the formatting is off slack on phone isn't the best
    Alexander Black

    Alexander Black

    1 year ago
    no problem. Definitely get what you are saying.
    Alexander Black

    Alexander Black

    1 year ago
    👍 Fantastic! Super appreciate the help @Abhishek Dewan
    t

    Tin Tran

    1 year ago
    You can also use a
    Box
    with circle shape to make a custom radio and add custom animation to it too
    Alexander Black

    Alexander Black

    1 year ago
    Oh that’s a great point. I might give that an attempt
    K Merle

    K Merle

    1 year ago
    Out of context, but I love bottom navigation icons
    Alexander Black

    Alexander Black

    1 year ago
    @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:
    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,
    )
    then I just pass that into version of the RadioButton composable.
    Colton Idle

    Colton Idle

    1 year ago
    So what size did you change it to?
    Alexander Black

    Alexander Black

    1 year ago
    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
    Colton Idle

    Colton Idle

    1 year ago
    Just make sure you hit that 48dp touch target size 😁
    Alexander Black

    Alexander Black

    1 year ago
    Oh good point. 👍👍👍