{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

DraggableKt

public final class DraggableKt


Summary

Public methods

static final @NonNull DraggableState
DraggableState(@NonNull Function1<@NonNull FloatUnit> onDelta)

Default implementation of DraggableState interface that allows to pass a simple action that will be invoked when the drag occurs.

static final @NonNull Modifier
draggable(
    @NonNull Modifier receiver,
    @NonNull DraggableState state,
    @NonNull Orientation orientation,
    boolean enabled,
    MutableInteractionSource interactionSource,
    boolean startDragImmediately,
    @ExtensionFunctionType @NonNull SuspendFunction2<@NonNull <Error class: unknown class>, @NonNull OffsetUnit> onDragStarted,
    @ExtensionFunctionType @NonNull SuspendFunction2<@NonNull <Error class: unknown class>, @NonNull FloatUnit> onDragStopped,
    boolean reverseDirection
)

Configure touch dragging for the UI element in a single Orientation.

static final @NonNull DraggableState

Create and remember default implementation of DraggableState interface that allows to pass a simple action that will be invoked when the drag occurs.

Public methods

DraggableState

public static final @NonNull DraggableState DraggableState(@NonNull Function1<@NonNull FloatUnit> onDelta)

Default implementation of DraggableState interface that allows to pass a simple action that will be invoked when the drag occurs.

This is the simplest way to set up a draggable modifier. When constructing this DraggableState, you must provide a onDelta lambda, which will be invoked whenever drag happens (by gesture input or a custom DraggableState.drag call) with the delta in pixels.

If you are creating DraggableState in composition, consider using rememberDraggableState.

Parameters
@NonNull Function1<@NonNull FloatUnit> onDelta

callback invoked when drag occurs. The callback receives the delta in pixels.

draggable

public static final @NonNull Modifier draggable(
    @NonNull Modifier receiver,
    @NonNull DraggableState state,
    @NonNull Orientation orientation,
    boolean enabled,
    MutableInteractionSource interactionSource,
    boolean startDragImmediately,
    @ExtensionFunctionType @NonNull SuspendFunction2<@NonNull <Error class: unknown class>, @NonNull OffsetUnit> onDragStarted,
    @ExtensionFunctionType @NonNull SuspendFunction2<@NonNull <Error class: unknown class>, @NonNull FloatUnit> onDragStopped,
    boolean reverseDirection
)

Configure touch dragging for the UI element in a single Orientation. The drag distance reported to DraggableState, allowing users to react on the drag delta and update their state.

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 pointerInput instead with the helper functions like detectDragGestures.

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

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

// 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
val (minPx, maxPx) = with(LocalDensity.current) { min.toPx() to max.toPx() }
// this is the  state we will update while dragging
val offsetPosition = remember { mutableStateOf(0f) }

// seekbar itself
Box(
    modifier = Modifier
        .width(max)
        .draggable(
            orientation = Orientation.Horizontal,
            state = rememberDraggableState { delta ->
                val newValue = offsetPosition.value + delta
                offsetPosition.value = newValue.coerceIn(minPx, maxPx)
            }
        )
        .background(Color.Black)
) {
    Box(
        Modifier.offset { IntOffset(offsetPosition.value.roundToInt(), 0) }
            .size(50.dp)
            .background(Color.Red)
    )
}
Parameters
@NonNull DraggableState state

DraggableState state of the draggable. Defines how drag events will be interpreted by the user land logic.

@NonNull Orientation orientation

orientation of the drag

boolean enabled

whether or not drag is enabled

MutableInteractionSource interactionSource

MutableInteractionSource that will be used to emit DragInteraction.Start when this draggable is being dragged.

boolean startDragImmediately

when set to true, draggable will start dragging immediately and prevent other gesture detectors from reacting to "down" events (in order to block composed press-based gestures). This is intended to allow end users to "catch" an animating widget by pressing on it. It's useful to set it when value you're dragging is settling / animating.

@ExtensionFunctionType @NonNull SuspendFunction2<@NonNull <Error class: unknown class>, @NonNull OffsetUnit> onDragStarted

callback that will be invoked when drag is about to start at the starting position, allowing user to suspend and perform preparation for drag, if desired. This suspend function is invoked with the draggable scope, allowing for async processing, if desired

@ExtensionFunctionType @NonNull SuspendFunction2<@NonNull <Error class: unknown class>, @NonNull FloatUnit> onDragStopped

callback that will be invoked when drag is finished, allowing the user to react on velocity and process it. This suspend function is invoked with the draggable scope, allowing for async processing, if desired

boolean reverseDirection

reverse the direction of the scroll, so top to bottom scroll will behave like bottom to top and left to right will behave like right to left.

rememberDraggableState

@Composable
public static final @NonNull DraggableState rememberDraggableState(@NonNull Function1<@NonNull FloatUnit> onDelta)

Create and remember default implementation of DraggableState interface that allows to pass a simple action that will be invoked when the drag occurs.

This is the simplest way to set up a draggable modifier. When constructing this DraggableState, you must provide a onDelta lambda, which will be invoked whenever drag happens (by gesture input or a custom DraggableState.drag call) with the delta in pixels.

Parameters
@NonNull Function1<@NonNull FloatUnit> onDelta

callback invoked when drag occurs. The callback receives the delta in pixels.