Heart switch

<div align="center"> <img src="images/hero.gif" alt="heart-switch Demo"> </div> <br> <h1 align="center">heart-switch</h1> <h3 align="center">A heart-shaped toggle switch component built using Jetpack Compose. Inspired by Tore Bernhoft's <a href="https://dribbble.com/shots/8306407-I-heart-toggle">I heart toggle</a> Dribbble shot and <a href="https://github.com/anatoliygatt">Anatoliy Gatt</a>'s <a href="https://github.com/anatoliygatt/heart-switch">React component</a>.</h3> <br>

Getting Started

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

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

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

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

Usage

Examples are in the source code.

Basic

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

Advanced

kotlinCopy
@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:

kotlinCopy
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:

kotlinCopy
@Composable
fun Thumb(modifier: Modifier, color: State<Color>) = Box(
    modifier = modifier
        .shadow(6.dp, CircleShape)
        .background(color.value, CircleShape)
)