daniyelp
daniyelp

Reputation: 1265

Jetpack Compose - Reveal animation with resizing

By using this code

val composableHeight = 200.dp
var composableWidthPx by remember { mutableStateOf(1000f) }
val composableWidth = with(LocalDensity.current) { composableWidthPx.toDp() }
val draggableState = rememberDraggableState(onDelta = {
    composableWidthPx += it
})
Row(
    modifier = Modifier
        .width(composableWidth)
        .height(composableHeight)
        .padding(48.dp)
        .draggable(draggableState, Orientation.Horizontal)
        .background(Color.Red)
) {
    Icon(
        modifier = Modifier.requiredSize(100.dp),
        imageVector = Icons.Default.Add,
        contentDescription = null
    )
}

I get the following result

enter image description here

What I want instead is for the Icon to stay in a fixed position, with a fixed size, and if I slide over the Icon, I want the respective portion to be hidden. So, that basically would be a reveal animation.

Some thoughts on how I could achieve it?

(You may also come up with a better title for the question.)

Edit:

Some pictures with the wanted result:

enter image description here

enter image description here

Upvotes: 5

Views: 1346

Answers (1)

daniyelp
daniyelp

Reputation: 1265

I came up with something in which I used clipToBounds (thanks Pylyp) and offset.

val composableHeight = 100.dp
var composableWidthPx by remember { mutableStateOf(1000f) }
val composableWidth = with(LocalDensity.current) { composableWidthPx.toDp() }
val draggableState = rememberDraggableState(onDelta = {
    composableWidthPx += it
})
val iconSize = remember { 100.dp }
Row(
    modifier = Modifier
        .padding(48.dp)
        .width(composableWidth)
        .height(composableHeight)
        .draggable(draggableState, Orientation.Horizontal)
        .background(Color.Red)
        .clipToBounds()
) {
    Icon(
        modifier = Modifier
            .requiredSize(iconSize)
            .offset(
                maxOf(0.dp, (iconSize - composableWidth) / 2)
            ),
        imageVector = Icons.Default.Add,
        contentDescription = null
    )
}

enter image description here

If someone can come up with something better, please do so.

Upvotes: 5

Related Questions