A drag handle is a capsule-like shape that can be used by users to change component size and/or position by dragging.
VerticalDragHandleSample
@Preview
@Composable
fun VerticalDragHandleSample() {
var offsetX by remember { mutableStateOf(0f) }
var screenSize by remember { mutableStateOf(IntSize.Zero) }
val density = LocalDensity.current
Box(
modifier =
Modifier.fillMaxSize().onGloballyPositioned { layoutCoordinates ->
screenSize = layoutCoordinates.size
if (offsetX == 0f) {
offsetX = screenSize.width / 2f
}
}
) {
Surface(
modifier = Modifier.width(with(density) { offsetX.toDp() }).fillMaxHeight(),
color = MaterialTheme.colorScheme.surfaceContainerHighest,
shape = RoundedCornerShape(0.dp, 24.dp, 24.dp, 0.dp),
) {
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.CenterEnd) {
VerticalDragHandle(
modifier =
Modifier.draggable(
orientation = Orientation.Horizontal,
state =
rememberDraggableState { delta ->
offsetX =
(offsetX + delta).coerceIn(
with(density) { 48.dp.toPx() },
screenSize.width.toFloat(),
)
},
)
.systemGestureExclusion() // To avoid colliding with the back gesture
)
}
}
}
}