IssueTracker

Jetpack Compose version: Compose BOM 2024.9.01

Jetpack Compose component(s) used: AnchoredDraggableState, DraggableState, Boxes, Modifiers, and such

Android Studio Build: Build #AI-241.18034.62.2411.12071903, built on July 10, 2024

Kotlin version: 1.9.24

Steps to Reproduce or Code Sample to Reproduce:

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.core.tween
import androidx.compose.animation.rememberSplineBasedDecay
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.AnchoredDraggableState
import androidx.compose.foundation.gestures.DraggableAnchors
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.anchoredDraggable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import com.example.anchoreddraggablestateexample.ui.theme.AnchoredDraggableStateExampleTheme
import kotlin.math.roundToInt

private val TRACK_WIDTH = 300.dp

class MainActivity : ComponentActivity() {
    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AnchoredDraggableStateExampleTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Box(
                        Modifier
                            .fillMaxSize()
                            .background(Color.White)
                            .padding(innerPadding)
                    ) {
                        Row(Modifier.align(Alignment.Center)) {
                            SlideToAction()
                        }
                    }
                }
            }
        }
    }
}

enum class SlideToActionAnchors {
    Start,
    End
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SlideToAction() {
    val density = LocalDensity.current
    val decayAnimationSpec = rememberSplineBasedDecay<Float>()
    val dragState = remember {
        AnchoredDraggableState(
            initialValue = SlideToActionAnchors.Start,
            anchors = DraggableAnchors {
                SlideToActionAnchors.Start at 0f
                SlideToActionAnchors.End at with(density) { TRACK_WIDTH.toPx() }
            },
            // it doesn't matter what you put here a the multiplier, the positionalThreshold is always 50%
            positionalThreshold = { d -> d * 0.9f },
            velocityThreshold = { Float.POSITIVE_INFINITY },
            snapAnimationSpec = tween(),
            decayAnimationSpec = decayAnimationSpec
        )
    }

    // The container
    Box(
        Modifier
            .fillMaxWidth()
            .anchoredDraggable(
                dragState,
                Orientation.Horizontal,
                enabled = true
            )
    ) {
        // The track
        Box(
            Modifier
                .height(80.dp)
                .background(Color.Red)
                .width(TRACK_WIDTH)
        )
        // The thumb
        Box(
            Modifier
                .offset {
                    IntOffset(
                        x = dragState
                            .requireOffset()
                            .roundToInt(),
                        y = 0
                    )
                }
                .size(80.dp)
                .background(Color.Green)
        )
        // 90% of the distance between anchors
        Box(
            Modifier
                .background(Color.Blue)
                .width(TRACK_WIDTH * 0.9f)
                .height(8.dp)
                .align(Alignment.CenterStart)
        )
        // 50% of the distance between anchors
        Box(
            Modifier
                .background(Color.Magenta)
                .width(TRACK_WIDTH * 0.5f)
                .height(4.dp)
                .align(Alignment.CenterStart)
        )
    }
}

@Preview
@Composable
fun SlideToActionPreview() {
    SlideToAction()
}

See the positionalThreshold in the AnchoredDraggableState. It doesn't matter what multiple is applied to the distance, it always uses 50%. I've tried a bunch of values, even 1.5! Am I using it wrong?