How can I fix toggle animation in Switch (Compose)?

Question

I have a toggle issue with Switch that can look as following:

In the picture you can see only two of many possible states.

I have complex business logics in ViewModel that updates my whole screen state after clicking on switch.

However, in order to make it easier and demonstrate you the problem I found a simple example that is similar to my real-life scenario.

@Composable
fun MyCoolWidget() {
    var isChecked by remember { mutableStateOf(true) }
    val scope = rememberCoroutineScope()
    Switch(
        checked = isChecked,
        onCheckedChange = {
            scope.launch {
                delay(50) // to mimic the business logic and state update delay
                          // I use the 50 millis delay and then update the state
                isChecked = it
            }
        },
    )
}

Now you can test it by putting your finger to the one edge, holding the finger on the screen and moving it to the opposite edge. (Don't click on switch, SWIPE it!) Observe the result. How can I fix this problem?

Dependencies: androidx.compose.material:material:1.1.1. Jetpack Compose version - 1.2.0-rc01. Kotlin version - 1.6.21

Thanks, best wishes!

Answer 1

It looks like a bug.
I would code my custom switch if i were you because you have to disable swipe feature.

Here is my custom ios like switch :

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MySwitch(
    modifier: Modifier = Modifier,
    isChecked: Int,
    onCheckedChange: (checked: Int) -> Unit
) {
  
    var size by remember {
        mutableStateOf(IntSize.Zero)
    }
    val marbleSize by remember(size) {
        mutableStateOf(size.height.div(2))
    }
    val yOffset by remember(size, marbleSize) {
        mutableStateOf((size.height.div(2) - marbleSize.div(2f)).toInt())
    }

    val marblePadding = 4.dp.value
    val scope = rememberCoroutineScope()
    val swipeableState = rememberSwipeableState(isChecked)

    val backgroundColor = animateColorAsState(
        targetValue = if (swipeableState.currentValue != 0) Color(0xFF34C759) else Color(0xD6787880)
    )
    val sizePx = size.width.minus(marbleSize + marblePadding.times(2))
    val anchors = mapOf(0f to 0, sizePx - 1f to 1)
    LaunchedEffect(key1 = swipeableState.currentValue, block = {
        onCheckedChange.invoke(swipeableState.currentValue)
    })
    Box(
        modifier = modifier
            .aspectRatio(2f)
            .clip(CircleShape)
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                enabled = false, //because you need to disable swipe
                orientation = Orientation.Horizontal
            )
            .pointerInput(Unit) {
                detectTapGestures(
                    onTap = {
                        if (it.x > size.width.div(2))
                            scope.launch {
                                swipeableState.animateTo(
                                    1,
                                    anim = tween(250, easing = LinearEasing)
                                )
                            }
                        else
                            scope.launch {
                                swipeableState.animateTo(
                                    0,
                                    anim = tween(250, easing = LinearEasing)
                                )

                            }
                    }
                )
            }
            .background(backgroundColor.value)
            .onSizeChanged {
                size = it
            }

    ) {
        Box(
            modifier = Modifier
                .padding(horizontal = marblePadding.dp)
                .offset {
                    IntOffset(
                        x = swipeableState.offset.value.roundToInt(),
                        y = yOffset
                    )
                }
                .size(with(LocalDensity.current) { marbleSize.toDp() })
                .clip(CircleShape)
                .background(Color.Red)
        )
    }
}

I hope it helps you.