I have designed a custom switch in Jetpack compose...

# compose

[Lokik Soni]

I have designed a custom switch in Jetpack compose and not able to use it properly it is not respecting its parent and getting out of the view.

[Filip Wiesner]

Could you move the huge code samples to a thread?
(as said here)

[Lokik Soni]

Switch code:

@Composable
fun IOSSwitch(
    modifier: Modifier = Modifier,
    scale: Float = 2f,
    width: Dp = 36.dp,
    height: Dp = 20.dp,
    thumbSize: Dp = 2.dp,
    isSwitchOn: Boolean = false,
    rotateUp: Boolean = false,
    checkedTrackColor: Color = Color.Gray.copy(0.2f),
    uncheckedTrackColor: Color = Color.Gray.copy(0.1f),
    checkedThumbColor: Color = MaterialTheme.colors.primary,
    uncheckedThumbColor: Color = MaterialTheme.colors.surface,
    onCheckedChange: () -> Unit
) {

    // TODO optimize track color default value
    val thumbRadius = (height / 2) - thumbSize
    val animateThumb by animateFloatAsState(
        targetValue = with(LocalDensity.current) {
            if (isSwitchOn) (width - thumbRadius - thumbSize).toPx()
            else (thumbRadius + thumbSize).toPx()
        },
        animationSpec = spring(Spring.DampingRatioHighBouncy),
    )
    val thumbColor by animateColorAsState(
        targetValue = if (isSwitchOn) checkedThumbColor else uncheckedThumbColor,
        animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing)
    )
    val trackColor by animateColorAsState(
        targetValue = if (isSwitchOn) checkedTrackColor else uncheckedTrackColor,
        animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing)
    )

    Box(
        modifier = modifier
            .size(width = width, height = height)
            .scale(scale = scale)
            .rotate(if (rotateUp) 270f else 0f)
            .pointerInput(Unit) {
                detectTapGestures(
                    onTap = {
                        onCheckedChange()
                    }
                )
            }.drawBehind {
                // Track
                drawRoundRect(
                    color = trackColor,
                    cornerRadius = CornerRadius(x = 10.dp.toPx(), y = 10.dp.toPx()),
                )
                // Thumb
                drawCircle(
                    color = thumbColor,
                    radius = thumbRadius.toPx(),
                    center = Offset(x = animateThumb, y = size.height / 2),
                    //    style = Stroke(5f)        // Make the thumb as ring of stroke 5
                )
            }
    )
}

Using the above compose here but not getting proper output.

@Composable
fun SettingCard(
    modifier: Modifier = Modifier,
    icon: ImageVector,
    iconColor: Color,
    title: String,
    subtitle: String,
) {

    Row(
        modifier = modifier
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = <http://Alignment.Top|Alignment.Top>
    ) {
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(30.dp),
        ) {
            Icon(
//                modifier = Modifier
//                    .background(iconColor.copy(0.1f), shape = CircleShape)
//                    .padding(10.dp),
                imageVector = icon,
                tint = iconColor,
                contentDescription = title
            )
            Spacer(modifier = Modifier.padding(20.dp))
            Text(text = title, style = MaterialTheme.typography.h6)
            Text(text = subtitle, style = MaterialTheme.typography.caption)
        }
        IOSSwitch(
            rotateUp = true,
            isSwitchOn = true
        ) {

        }
    }
}

[Stylianos Gakis]

Have you tried going with 90 degrees instead of 270, how does that look?
Also have you tried going with a Canvas instead of a drawBehind? Any changes then?

[Lokik Soni]

Yes I have tried both but not worked I used Box instead of Canvas because I was thinking I will respect its parent and will not go outside but not worked.
I want this design

[Lokik Soni]

But i want to tell you after setting scale to 1f in IOSwitch there is some improvement but not perfect.