how can I make circle come from the centar of the cloud? like it’s coming from behind but not moving...

# compose

[Marko Novakovic]

how can I make circle come from the centar of the cloud? like it’s coming from behind but not moving diagonally? code in 🧵

[Marko Novakovic]

@Composable
fun CircleMenu(
    modifier: Modifier = Modifier,
    categories: List<Category>,
    selectCategory: (Category) -> Unit,
) {
    Box(modifier = modifier.fillMaxSize()) {
        Cloud(categories = categories, onCategorySelected = selectCategory)
    }
}

@Composable
private fun Cloud(
    modifier: Modifier = Modifier,
    categories: List<Category>,
    onCategorySelected: (Category) -> Unit,
) {
    var offset by remember { mutableStateOf(Offset.Zero) }
    Box(
        modifier = modifier
            .offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consumeAllChanges()
                    offset += dragAmount
                }
            },
        contentAlignment = Alignment.Center
    ) {
        Circle(...)
        Icon(...)
    }
}

[Marko Novakovic]

@Composable
private fun Circle(
    modifier: Modifier = Modifier,
    state: CircleMenuState,
) {
    val size by animateDpAsState(targetValue = if (state == CircleMenuState.Collapsed) 200.dp else 0.dp)
    Surface(
        modifier = modifier.size(size),
        color = Color.Magenta,
        elevation = 8.dp
    ) {}
}

[Albert Chang]

Put the cloud and the circle in a Box with the circle's max size and contentAlignment set to center.

[Marko Novakovic]

@Albert Chang Thanks