Using wavy sliders?

[mahozad]

Hi,

I'm doing a self-promotion here :) Please ignore/close it if you are not interested.

Would you like to use the wavy-slider in your app? I think Android 13 uses this kind of slider for its media controls.

Demo.

[lighttigerXIV]

If you make it that when paused it becomes straight (like android 14 music notifications) i might consider it.

[mahozad]

It can be simply done by setting the height to zero:

// Toggle this on click on the play/pause button
var isPlaying by remember { mutableStateOf(true) }

WavySlider(
    value = fraction,
    onValueChange = { fraction = it },
    waveHeight = if (isPlaying) 12.dp, else 0.dp
    // ...
)

You can also customize the animation spec (duration and easing) of changes in wave height.

WavySlider(
    // ...
    animationSpecs = SliderDefaults.WaveAnimationSpecs.copy(
        waveHeightAnimationSpec = tween(durationMillis = 500, easing = LinearEasing)
    )
)

Or, even, doing more customizations and provide different animation specs based on different conditions (see test #10):

val spec1 = tween<Dp>(durationMillis = 1300, easing = EaseOutBounce)
val spec2 = tween<Dp>(durationMillis = 150, easing = LinearEasing)
var spec: AnimationSpec<Dp> by remember { mutableStateOf(spec1) }
var waveHeight by remember { mutableStateOf(16.dp) }
val interactionSource = remember { MutableInteractionSource() }
var isPressed by remember { mutableStateOf(false) }
val isDragged by interactionSource.collectIsDraggedAsState()
LaunchedEffect(isPressed, isDragged) {
    waveHeight = if (isPressed || isDragged) 0.dp else 16.dp
    spec = if (isPressed || isDragged) {
        spec2
    } else {
        delay(spec2.durationMillis.milliseconds)
        spec1
    }
}

WavySlider(
    // ...
    waveHeight = waveHeight,
    animationSpecs = SliderDefaults.WaveAnimationSpecs.copy(waveHeightAnimationSpec = spec)),
    interactionSource = interactionSource,
    modifier = Modifier
            .onPointerEvent(PointerEventType.Press) { isPressed = true }
            .onPointerEvent(PointerEventType.Release) { isPressed = false }
)