Disabled but clickable switch in jetpack compose

Question

I have a disabled switch but I still want it to be clickable. I tried to add a clickable modifier but it still won't register the click when the switch itself is pressed

Switch(
    modifier = Modifier
        .clickable(
            enabled = myBool,
            onClick = onSwitch,
            indication = null,
            interactionSource = remember { MutableInteractionSource() },
        )
        .constrainAs(actionButton) {
            top.linkTo(text.top)
            end.linkTo(parent.end)
        },
    interactionSource = interactionSource,
    checked = switchChecked,
    enabled = if (myBool) false else actionButtonEnabled,
    onSwitch = onSwitch,
)

How can I make it clickable as if it was enabled?

My first question is, why would you want this? Will this lead to good UX for your users? — Michiel, Nov 12 '21 at 11:22
The switch is part of a paid feature of the app. Should be disabled by default if the feature is locked but still clickable to navigate to a screen with info about the paid features — Tiberiu Paduraru, Nov 12 '21 at 11:34
Check out [this answer](https://stackoverflow.com/a/68878910/3585796) on how you can detect consumed touches. — Phil Dukhov, Nov 12 '21 at 18:40

score 2 · Answer 1 · answered Nov 12 '21 at 11:55

I assume your switch includes a label. Therefore, you should have a click handler for the entire row that the label and switch appear on. This is a good UX design because many users may not exactly tap on the switch. You need to place the label and switch inside a box and have a separate container at a higher Z order be clickable (in this example a Row is used):

val checkedState = remember { mutableStateOf(true) }

Box(modifier = Modifier.fillMaxWidth().wrapContentHeight()) {
    Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
        Text("Activate Premium Features")

        Box(contentAlignment = Alignment.CenterEnd, modifier = Modifier.fillMaxWidth()) {
            Switch(
                checked = checkedState.value,
                onCheckedChange = {
                    checkedState.value = it
                },
                enabled = false
            )
        }
    }

    Row(modifier = Modifier.fillMaxWidth().requiredHeight(45.dp).clickable {
        // Do something
    }) {

    }
}

Abhimanyu · Answer 2 · 2021-11-12T18:47:57.090

Passing paidUser as true will toggle the switch on clicking the Text or Switch.

Passing paidUser as false will allow you to navigate to the required screen.

@Composable
fun DisabledClickableSwitch1(
    paidUser: Boolean,
) {
    var checked by remember {
        mutableStateOf(false)
    }
    val onCheckedChange = {
        if (paidUser) {
            checked = !checked
        } else {
            // Navigate to the require screen to show info about the paid feature here
            Log.e("Test", "Navigate from here")
        }
    }
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable {
                onCheckedChange()
            }
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text("Enable Paid Feature")
        Switch(
            checked = checked,
            enabled = paidUser,
            onCheckedChange = null,
        )
    }
}

The label Text is optional. Can be removed if not required.

Disabled but clickable switch in jetpack compose

2 Answers2

Linked