Idomatic way of using animateDpAsState in padding jetpack compose

Question

I am learning animateDpAsState from the doc. I did it without any problem, but I see a lot of recomposing happens. So I want to know what is the recommended way of doing this?

@Composable
private fun PaddingViewAnimation() {
    var visible by remember { mutableStateOf(true) }
    val iconOffsetAnimation: Dp by animateDpAsState(
        if (visible) 13.dp else 0.dp, tween(1000)
    )
    PaddingViewAnimationStateLess(
        { iconOffsetAnimation },
        visible,
        onVisibleChange = {
            visible = it
        }
    )
}

PaddingViewAnimationStateLess

@Composable
fun PaddingViewAnimationStateLess(
    iconOffsetAnimation: () -> Dp,
    visible: Boolean,
    onVisibleChange: (Boolean) -> Unit,
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 16.dp, top = 16.dp)
    ) {
        Image(
            modifier = Modifier.padding(top = iconOffsetAnimation()),
            imageVector = Icons.Default.ShoppingCart,
            contentDescription = null,
        )
        Button(
            modifier = Modifier.padding(top = 10.dp),
            onClick = {
                onVisibleChange(!visible)
            },
        ) {
            Text(text = "Move Text")
        }
    }
}

When first time button click animation happens and I can see in layout inspector. I don't know this is normal or we can fix this problem. Thanks

score 1 · Accepted Answer · answered Mar 09 '23 at 22:44

1

Instead of animating the top padding, you can do something different applying a y-translation with the graphicsLayer modifier with the lambda block that causes the layer properties update without triggering recomposition and relayout.

You can apply it to the Column or to each children.

Something like:

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(start = 16.dp, top = 16.dp)
        .graphicsLayer { translationY = iconOffsetAnimation().toPx() }
) {
    Image(
        imageVector = Icons.Default.ShoppingCart,
        contentDescription = null,
    )
    //....
}

answered Mar 09 '23 at 22:44

Gabriele Mariotti

320,139
94
887
841

It works!! Great you help me. – Kotlin Learner Mar 09 '23 at 22:48
One question it solves for `PaddingViewAnimationStateLess` recompose count, but what about `Button` recompose count? – Kotlin Learner Mar 09 '23 at 22:50
@VivekModi It should be resolved with the same code. – Gabriele Mariotti Mar 09 '23 at 23:02
ohh yes. It'll solve I forgot to think. Thanks again.. – Kotlin Learner Mar 09 '23 at 23:04
Do you know how can I solve this [issue](https://stackoverflow.com/q/75662318/8266651)? – Kotlin Learner Mar 09 '23 at 23:06
1

@VivekModi Thanks for feedback. I've to try some solutions. – Gabriele Mariotti Mar 09 '23 at 23:19

Idomatic way of using animateDpAsState in padding jetpack compose

1 Answers1