https://github.com/popovanton0/heart-switch

❤️ A heart-shaped toggle switch component for Jetpack Compose
https://github.com/popovanton0/heart-switch

android heart heart-shape heart-shaped-curve jetpack-compose kotlin switch toggle toggle-switch ui ui-components

Last synced: 3 months ago
JSON representation

❤️ A heart-shaped toggle switch component for Jetpack Compose

• Host: GitHub
• URL: https://github.com/popovanton0/heart-switch
• Owner: popovanton0
• License: apache-2.0
• Created: 2022-02-24T19:07:35.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T20:58:11.000Z (11 months ago)
• Last Synced: 2024-01-24T21:53:23.781Z (11 months ago)
• Topics: android, heart, heart-shape, heart-shaped-curve, jetpack-compose, kotlin, switch, toggle, toggle-switch, ui, ui-components
• Language: Kotlin
• Homepage:
• Size: 753 KB
• Stars: 52
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• jetpack-compose-awesome - heart-switch - ❤️ A heart-shaped toggle switch component for Jetpack Compose (Libraries / UI)
• jetpack-compose-awesome - heart-switch - ❤️ A heart-shaped toggle switch component for Jetpack Compose (Libraries / UI)

README

        


  






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

[![Release](https://jitpack.io/v/popovanton0/heart-switch.svg)](https://jitpack.io/#popovanton0/heart-switch)

[![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)

[![Compatible with Compose — 1.6.0](https://img.shields.io/badge/Compatible%20with%20Compose-1.6.0-brightgreen)](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.6.0)

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

```groovy

repositories {

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

}

```

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

```gradle

dependencies {

    implementation "com.github.popovanton0:heart-switch:LATEST_VERSION"

}

```

## Usage

Examples are in the [source code](https://github.com/popovanton0/heart-switch/blob/main/app/src/main/java/com/popovanton0/heartswitch/demo/MainActivity.kt).

### Basic

```kotlin

@Composable

fun BasicUsage() {

    var state by remember { mutableStateOf(true) }

    HeartSwitch(

        checked = state,

        onCheckedChange = { state = it },

    )

}

```

![Basic Usage Preview](images/basic-usage.png)

### Advanced

```kotlin

@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() },

    )

}

```

![Advanced Usage Preview](images/advanced-usage.png)

You can customize colors using `HeartSwitchColors` class:

```kotlin

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:

```kotlin

@Composable

fun Thumb(modifier: Modifier, color: State) = Box(

    modifier = modifier

        .shadow(6.dp, CircleShape)

        .background(color.value, CircleShape)

) 

```