I use Switch component I see the space above and below Has a kotlinlang #compose

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

02/10/2023, 6:52 AM

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

Copy code

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

02/10/2023, 6:57 AM

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

02/10/2023, 7:12 AM

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

02/10/2023, 7:15 AM

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

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

PhongBM

02/10/2023, 7:20 AM

thank you very much. I’ll checkout it.

Albert Chang

02/10/2023, 9:02 AM

In this case you can also use

Copy code

CompositionLocalProvider(
    LocalMinimumInteractiveComponentEnforcement provides false
) {
    Switch()
}

(Or

LocalMinimumTouchTargetEnforcement

if you are using stable version)

33 Views