androidx.ui.foundation.gestures

Classes

DragDirection

Draggable Direction specifies the direction in which you can drag an Draggable.

FloatDragValueController

Simple DragValueController that backs up single Float value with no fling support

Top-level functions summary

Unit
Draggable(dragDirection: DragDirection, dragValue: ValueHolder<Float>, onDragValueChangeRequested: (Float) -> Unit, onDragStarted: (startedPosition: PxPosition) -> Unit = {}, onDragStopped: (velocity: Float) -> Unit = {}, enabled: Boolean = true, children: () -> Unit)

Component that provides high-level drag functionality reflected in one value

Top-level functions

Draggable

@Composable fun Draggable(
    dragDirection: DragDirection,
    dragValue: ValueHolder<Float>,
    onDragValueChangeRequested: (Float) -> Unit,
    onDragStarted: (startedPosition: PxPosition) -> Unit = {},
    onDragStopped: (velocity: Float) -> Unit = {},
    enabled: Boolean = true,
    children: () -> Unit
): Unit

Component that provides high-level drag functionality reflected in one value

The common usecase for this component is when you need to be able to drag/scroll something on the screen and represent it as one value via ValueHolder.

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

import androidx.ui.core.ambientDensity
import androidx.ui.core.withDensity
import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.animation.animatedDragValue
import androidx.ui.foundation.gestures.Draggable
import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.Container
import androidx.ui.layout.Padding

val max = 300.dp
val min = 0.dp
val (minPx, maxPx) = withDensity(+ambientDensity()) {
    min.toPx().value to max.toPx().value
}
val position = +animatedDragValue(0f, minPx, maxPx)
Draggable(
    dragValue = position,
    onDragValueChangeRequested = { position.animatedFloat.snapTo(it) },
    dragDirection = DragDirection.Horizontal
) {
    // dragValue is the current value in progress of dragging
    val draggedDp = withDensity(+ambientDensity()) {
        position.value.toDp()
    }
    val squareSize = 50.dp

    // Draw a seekbar-like composable that has a black background
    // with a red square that moves along the drag
    Container(width = max + squareSize, alignment = Alignment.CenterLeft) {
        DrawShape(RectangleShape, Color.Black)
        Padding(left = draggedDp) {
            ColoredRect(Color.Red, width = squareSize, height = squareSize)
        }
    }
}
By using AnimatedValueHolder as dragValue you can achievefling behaviour by calling fling on it
import androidx.ui.core.ambientDensity
import androidx.ui.core.withDensity
import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.animation.AnchorsFlingConfig
import androidx.ui.foundation.animation.animatedDragValue
import androidx.ui.foundation.gestures.Draggable
import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.Container
import androidx.ui.layout.Padding

val max = 300.dp
val min = 0.dp
val (minPx, maxPx) = withDensity(+ambientDensity()) {
    min.toPx().value to max.toPx().value
}
// define anchors and related animation controller
val anchors = listOf(minPx, maxPx, maxPx / 2)
val flingConfig = AnchorsFlingConfig(anchors)
val position = +animatedDragValue(0f, minPx, maxPx)

Draggable(
    dragValue = position,
    onDragValueChangeRequested = { position.animatedFloat.snapTo(it) },
    dragDirection = DragDirection.Horizontal,
    onDragStopped = { position.fling(flingConfig, it) }
) {
    val draggedDp = withDensity(+ambientDensity()) {
        position.value.toDp()
    }
    val squareSize = 50.dp

    // Draw a seekbar-like widget that has a black background
    // with a red square that moves along the drag
    Container(width = max + squareSize, alignment = Alignment.CenterLeft) {
        DrawShape(RectangleShape, Color.Black)
        Padding(left = draggedDp) {
            ColoredRect(Color.Red, width = squareSize, height = squareSize)
        }
    }
}
Parameters
dragDirection: DragDirection direction in which drag should be happening
dragValue: ValueHolder<Float> value holder for value that needs to be dragged
onDragValueChangeRequested: (Float) -> Unit callback to be invoked when drag happened and change on dragValue is requested. The value should be updated synchronously in order to provide smooth dragging experience
onDragStarted: (startedPosition: PxPosition) -> Unit = {} callback that will be invoked when drag has been started after touch slop has been passed, with starting position provided
onDragStopped: (velocity: Float) -> Unit = {} callback that will be invoked when drag stops, with velocity provided
enabled: Boolean = true whether or not drag is enabled