Skip to content

feat: add vertical orientation support to SlideToUnlock #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 22, 2025
Merged

feat: add vertical orientation support to SlideToUnlock #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions app/api/app.api
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
public final class com/revenuecat/slidetounlockdemo/ComposableSingletons$MainActivityKt {
public static final field INSTANCE Lcom/revenuecat/slidetounlockdemo/ComposableSingletons$MainActivityKt;
public fun <init> ()V
public final fun getLambda$-238258827$app_release ()Lkotlin/jvm/functions/Function9;
public final fun getLambda$-55614235$app_release ()Lkotlin/jvm/functions/Function8;
public final fun getLambda$-794938742$app_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$136809679$app_release ()Lkotlin/jvm/functions/Function7;
public final fun getLambda$1441203408$app_release ()Lkotlin/jvm/functions/Function7;
public final fun getLambda$1248779494$app_release ()Lkotlin/jvm/functions/Function8;
public final fun getLambda$1783585206$app_release ()Lkotlin/jvm/functions/Function2;
}

Expand All @@ -12,3 +13,7 @@ public final class com/revenuecat/slidetounlockdemo/MainActivity : androidx/acti
public fun <init> ()V
}

public final class com/revenuecat/slidetounlockdemo/MainActivityKt {
public static final fun StackedVerticalText-FNF3uiM (Ljava/lang/String;Landroidx/compose/ui/Modifier;JLandroidx/compose/runtime/Composer;II)V
}

