I use Switch component I see the space above and below. Has anyone had the same problem as me? How t...

# compose

[PhongBM]

I use Switch component I see the space above and below. Has anyone had the same problem as me? How to remove that?

[Stylianos Gakis]

Probably is as such so that it meets accessibility standards. If the switch specs from material (which I assume you are using here) do not fit your requirements you may have to look at the source code of that function, copy it over to your project and adjust accordingly.
But I may be making the wrong assumptions here, you can post a screenshot showing what you mean by “space above and below”

[PhongBM]

I colored components, row, text and switch. I want the height of Switch (blue background) is fit to UI

[PhongBM]

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(color = Color.Red),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "This is a text",
        modifier = Modifier.background(color = Color.Yellow)
    )
    Switch(
        checked = false,
        onCheckedChange = {},
        modifier = Modifier
            .background(color = Color.Blue)
    )
}

[Stylianos Gakis]

Yes so it does seem to do what I assumed, which is increase it’s size to an appropriate value to meet accessibility standards.
Probably due to this line https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]droidx/compose/material3/Switch.kt;l=150?q=material3%20Switch and you can see what it does here https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]iveComponentSize.kt;l=53-54?q=minimumInteractiveComponentSize.

Why do you need it to measure smaller than that, is it absolutely necessary to make the switch harder to press in your case?

[PhongBM]

Thank for your answer. So it’s a built to standard design. I’m new to Compose and have some questions.
But, if I want to change the height how should I do it?

[Stylianos Gakis]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1676011769261359?thread_ts=1676010971.218729&cid=CJLTWPH7S
Copy the entire implementation to our project and adjust according to your needs

[Stylianos Gakis]

Refer to this this and this for other people describing better why this is the case.

[PhongBM]

thank you very much. I’ll checkout it.

[Albert Chang]

In this case you can also use

CompositionLocalProvider(
    LocalMinimumInteractiveComponentEnforcement provides false
) {
    Switch()
}

(Or LocalMinimumTouchTargetEnforcement if you are using stable version)