Heart Switch
by Anton Popov
❤️ A heart-shaped toggle switch component for Jetpack Compose
View on GitHubDocumentation
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:
@Composable
fun Thumb(modifier: Modifier, color: State<Color>) = Box(
modifier = modifier
.shadow(6.dp, CircleShape)
.background(color.value, CircleShape)
)
Similar Libraries
Animation Playground
Practical examples of animations created using the intuitive animation API's that Compose offers
AnimationExamples
Flippable
A Jetpack Compose library for animating a flip transition between the front and back of something, such as a card.
AnimationGesture
Bees And Bombs Compose
Implementing some cool animations using Jetpack Compose
AnimationExamples
Doom Compose
An implementation of the DOOM fire effect using Jetpack Compose
Animation
Browse by Category
Be the first to discover new Compose libraries
Curated Insights
Digest in 5 minutes or less
Android Analysis
Entertaining takes on happenings
Insider Tips
From top Android developers
Hidden Gems
You won't find elsewhere
"
"Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose. I eagerly await each issue, not just for the Compose gems honestly but for Vinay's unique insights, stories, and finds. The Dev Delight and Featured Dev sections are particular favorites of mine! He really should do a podcast."
— Kaushik Gopal
Principal Engineer @ Instacart | Host of the Fragmented Podcast | GDE for Android
Join thousands of Android devs who look forward to Dispatch every week
