Fully customizable slide-to-unlock UI component enhances apps with seamless integration, intuitive customization options, and dynamic, interactive features for diverse styling possibilities.
➡️ Fully customizable slide to unlock UI component for Jetpack Compose and KMP.
If you want to learn more about how to implement the slide-to-unlock library, how to integrate it with RevenueCat's in-app purchases in Jetpack Compose, and explore real-world examples, check out Enhance in-app purchase experiences with slide to unlock in Jetpack Compose.
Slide to Unlock is maintained by RevenueCat. RevenueCat SDK for Android allows you to implement in-app subscriptions and a paywall system on top of Google Play Billing. Also, anyone can contribute to improving code, docs, or something following our Contributing Guideline.
If you're using Version Catalog, you can configure the dependency by adding it to your libs.versions.toml file as follows:
[versions]
#...
slidetounlock = "1.1.0"
[libraries]
#...
compose-slidetounlock = { module = "com.revenuecat.purchases:slide-to-unlock", version.ref = "slidetounlock" }
Add the dependency below to your module's build.gradle.kts file:
dependencies {
implementation("com.revenuecat.purchases:slide-to-unlock:$version")
// if you're using Version Catalog
implementation(libs.compose.slidetounlock)
}
For Kotlin Multiplatform, add the dependency below to your module's build.gradle.kts file:
sourceSets {
val commonMain by getting {
dependencies {
implementation(libs.compose.slidetounlock)
}
}
}
You can easily implement a slide-to-unlock feature using the SlideToUnlock composable. It offers intuitive customization options for colors, text, shapes, and even the entire content of the thumb and hint, allowing you to create a wide variety of styles. If you want to just directly dive into the sample codes, check out the demo project.
The SlideToUnlock composable exposes relevant state parameters, allowing you to hoist the slide status and track when the slide action is completed via a callback.
state: A SlideState value that controls the component. SlideState.Idle keeps the thumb draggable; , and lock the thumb at the end of the track and show the matching indicator.var slideState by remember { mutableStateOf(SlideState.Idle) }
SlideToUnlock(
state = slideState,
modifier = Modifier.fillMaxWidth(),
onSlideCompleted = { slideState = SlideState.Loading },
)
SlideToUnlock models the full lifecycle of the action triggered by sliding via SlideState:
A typical asynchronous flow:
var slideState by remember { mutableStateOf(SlideState.Idle) }
LaunchedEffect(slideState) {
if (slideState == SlideState.Loading) {
slideState = try {
doSomethingSuspending()
SlideState.Success
} catch (e: Exception) {
SlideState.Error
}
}
}
SlideToUnlock(
state = slideState,
hintTexts = HintTexts(
defaultText = "Slide to confirm",
slidedText = "Confirming...",
successText = "Confirmed",
errorText = "Something went wrong",
),
onSlideCompleted = { slideState = SlideState.Loading },
)
If you're upgrading from a previous version, the
SlideToUnlock(isSlided: Boolean, ...)overload still exists but is deprecated —isSlided = truemaps toSlideState.Loading. Migrate to thestate-based API to use the success and error states.
The track exposes a Role.Button semantics node with a state description derived from HintTexts. While is , it also publishes an accessibility "click" action (labeled by the parameter) and is focusable, so pressing or while focused triggers — the same as completing the gesture. Provide a to override the default announcement, and set (e.g. from your "reduce motion" preference) to make the thumb snap between positions and the hint switch without a cross-fade.
SlideToUnlock(
state = slideState,
actionLabel = "Confirm",
contentDescription = "Confirm your action by sliding the thumb to the end",
animationsEnabled = !reduceMotionEnabled,
onSlideCompleted = { slideState = SlideState.Loading },
)
You can customize all colors of the component by leveraging an instance of DefaultSlideToUnlockColors, which contains some prebuilt behaviors for providing proper color sets depending on the states, and you can pass it to the colors parameter. This allows you to style the track, hint text, thumb, and progress indicator to match your app's theme.
var slideState by remember { mutableStateOf(SlideState.Idle) }
SlideToUnlock(
state = slideState,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
colors = DefaultSlideToUnlockColors(
startTrackColor = Color.DarkGray,
endTrackColor = Color(0xFF11D483), // A green color
thumbColor = Color.White,
slidedHintColor = Color.White,
),
onSlideCompleted = { slideState = SlideState.Loading },
)
You can also provide a Brush for the track background for more advanced gradient effects.
val colorStops = arrayOf(
0.0f to Color.Black,
1f to Color(0xDC393636),
)
SlideToUnlock(
state = slideState,
// ...
colors = DefaultSlideToUnlockColors(
trackBrush = Brush.verticalGradient(colorStops = colorStops),
// ...
),
onSlideCompleted = { slideState = SlideState.Loading },
)
With DefaultSlideToUnlockColors, you can customize the properties below:
While DefaultSlideToUnlockColors offers a convenient way to set static and interpolated colors, you can achieve complete, dynamic control over the component's appearance by creating your own class that implements the SlideToUnlockColors interface.
For example, you can create your own color sets that awares Material theme color scheme:
The text displayed in the track can be customized by passing a HintTexts object. This allows you to define different messages for the initial state and the final "slided" state.
var slideState by remember { mutableStateOf(SlideState.Idle) }
SlideToUnlock(
state = slideState,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
hintTexts = HintTexts(
defaultText = "Slide to subscribe",
slidedText = "Subscribing...",
),
onSlideCompleted = { slideState = SlideState.Loading },
)
thumb and hint ComposablesFor complete control over the appearance and behavior of the thumb and hint, you can provide your own composable lambdas to the thumb and hint parameters. These are slot APIs that allow you to replace the default implementations entirely.
The thumb slot provides you with the current state (SlideState), the current slideFraction, the colors object, the thumbSize, and the orientation. You can use these to create dynamic and interactive thumbs.
This example replaces the default arrow icon with a rotating restore icon and shows a success checkmark when the action completes.
Similarly, the hint composable slot gives you full control over the content displayed in the track. You can add animations, different text styles, or even other components like progress indicators.
This example replaces the default text with a Row that includes a CircularProgressIndicator when the slide is completed.
SlideToUnlock(
state = slideState,
// ...
onSlideCompleted = { slideState = SlideState.Loading },
hint = { state, fraction, hintTexts, colors, paddings, _ ->
AnimatedContent(
modifier = Modifier.align(Alignment.Center),
targetState = state,
) { current ->
if (current != SlideState.Idle) {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
CircularProgressIndicator(
modifier = Modifier.size(24.dp),
color = Color.White,
strokeWidth = dp,
)
Text(
modifier = Modifier.padding(start = dp),
text = hintTexts.slidedText,
color = colors.slidedHintColor(),
style = MaterialTheme.typography.titleMedium,
)
}
} {
Text(
text = hintTexts.defaultText,
color = colors.hintColor(fraction),
style = MaterialTheme.typography.titleMedium,
)
}
}
},
)
You can customize the behavior and feel of the slide gesture using the orientation and fractionalThreshold parameters.
By default, the component operates horizontally. You can change this to a vertical slide by setting the orientation parameter to SlideOrientation.Vertical.
When using a vertical orientation, it's important to provide appropriate size constraints to the component's modifier, as it will orient itself along the y-axis.
Example: A Vertical Slider
var slideState by remember { mutableStateOf(SlideState.Idle) }
SlideToUnlock(
state = slideState,
onSlideCompleted = { slideState = SlideState.Loading },
orientation = SlideOrientation.Vertical,
modifier = Modifier
.fillMaxHeight()
.width(80.dp) // A fixed width is recommended for vertical sliders
.padding(vertical = 32.dp)
)
The fractionalThreshold parameter controls how far the user must drag the thumb before the slide action is considered complete upon release. It is a Float value between 0.0 and 1.0, representing the percentage of the track that must be covered.
The default value is 0.85f (85%), which requires a deliberate gesture. You can lower this value to make the slide easier to complete.
Example: An Easier-to-Complete Slider
This slider will "snap" to the end and trigger onSlideCompleted if the user drags it just past the halfway point.
var slideState by remember { mutableStateOf(SlideState.Idle) }
SlideToUnlock(
state = slideState,
onSlideCompleted = { slideState = SlideState.Loading },
// The slide will complete if the user drags past the 50% mark.
fractionalThreshold = 0.5f,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
)
If you need to react to the slide progress in real-time, you can use the onSlideFractionChanged callback. This lambda is invoked continuously as the user drags the thumb, providing a Float value from 0.0 (start) to 1.0 (end).
This is useful for creating complex animations synchronized with the slide gesture.
var slideProgress by remember { mutableFloatStateOf(0f) }
// You can use `slideProgress` to animate other elements on the screen.
Text(
text = "Progress: ${(slideProgress * 100).toInt()}%",
modifier = Modifier.alpha(slideProgress)
)
SlideToUnlock(
state = slideState,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
onSlideCompleted = { slideState = SlideState.Loading },
onSlideFractionChanged = { fraction ->
slideProgress = fraction
}
)
Slide to Unlock supports integrating features with RevenueCat SDK for your Android & Kotlin Multiplatform project, and you can simply implement "Slide to Purchases" or "Slide to Subscribe" it by adding the dependency below:
[versions]
#...
slidetounlockPurchases = "1.1.0"
[libraries]
#...
compose-slidetounlock-purchases = { module = "com.revenuecat.purchases:slide-to-unlock-purchases", version.ref = "slidetounlockPurchases" }
Add the dependency below to your module's build.gradle.kts file:
dependencies {
implementation("com.revenuecat.purchases:slide-to-unlock-purchases:$version")
// if you're using Version Catalog
implementation(libs.compose.slidetounlock.purchases)
}
For Kotlin Multiplatform, add the dependency below to your module's build.gradle.kts file:
sourceSets {
val commonMain by getting {
dependencies {
implementation(libs.compose.slidetounlock.purchases)
}
}
}
It's very similar to use like SlideToUnlock composable function, but it contains a few more parameters as required to purchases in app product with RevenueCat SDK.
SlideToPurchases is a customizable Jetpack Compose component that provides a sleek "slide-to-unlock" UI to initiate in-app purchases through the RevenueCat SDK. It's designed to be a drop-in replacement for a traditional purchase button, offering a more engaging and intentional user experience.
The library provides a set of overloaded SlideToPurchases composables to handle various purchasing scenarios, including different product types, subscription upgrades, and promotional offers, all while abstracting away the underlying purchase logic.
To get started, simply add the SlideToPurchases composable to your UI. The primary entry points require you to provide a purchaseable entity, such as a Package or a StoreProduct.
PackageThis is the most common use case. You fetch your offerings from RevenueCat and pass the desired Package to the composable. The component will handle the rest.
The onPurchaseStateChanged callback is the primary way to react to the outcome of the purchase flow. It provides a PurchaseState sealed class, which can be one of three types:
PurchaseState.Loading: Triggered when the slide is completed and the purchase process begins.PurchaseState.Success: Triggered when the purchase is successful. It contains the SuccessfulPurchase object from the RevenueCat SDK.PurchaseState.Error: Triggered if the purchase fails or is cancelled by the user. It contains the Exception.The SlideToPurchases composable is provided as a set of overloads, each tailored to a specific purchasing scenario.
All SlideToPurchases overloads share a set of common parameters for customization and event handling:
modifier: Modifier: The to be applied to the component.StoreProductUse this overload for purchasing a standalone StoreProduct. For subscriptions on Google Play, you can also manage upgrades.
@Composable
fun SlideToPurchases(
storeProduct: StoreProduct,
// ... common and platform-specific parameters
)
oldProductId: String?: (Google Play only) The product ID of a subscription to upgrade from.replacementMode: GoogleReplacementMode: (Google Play only) The proration mode for the upgrade.PackageThis is the recommended approach when using RevenueCat's Offerings system.
@Composable
fun SlideToPurchases(
packageToPurchase: Package,
// ... common and platform-specific parameters
)
SubscriptionOptionA Google Play-only overload for purchasing a specific subscription option, such as a particular plan and offer.
@Composable
fun SlideToPurchases(
subscriptionOption: SubscriptionOption,
// ... common and platform-specific parameters
)
PromotionalOfferAn App Store-only overload for applying a signed promotional offer to a purchase.
@Composable
fun SlideToPurchases(
packageToPurchase: Package, // or storeProduct: StoreProduct
promotionalOffer: PromotionalOffer,
// ... common parameters
)
WinBackOfferAn iOS-only overload (requires iOS 18+) for applying a win-back offer to a lapsed subscription.
@Composable
fun SlideToPurchases(
packageToPurchase: Package, // or storeProduct: StoreProduct
winBackOffer: WinBackOffer,
// ... common parameters
)
By providing these clear and distinct overloads, SlideToPurchaces simplifies the process of integrating a beautiful and functional purchase UI into your Jetpack Compose app, allowing you to focus on your app's core logic while providing a great user experience.
The initial idea comes up with patrick-elmquist's demo code & relevant blog post. Special thanks to his work.
Support it by joining stargazers for this repository. :star:
Also, follow the main contributor on GitHub for the next creations! 🤩
Copyright (c) 2025 RevenueCat, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
LoadingSuccessErroronSlideCompleted: A lambda that is invoked when the user successfully slides the thumb to the end (or activates the component via an accessibility action / keyboard). You should typically use this to move your state to SlideState.Loading.| State | Behavior | Default indicator | Hint text |
|---|
Idle | Thumb is draggable | Arrow | HintTexts.defaultText |
Loading | Thumb locked at end | Circular progress | HintTexts.slidedText |
Success | Thumb locked at end | Check icon | HintTexts.successText (falls back to slidedText) |
Error | Thumb locked at end | Close icon | HintTexts.errorText (falls back to slidedText) |
stateIdleactionLabelonSlideCompletedcontentDescriptionanimationsEnabled = false
private class MaterialThemedSlideToUnlockColors : SlideToUnlockColors {
override fun trackColor(slideFraction: Float): Color {
// Linearly interpolate from the theme's surface color to the primary color.
return lerp(
start = MaterialTheme.colorScheme.surfaceVariant,
stop = MaterialTheme.colorScheme.primary,
fraction = (slideFraction / 0.85f).coerceIn(0f, 1f)
)
}
override fun trackBrush(slideFraction: Float): Brush? = null
override fun hintColor(slideFraction: Float): Color {
// Fade out the text color from onSurfaceVariant to transparent.
val startColor = MaterialTheme.colorScheme.onSurfaceVariant
return lerp(
start = startColor,
stop = startColor.copy(alpha = 0f),
fraction = (slideFraction / 0.45f).coerceIn(0f, 1f)
)
}
override fun slidedHintColor(): Color {
return MaterialTheme.colorScheme.onPrimary
}
override fun thumbColor(): Color {
return MaterialTheme.colorScheme.onPrimary
}
override fun thumbBrush(slideFraction: Float): Brush? = null
override fun thumbIconColor(): Color {
return MaterialTheme.colorScheme.primary
}
override fun progressColor(): Color {
return MaterialTheme.colorScheme.onPrimary
}
}
var slideState by remember { mutableStateOf(SlideState.Idle) }
LaunchedEffect(slideState) {
if (slideState == SlideState.Loading) {
delay(1500) // Simulate in-app purchases or any tasks
slideState = SlideState.Success
}
}
SlideToUnlock(
state = slideState,
// ...
onSlideCompleted = { slideState = SlideState.Loading },
thumb = { state, fraction, colors, size, _ ->
Box(
modifier = Modifier
.size(size)
.background(color = colors.thumbColor(), shape = CircleShape),
contentAlignment = Alignment.Center,
) {
when (state) {
SlideState.Loading -> CircularProgressIndicator(
modifier = Modifier.padding(8.dp),
color = colors.progressColor(),
strokeWidth = 3.dp,
)
SlideState.Success -> Icon(
imageVector = Icons.Default.Check,
contentDescription = "Completed",
tint = colors.successIconColor(),
)
SlideState.Error -> Icon(
imageVector = Icons.Default.Close,
contentDescription = "Failed",
tint = colors.errorIconColor(),
)
SlideState.Idle -> Icon(
modifier = Modifier
.size(30.dp)
.rotate(fraction * -360), // Rotate the icon as the user slides
imageVector = Icons.Default.Restore,
tint = colors.thumbIconColor(),
contentDescription = "Slide to restore",
)
}
}
},
// ...
)
Purchases.sharedInstance.awaitPurchase methods.Loading, Success, Error) through a simple callback.StoreProduct, Package, SubscriptionOption, and with PromotionalOffers and WinBackOffers.// inside your coroutine scope
val currentOffering = Purchases.sharedInstance.awaitOfferings().current
val monthlyPackage = currentOffering?.getPackage("monthly")
if (monthlyPackage != null) {
var purchaseState by remember { mutableStateOf<PurchaseState?>(null) }
SlideToPurchases(
packageToPurchase = monthlyPackage,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
onPurchaseStateChanged = { newPurchaseState ->
purchaseState = newPurchaseState
// Handle state changes, e.g., show a dialog on success/error
}
)
// Optionally display the state
when (val state = purchaseState) {
is PurchaseState.Loading -> { /* Show a loading indicator */ }
is PurchaseState.Success -> { /* Navigate to a success screen */ }
is PurchaseState.Error -> { /* Show an error message */ }
null -> { /* Initial state */ }
}
}
Modifiercolors: SlideToUnlockColors: An object to customize the component's appearance. Use DefaultSlideToUnlockColors() to get started.hintTexts: HintTexts: An object to customize the text displayed in the track. Use HintTexts.defaultHintTexts() for default values.onSlideCompleted: () -> Unit: A callback invoked immediately when the user completes the slide gesture, right before the purchase flow is initiated.onPurchaseStateChanged: (PurchaseState) -> Unit: A callback that receives updates on the state of the purchase operation.Surfaced from shared tags and platforms — no rankings paid for.