I am using a Switch, and adding Padding to the Modifier doesnt increase the clickable, swipeable are...

# compose

[jaqxues]

I am using a Switch, and adding Padding to the Modifier doesnt increase the clickable, swipeable area . The Switch is unusable with its Hitbox being this small

Is there any way I can increase it with a Modifier or any other way?

[jaqxues]

[Timo Drick]

The order of the modifiers matter. So first call the clickable modifier than the padding

[jaqxues]

yes, how

[jaqxues]

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun Switch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    color: Color = MaterialTheme.colors.secondaryVariant
) {
    val minBound = 0f
    val maxBound = with(DensityAmbient.current) { ThumbPathLength.toPx() }
    val swipeableState = rememberSwipeableStateFor(checked, onCheckedChange, AnimationSpec)
    val interactionState = remember { InteractionState() }
    val isRtl = LayoutDirectionAmbient.current == LayoutDirection.Rtl
    Stack(
        modifier
            .toggleable(
                value = checked,
                onValueChange = onCheckedChange,
                enabled = enabled,
                interactionState = interactionState,
                indication = null
            )
            .swipeable(
                state = swipeableState,
                anchors = mapOf(minBound to false, maxBound to true),
                thresholds = { _, _ -> FractionalThreshold(0.5f) },
                orientation = Orientation.Horizontal,
                enabled = enabled,
                reverseDirection = isRtl,
                interactionState = interactionState,
                resistanceFactorAtMin = 0f,
                resistanceFactorAtMax = 0f
            )
            .padding(DefaultSwitchPadding)
    ) {
        SwitchImpl(
            checked = checked,
            enabled = enabled,
            checkedColor = color,
            thumbValue = swipeableState.offset,
            interactionState = interactionState
        )
    }
}

[jaqxues]

this is the switch implementation from androidx.compose.material.Switch

[Zach Klippenstein (he/him) [MOD]]

You'd have to add your own clickable modifier, which would look odd visually and not support dragging to toggle, to increase the hit area like this. I don't think there's currently a way to do it without changing the implementation of Switch itself, might be worth filing a bug?

[jaqxues]

yeah, thats what I thought, will do

[jaqxues]

the bugreport belongs on the issuetracker.google.com right? in Android Public Tracker > App Development > Jetpack Compose > UI Libraries > Material i suppose?

[jaqxues]

https://issuetracker.google.com/issues/167405821

[matvei]

Thanks for filing this. It won't work if you're setting padding, as it will behaves like outer padding and it's expected to not to pick up toggleable

[matvei]

Have you tried to put Modifier.size on the Switch?

[matvei]

That should do the trick

[matvei]

And if it doesn't -- than we need to fix it

[jaqxues]

this results in some weird design issue

[matvei]

Hm, I see. But click works on the whole area, doesn't it?

[jaqxues]

no

[jaqxues]

var isActive by remember { mutableStateOf(true) }
Switch(isActive, onCheckedChange = { isActive = it }, color = Color(0xFF00AA00), modifier = Modifier.size(48.dp).padding(horizontal = 16.dp))

[matvei]

Oh, what I meant is that you need to remove padding completely, sorry

[jaqxues]

alright

[jaqxues]

still the same

[matvei]

It seems like this visual artifact is a separate issue you're hitting

[matvei]

Thanks for filing this, I will take a look. In general

var isActive by remember { mutableStateOf(true) }
Switch(isActive, onCheckedChange = { isActive = it }, color = Color(0xFF00AA00), modifier = Modifier.size(48.dp))

This should result with proper switch, clickable within all 48dps and centered within this 48.dp box

[matvei]

Padding modifier shouldn't work and this is by design, because this padding comes before toggleable (as you provide it for the whole Switch) and will pad the toggleable area as well

[jaqxues]

Yes, thanks for looking into it!

[matvei]

Filed http://issuetracker.google.com/issues/167550767 for a broken Switch UI when size is set explicitly, thanks!

[jaqxues]

Actually the intended behaviour implies there is no way to simply make the "hitbox" itself (toggleable + swipeable area) bigger, and not the entire Switch. So if you want a bigger Hitbox, you need a bigger UI-Element right?

[matvei]

Switch itself is a fixed density dependent size always and will never scale no matter the hitbox, so passing Modifier.size will increase toggeable and draggable area, while switch will be the same size and centered

[jaqxues]

Alright, sounds good then, thanks!

[jaqxues]

I've just seen it's fixed, thank you!

[matvei]

No problem, thanks for reporting it!