Give your Compose UI some snap. Why settle for static text when you can have text that stretches? RubberTextView is a lightweight Jetpack Compose library that brings a tactile, rubber-band interaction to your labels. Drag to reveal new values, let go to watch them spring back.

It’s perfect for value pickers, playful navigation, or just giving your users something satisfying to fidget with.

• Shared State Logic: Separate your gesture area from your display area.
• Physics-Based: Built on top of androidx.compose.animation.core.spring for that natural, non-linear feel.
• Three-Way Crossfade: Smoothly transition between start, center, and end labels based on drag intensity.
• Customizable Resistance: Control how hard your users have to "pull" to see the hidden labels.

Add the dependency to your build.gradle.kts:

implementation("com.dontsaybojio:rubbertextview:X.X.X")

Make sure mavenCentral() is in your repository list:

repositories {
    mavenCentral()
}

RubberTextView works by splitting the interaction into three simple parts:

1. RubberDragState: The brain. It tracks the offset and handles the spring physics.
2. RubberDragBox: The muscle. This is the invisible (or visible!) surface that catches the user's thumb.
3. RubberTextView: The face. This renders your labels and handles the crossfading magic.

Getting that "squishy" feel into your app is a four-step process:

1. Initialize the State

Create a rememberRubberDragState. You can tweak the dampingRatio and stiffness here to make it feel "tight" or "loose."

2. Wrap your content in a DragBox

Place a RubberDragBox in your layout. This defines the area where the user can actually drag.

3. Add the TextView

Inside (or even outside) that box, add the RubberTextView and pass it your labels.

4. Sit back and stretch

Run your app and enjoy the springy goodness.

@Composable
fun MySpringyUI() {
    // 1. Create the state
    val state = rememberRubberDragState(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    )

    Column {
        // 2. The Display
        RubberTextView(
            modifier = Modifier.fillMaxWidth().padding(20.dp),
            startLabel = "Less",
            label = "Just Right",
            endLabel = "More",
            state = state
        )

        // 3. The Interactive Surface
        RubberDragBox(
            modifier = Modifier.fillMaxWidth().height(200.dp).background(Color.LightGray),
            state = state,
            onDragCompleted = { direction ->
                println("Drag completed: $direction") // RubberDragDirection.Left or .Right
            }
        ) {
            Text("Drag me horizontally!", Modifier.align(Alignment.Center))
        }
    }
}

You have full control over the "tension" of the rubber band:

Got an idea to make it even stretchier? Maybe vertical dragging or multi-label support? Pull requests are always welcome!