heart-switch

A heart-shaped toggle switch component built using Jetpack Compose. Inspired by Tore Bernhoft's I heart toggle Dribbble shot and Anatoliy Gatt's React component.

Getting Started

Add the following code to your project's root build.gradle file:

repositories {
    maven { url "https://jitpack.io" }
}

Next, add the dependency below to your module's build.gradle file:

dependencies {
    implementation "com.github.popovanton0:heart-switch:LATEST_VERSION"
}

Usage

Examples are in the source code.

Basic

@Composable
fun BasicUsage() {
    var state by remember { mutableStateOf(true) }
    HeartSwitch(
        checked = state,
        onCheckedChange = { state = it },
    )
}

Advanced

@Composable
fun AdvancedUsage() {
    var state by remember { mutableStateOf(true) }
    HeartSwitch(
        checked = state,
        onCheckedChange = { state = it },
        modifier = Modifier,
        colors = HeartSwitchColors(
            checkedTrackColor = Color(0xFFE91E63),
            checkedTrackBorderColor = Color(0xFFC2185B),
            uncheckedTrackBorderColor = Color(0xFFBDBDBD)
        ),
        width = 34.dp,
        borderWidth = 2.1.dp,
        movementAnimSpec = spring(stiffness = Spring.StiffnessMediumLow),
        colorsAnimSpec = spring(stiffness = Spring.StiffnessMediumLow),
        thumb = { modifier, color ->
            Box(
                modifier = modifier
                    .shadow(12.dp, CircleShape)
                    .background(color.value, CircleShape)
            )
        },
        enabled = true,
        interactionSource = remember { MutableInteractionSource() },
    )
}

You can customize colors using HeartSwitchColors class:

data class HeartSwitchColors(
    val checkedThumbColor: Color = Color.White,
    val checkedTrackColor: Color = Color(0xffff708f),
    val checkedTrackBorderColor: Color = Color(0xffff4e74),
    val uncheckedThumbColor: Color = Color.White,
    val uncheckedTrackColor: Color = Color.White,
    val uncheckedTrackBorderColor: Color = Color(0xffd1d1d1),
)

And, you even can fully customize thumb's appearance using thumb composable param. Default implementation is: