androidx.compose.foundation.gestures

rememberScrollableController

@Composable fun rememberScrollableController(consumeScrollDelta: (Float) -> Float): ScrollableController

Create and remember ScrollableController for scrollable with default FlingConfig and AnimationClockObservable

rememberZoomableController

@Composable fun rememberZoomableController(onZoomDelta: (Float) -> Unit): ZoomableController

Create and remember ZoomableController with default AnimationClockObservable.

draggable

fun Modifier.draggable(
    orientation: Orientation, 
    enabled: Boolean = true, 
    reverseDirection: Boolean = false, 
    interactionState: InteractionState? = null, 
    startDragImmediately: Boolean = false, 
    canDrag: (Direction) -> Boolean = { enabled }, 
    onDragStarted: (startedPosition: Offset) -> Unit = {}, 
    onDragStopped: (velocity: Float) -> Unit = {}, 
    onDrag: Density.(Float) -> Unit
): Modifier

Configure touch dragging for the UI element in a single Orientation. The drag distance is reported to onDrag as a single Float value in pixels.

The common usecase for this component is when you need to be able to drag something inside the component on the screen and represent this state via one float value

If you need to control the whole dragging flow, consider using dragGestureFilter instead.

If you are implementing scroll/fling behavior, consider using scrollable.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.layout.offsetPx
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.preferredWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

// Draw a seekbar-like composable that has a black background
// with a red square that moves along the 300.dp drag distance
val max = 300.dp
val min = 0.dp
// this is the  state we will update while dragging
val offsetPosition = remember { mutableStateOf(0f) }

// seekbar itself
Box(
    modifier = Modifier
        .preferredWidth(max)
        .draggable(orientation = Orientation.Horizontal) { delta ->
            val newValue = offsetPosition.value + delta
            offsetPosition.value = newValue.coerceIn(min.toPx(), max.toPx())
        }
        .background(Color.Black)
) {
    Box(
        Modifier.offsetPx(x = offsetPosition).preferredSize(50.dp).background(Color.Red)
    )
}

scrollable

fun Modifier.scrollable(
    orientation: Orientation, 
    controller: ScrollableController, 
    enabled: Boolean = true, 
    reverseDirection: Boolean = false, 
    canScroll: (Direction) -> Boolean = { enabled }, 
    onScrollStarted: (startedPosition: Offset) -> Unit = {}, 
    onScrollStopped: (velocity: Float) -> Unit = {}
): Modifier

Configure touch scrolling and flinging for the UI element in a single Orientation.

Users should update their state via ScrollableController.consumeScrollDelta and reflect their own state in UI when using this component.

ScrollableController is required for this modifier to work correctly. When constructing ScrollableController, you must provide a ScrollableController.consumeScrollDelta lambda, which will be invoked whenever scroll happens (by gesture input, by smooth scrolling or flinging) with the delta in pixels. The amount of scrolling delta consumed must be returned from this lambda to ensure proper nested scrolling.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.rememberScrollableController
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextStyle

// actual composable state
val offset = remember { mutableStateOf(0f) }
// state for Scrollable, describes how to consume scrolling delta and update offset
Box(
    Modifier
        .preferredSize(200.dp)
        .scrollable(
            orientation = Orientation.Vertical,
            controller = rememberScrollableController { delta ->
                offset.value = offset.value + delta
                delta
            }
        )
        .background(Color.LightGray),
    alignment = Alignment.Center
) {
    Text(offset.value.roundToInt().toString(), style = TextStyle(fontSize = 50.sp))
}

zoomable

fun Modifier.zoomable(
    controller: ZoomableController, 
    enabled: Boolean = true, 
    onZoomStarted: () -> Unit = null, 
    onZoomStopped: () -> Unit = null
): Modifier

Enable zooming of the modified UI element.

ZoomableController.onZoomDelta will be invoked with the change in proportion of the UI element's size at each change in either ratio of the gesture or smooth scaling. Callers should update their state and UI in this callback.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.rememberZoomableController
import androidx.compose.foundation.gestures.zoomable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.drawLayer

Box(
    Modifier.preferredSize(300.dp).clipToBounds().background(Color.LightGray)
) {
    var scale by remember { mutableStateOf(1f) }
    val zoomableController = rememberZoomableController { scale *= it }
    Box(
        Modifier
            .zoomable(zoomableController)
            .clickable(
                indication = null,
                onDoubleClick = { zoomableController.smoothScaleBy(4f) },
                onClick = {}
            )
            .fillMaxSize()
            .border(1.dp, Color.Green),
        alignment = Alignment.Center
    ) {
        Text(
            "☠",
            fontSize = 32.sp,
            modifier = Modifier.drawLayer(scaleX = scale, scaleY = scale)
        )
    }
}

zoomable

fun Modifier.zoomable(
    enabled: Boolean = true, 
    onZoomStarted: () -> Unit = null, 
    onZoomStopped: () -> Unit = null, 
    onZoomDelta: (Float) -> Unit
): Modifier

Enable zooming of the modified UI element.

onZoomDelta will be invoked with the change in proportion of the UI element's size at each change in either position of the gesture or smooth scaling. Callers should update their state and UI in this callback.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.rememberZoomableController
import androidx.compose.foundation.gestures.zoomable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.drawLayer

Box(
    Modifier.preferredSize(300.dp).clipToBounds().background(Color.LightGray)
) {
    var scale by remember { mutableStateOf(1f) }
    val zoomableController = rememberZoomableController { scale *= it }
    Box(
        Modifier
            .zoomable(zoomableController)
            .clickable(
                indication = null,
                onDoubleClick = { zoomableController.smoothScaleBy(4f) },
                onClick = {}
            )
            .fillMaxSize()
            .border(1.dp, Color.Green),
        alignment = Alignment.Center
    ) {
        Text(
            "☠",
            fontSize = 32.sp,
            modifier = Modifier.drawLayer(scaleX = scale, scaleY = scale)
        )
    }
}