155 changes: 144 additions & 11 deletions app/src/main/kotlin/com/revenuecat/slidetounlockdemo/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,10 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
Expand All @@ -56,6 +58,7 @@ import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.res.painterResource
Expand All @@ -65,6 +68,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.revenuecat.purchases.slidetounlock.DefaultSlideToUnlockColors
import com.revenuecat.purchases.slidetounlock.HintTexts
import com.revenuecat.purchases.slidetounlock.SlideOrientation
import com.revenuecat.purchases.slidetounlock.SlideToUnlock
import com.valentinilk.shimmer.shimmer
import kotlinx.coroutines.delay
Expand All @@ -91,6 +95,8 @@ class MainActivity : ComponentActivity() {
SlideToUnlockStyle3()

SlideToUnlockStyle4()

SlideToUnlockStyle5()
}
}
}
Expand Down Expand Up @@ -129,7 +135,8 @@ private fun SlideToUnlockStyle1() {
slidedHintColor = Color.White,
),
onSlideCompleted = { isSlided = true },
thumb = { slided, fraction, colors, size ->

thumb = { slided, fraction, colors, size, orientation ->
Box(
modifier = Modifier.size(size),
) {
Expand All @@ -142,16 +149,17 @@ private fun SlideToUnlockStyle1() {
)
}
},
hint = { slided, fraction, hintTexts, colors, paddings ->

hint = { slided, fraction, hintTexts, colors, paddings, orientation ->
val layoutDirection = LocalLayoutDirection.current

AnimatedContent(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.Center),
targetState = isSlided,
) { slided ->
if (!slided) {
targetState = slided,
) { slidedState ->
if (!slidedState) {
Text(
modifier = Modifier
.fillMaxWidth()
Expand Down Expand Up @@ -214,7 +222,7 @@ private fun SlideToUnlockStyle2() {
isSlided = true
Toast.makeText(context, "unlocked!", Toast.LENGTH_SHORT).show()
},
thumb = { slided, fraction, colors, size ->
thumb = { slided, fraction, colors, size, orientation ->
val colorStops = arrayOf(
0.0f to Color.White,
1f to colors.thumbColor(),
Expand All @@ -237,7 +245,7 @@ private fun SlideToUnlockStyle2() {
)
}
},
hint = { slided, fraction, hintTexts, colors, paddings ->
hint = { slided, fraction, hintTexts, colors, paddings, orientation ->
val layoutDirection = LocalLayoutDirection.current
Crossfade(
modifier = Modifier
Expand Down Expand Up @@ -295,7 +303,7 @@ private fun SlideToUnlockStyle3() {
),
colors = colors,
onSlideCompleted = { isSlided = true },
thumb = { slided, fraction, colors, size ->
thumb = { slided, fraction, colors, size, orientation ->
Box(
modifier = Modifier
.size(size)
Expand Down Expand Up @@ -329,7 +337,7 @@ private fun SlideToUnlockStyle3() {
}
}
},
hint = { slided, fraction, hintTexts, colors, paddings ->
hint = { slided, fraction, hintTexts, colors, paddings, orientation ->
val layoutDirection = LocalLayoutDirection.current

AnimatedContent(
Expand Down Expand Up @@ -411,7 +419,7 @@ private fun SlideToUnlockStyle4() {
),
colors = colors,
onSlideCompleted = { isSlided = true },
thumb = { slided, fraction, colors, size ->
thumb = { slided, fraction, colors, size, orientation ->
Box(
modifier = Modifier
.size(size)
Expand Down Expand Up @@ -445,7 +453,7 @@ private fun SlideToUnlockStyle4() {
}
}
},
hint = { slided, fraction, hintTexts, colors, paddings ->
hint = { slided, fraction, hintTexts, colors, paddings, orientation ->
val layoutDirection = LocalLayoutDirection.current

AnimatedContent(
Expand Down Expand Up @@ -489,3 +497,128 @@ private fun SlideToUnlockStyle4() {
},
)
}

@Composable
private fun SlideToUnlockStyle5() {
var isSlided by remember { mutableStateOf(false) }
var isCompleted by remember { mutableStateOf(false) }
val animateColor: Float by animateFloatAsState(
if (isCompleted) 1f else 0f,
label = "alpha",
animationSpec = tween(durationMillis = 700),
)
val colors = if (isCompleted) {
DefaultSlideToUnlockColors(
endTrackColor = lerp(Color(0xFFB4AFB4), Color(0xFFC91224), animateColor),
slidedHintColor = Color.White,
thumbIconColor = Color(0xFFC91224),
)
} else {
DefaultSlideToUnlockColors(
endTrackColor = Color(0xFFB4AFB4),
slidedHintColor = Color.White,
)
}

LaunchedEffect(isSlided) {
if (isSlided) {
delay(1500)
isCompleted = true
}
}

SlideToUnlock(
isSlided = isSlided,
hintTexts = HintTexts.defaultHintTexts().copy(
defaultText = "Hi",
slidedText = "Hello",
),
colors = colors,
onSlideCompleted = { isSlided = true },
orientation = SlideOrientation.Vertical,
thumb = { slided, fraction, colors, size, orientation ->
Box(
modifier = Modifier
.size(size)
.background(color = colors.thumbColor(), shape = CircleShape),
contentAlignment = Alignment.Center,
) {
if (isCompleted) {
Icon(
modifier = Modifier
.align(Alignment.Center)
.size(30.dp),
imageVector = Icons.Default.Error,
tint = colors.thumbIconColor(),
contentDescription = "Failed",
)
} else if (isSlided) {
CircularProgressIndicator(
modifier = Modifier.padding(8.dp),
color = colors.progressColor(),
strokeWidth = 3.dp,
)
} else {
Icon(
modifier = Modifier
.align(Alignment.Center)
.size(30.dp)
.rotate(fraction * -360),
imageVector = Icons.Default.Restore,
tint = colors.thumbIconColor(),
contentDescription = "Slide to unlock",
)
}
}
},
hint = { slided, fraction, hintTexts, colors, paddings, orientation ->

AnimatedContent(
modifier = Modifier
.align(Alignment.Center)
.onGloballyPositioned {},
targetState = isSlided,
) { slided ->
if (isCompleted) {
StackedVerticalText(
text = "Failed: Check out your account",
textColor = colors.slidedHintColor(),
)
} else if (!slided) {
StackedVerticalText(
text = hintTexts.defaultText,
textColor = colors.hintColor(fraction),
)
} else {
StackedVerticalText(
text = hintTexts.slidedText,
textColor = colors.slidedHintColor(),
)
}
}
},
)
}

@Composable
fun StackedVerticalText(
text: String,
modifier: Modifier = Modifier,
textColor: Color = Color.Black,
) {
Column(
modifier = modifier
.heightIn(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
text.forEach { char ->
Text(
text = char.toString(),
textAlign = TextAlign.Center,
color = textColor,
style = MaterialTheme.typography.titleMedium,
)
}
}
}
14 changes: 11 additions & 3 deletions slidetounlock/api/android/slidetounlock.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@ public final class com/revenuecat/purchases/slidetounlock/HintTexts$Companion {
public final fun defaultHintTexts ()Lcom/revenuecat/purchases/slidetounlock/HintTexts;
}

public final class com/revenuecat/purchases/slidetounlock/SlideOrientation : java/lang/Enum {
public static final field Horizontal Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
public static final field Vertical Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
public static fun getEntries ()Lkotlin/enums/EnumEntries;
public static fun valueOf (Ljava/lang/String;)Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
public static fun values ()[Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
}

public abstract interface class com/revenuecat/purchases/slidetounlock/SlideToUnlockColors {
public abstract fun hintColor-XeAY9LY (FLandroidx/compose/runtime/Composer;I)J
public abstract fun progressColor-WaAFU9c (Landroidx/compose/runtime/Composer;I)J
Expand All @@ -70,14 +78,14 @@ public abstract interface class com/revenuecat/purchases/slidetounlock/SlideToUn
public final class com/revenuecat/purchases/slidetounlock/SlideToUnlockDefaults {
public static final field $stable I
public static final field INSTANCE Lcom/revenuecat/purchases/slidetounlock/SlideToUnlockDefaults;
public final fun Hint (Lcom/revenuecat/purchases/slidetounlock/HintTexts;ZFLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun Thumb-8HUqYh0 (ZJLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun Hint (Lcom/revenuecat/purchases/slidetounlock/HintTexts;ZFLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Landroidx/compose/foundation/layout/PaddingValues;Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun Thumb-coD9juw (ZJLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun getPaddings-D9Ej5fM ()F
public final fun getThumbSize-D9Ej5fM ()F
public final fun getVelocityThreshold-D9Ej5fM ()F
}

public final class com/revenuecat/purchases/slidetounlock/SlideToUnlockKt {
public static final fun SlideToUnlock-lbUUqPM (ZLkotlin/jvm/functions/Function0;Landroidx/compose/ui/Modifier;Lcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Lcom/revenuecat/purchases/slidetounlock/HintTexts;Landroidx/compose/ui/graphics/Shape;JFLandroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function7;Lkotlin/jvm/functions/Function8;Landroidx/compose/runtime/Composer;III)V
public static final fun SlideToUnlock-PVngBv4 (ZLkotlin/jvm/functions/Function0;Landroidx/compose/ui/Modifier;Lcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Lcom/revenuecat/purchases/slidetounlock/HintTexts;Landroidx/compose/ui/graphics/Shape;JFLandroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Lkotlin/jvm/functions/Function1;Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;Lkotlin/jvm/functions/Function8;Lkotlin/jvm/functions/Function9;Landroidx/compose/runtime/Composer;III)V
}

14 changes: 11 additions & 3 deletions slidetounlock/api/desktop/slidetounlock.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@ public final class com/revenuecat/purchases/slidetounlock/HintTexts$Companion {
public final fun defaultHintTexts ()Lcom/revenuecat/purchases/slidetounlock/HintTexts;
}

public final class com/revenuecat/purchases/slidetounlock/SlideOrientation : java/lang/Enum {
public static final field Horizontal Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
public static final field Vertical Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
public static fun getEntries ()Lkotlin/enums/EnumEntries;
public static fun valueOf (Ljava/lang/String;)Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
public static fun values ()[Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;
}

public abstract interface class com/revenuecat/purchases/slidetounlock/SlideToUnlockColors {
public abstract fun hintColor-XeAY9LY (FLandroidx/compose/runtime/Composer;I)J
public abstract fun progressColor-WaAFU9c (Landroidx/compose/runtime/Composer;I)J
Expand All @@ -70,14 +78,14 @@ public abstract interface class com/revenuecat/purchases/slidetounlock/SlideToUn
public final class com/revenuecat/purchases/slidetounlock/SlideToUnlockDefaults {
public static final field $stable I
public static final field INSTANCE Lcom/revenuecat/purchases/slidetounlock/SlideToUnlockDefaults;
public final fun Hint (Lcom/revenuecat/purchases/slidetounlock/HintTexts;ZFLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun Thumb-8HUqYh0 (ZJLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun Hint (Lcom/revenuecat/purchases/slidetounlock/HintTexts;ZFLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Landroidx/compose/foundation/layout/PaddingValues;Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun Thumb-coD9juw (ZJLcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
public final fun getPaddings-D9Ej5fM ()F
public final fun getThumbSize-D9Ej5fM ()F
public final fun getVelocityThreshold-D9Ej5fM ()F
}

public final class com/revenuecat/purchases/slidetounlock/SlideToUnlockKt {
public static final fun SlideToUnlock-lbUUqPM (ZLkotlin/jvm/functions/Function0;Landroidx/compose/ui/Modifier;Lcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Lcom/revenuecat/purchases/slidetounlock/HintTexts;Landroidx/compose/ui/graphics/Shape;JFLandroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function7;Lkotlin/jvm/functions/Function8;Landroidx/compose/runtime/Composer;III)V
public static final fun SlideToUnlock-PVngBv4 (ZLkotlin/jvm/functions/Function0;Landroidx/compose/ui/Modifier;Lcom/revenuecat/purchases/slidetounlock/SlideToUnlockColors;Lcom/revenuecat/purchases/slidetounlock/HintTexts;Landroidx/compose/ui/graphics/Shape;JFLandroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Lkotlin/jvm/functions/Function1;Lcom/revenuecat/purchases/slidetounlock/SlideOrientation;Lkotlin/jvm/functions/Function8;Lkotlin/jvm/functions/Function9;Landroidx/compose/runtime/Composer;III)V
}

Loading
Loading