AnimatedContent bug after https://android-review.googlesource.com/c/platform/frameworks/support/+/3273418 [372512085]

Fixed

Bug

Status Update

No update yet.

Description

to...@gmail.com

created issue #1

Oct 10, 2024 07:20AM

Jetpack Compose version: 1.8 snapshots starting with 12408595 (So included in alpha03)

I unfortunately have some trouble to build a small repro but that commit broke transitions handled by AnimatedContent in my app.

See attached video.

There's also some details in slack in a thread with Doris.

To resume, there's some size resolution issues when removing and adding back screens that makes the AnimatedContent wrongly detect a size change and doing wrong size animations.

You can see in the video that the fade transition does work, then when switching screen then going back it no more work correctly and animate the size for no reasons.

Forcing .using(null) does workaround the issue.

When reaching the broken state, if both contents of AnimatedContent are boxes with .fillMaxSize() then it just shows a black screen as is it was animating from 0 to 0 size. If one of the content does not have the .fillMaxSize() then it leads to the size animations you can see in the video.

Screen_recording_20241007_215813.mp4

3.5 MB

Download

Comments

to...@gmail.com <to...@gmail.com> #2Oct 14, 2024 07:09PM

Project: platform/frameworks/support
Branch: androidx-master-dev

commit 23a7d960caf43390a554700d3c56ada189a9d10e
Author: Louis Pullen-Freilich <lpf@google.com>
Date: Mon Aug 10 15:11:36 2020

IconButton / IconToggleButton API scrub

Test: ./gradlew updateApi
Bug:

b/161809385

Bug:

b/161807956

Relnote: "Adds enabled parameter to IconButton, and reorders parameters in IconToggleButton"
Change-Id: I0a9419b1a631cadad451395302ad87b7f9214f96

M ui/ui-material/api/current.txt
M ui/ui-material/api/public_plus_experimental_current.txt
M ui/ui-material/api/restricted_current.txt
M ui/ui-material/src/commonMain/kotlin/androidx/compose/material/IconButton.kt

https://android-review.googlesource.com/1394868

to...@gmail.com <to...@gmail.com> #3Oct 14, 2024 07:23PM

Ok so I've added the logs to the actual AnimatedContent.

    AnimatedContent(
        targetState = navigator.lastItem,
        transitionSpec = transition,
        modifier = modifier.onSizeChanged {
            Log.e("TAG", "ScreenTransition:$it ")
        },
        label = "",
    ) { screen ->
        navigator.saveableState("transition", screen) {
            content(screen)
        }
    }

When it works:

2024-10-14 21:20:25.085 32211-32251 AAA                     app.symfonik.music.player.debug      E  HomeDestinationKt.HomeDestination$lambda$29$lambda$28@339: Size1 Changed 1440 x 2896
2024-10-14 21:20:25.085 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1440 x 2896 
2024-10-14 21:20:25.723 32211-32249 AAA                     app.symfonik.music.player.debug      E  HomeDestinationKt.HomeDestination$lambda$29$lambda$28@339: Size1 Changed 1440 x 2812
2024-10-14 21:20:25.723 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1440 x 2812 
2024-10-14 21:20:30.103 32211-32250 AAA                     app.symfonik.music.player.debug      E  AlbumDetailDestinationKt$AlbumDetailDestination$4$2.invoke$lambda$2$lambda$1@712: Size Changed 1440 x 2812
2024-10-14 21:20:30.106 32211-32250 AAA                     app.symfonik.music.player.debug      E  AlbumDetailDestinationKt$AlbumDetailDestination$4.invoke$lambda$2$lambda$1@598: Size Changed 1440 x 2812
2024-10-14 21:20:33.005 32211-32264 AAA                     app.symfonik.music.player.debug      E  HomeDestinationKt.HomeDestination$lambda$29$lambda$28@339: Size1 Changed 1440 x 2812
2024-10-14 21:20:33.777 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1440 x 2812 
2024-10-14 21:20:34.516 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1440 x 2812 
2024-10-14 21:20:34.516 32211-32250 AAA                     app.symfonik.music.player.debug      E  HomeDestinationKt.HomeDestination$lambda$29$lambda$28@339: Size1 Changed 1440 x 2812
2024-10-14 21:20:36.534 32211-32251 AAA                     app.symfonik.music.player.debug      E  AlbumDetailDestinationKt$AlbumDetailDestination$4$2.invoke$lambda$2$lambda$1@712: Size Changed 1440 x 2812

When it fails:

024-10-14 21:20:36.534 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:0 x 0 
2024-10-14 21:20:36.541 32211-32251 AAA                     app.symfonik.music.player.debug      E  AlbumDetailDestinationKt$AlbumDetailDestination$4.invoke$lambda$2$lambda$1@598: Size Changed 1440 x 2812
2024-10-14 21:20:36.924 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1440 x 2812 
2024-10-14 21:20:38.882 32211-32249 AAA                     app.symfonik.music.player.debug      E  HomeDestinationKt.HomeDestination$lambda$29$lambda$28@339: Size1 Changed 1440 x 2812
2024-10-14 21:20:38.902 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1380 x 2695 
2024-10-14 21:20:38.909 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1319 x 2575 
2024-10-14 21:20:38.917 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1235 x 2413 
2024-10-14 21:20:38.925 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1154 x 2254 
2024-10-14 21:20:38.933 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1070 x 2090 
2024-10-14 21:20:38.942 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:975 x 1904 
2024-10-14 21:20:38.951 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:892 x 1743 
2024-10-14 21:20:38.959 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:813 x 1587 
2024-10-14 21:20:38.967 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:728 x 1422 
2024-10-14 21:20:38.976 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:658 x 1285 
2024-10-14 21:20:38.984 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:592 x 1157 
2024-10-14 21:20:38.992 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:525 x 1025 
2024-10-14 21:20:39.001 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:470 x 917 
2024-10-14 21:20:39.009 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:420 x 819 
2024-10-14 21:20:39.017 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:369 x 720 
2024-10-14 21:20:39.025 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:328 x 640 
2024-10-14 21:20:39.034 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:291 x 568 
2024-10-14 21:20:39.042 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:254 x 496 
2024-10-14 21:20:39.050 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:225 x 439 
2024-10-14 21:20:39.059 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:199 x 388 
2024-10-14 21:20:39.067 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:175 x 343 
2024-10-14 21:20:39.075 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:152 x 297 
2024-10-14 21:20:39.084 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:134 x 262 
2024-10-14 21:20:39.092 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:118 x 230 
2024-10-14 21:20:39.100 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:102 x 199 
2024-10-14 21:20:39.109 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:89 x 175 
2024-10-14 21:20:39.117 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:78 x 153 
2024-10-14 21:20:39.125 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:68 x 132 
2024-10-14 21:20:39.134 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:59 x 116 
2024-10-14 21:20:39.142 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:52 x 101 
2024-10-14 21:20:39.150 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:45 x 87 
2024-10-14 21:20:39.159 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:39 x 76 
2024-10-14 21:20:39.168 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:34 x 66 
2024-10-14 21:20:39.175 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:29 x 57 
2024-10-14 21:20:39.184 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:25 x 50 
2024-10-14 21:20:39.192 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:22 x 43 
2024-10-14 21:20:39.201 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:19 x 38 
2024-10-14 21:20:39.208 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:17 x 32 
2024-10-14 21:20:39.221 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:14 x 28 
2024-10-14 21:20:39.238 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:13 x 24 
2024-10-14 21:20:39.250 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:8 x 16 
2024-10-14 21:20:39.258 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:7 x 13 
2024-10-14 21:20:39.266 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:6 x 12 
2024-10-14 21:20:39.274 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:5 x 10 
2024-10-14 21:20:39.283 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:4 x 9 
2024-10-14 21:20:39.292 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:4 x 7 
2024-10-14 21:20:39.299 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:3 x 6 
2024-10-14 21:20:39.316 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:2 x 5 
2024-10-14 21:20:39.324 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:2 x 4 
2024-10-14 21:20:39.342 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:2 x 3 
2024-10-14 21:20:39.349 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1 x 3 
2024-10-14 21:20:39.358 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1 x 2 
2024-10-14 21:20:39.383 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1 x 1 
2024-10-14 21:20:39.415 32211-32211 TAG                     app.symfonik.music.player.debug      E  ScreenTransition:1440 x 2812

So seems the AnimatedContent resolves to 0 first then the content are measured then it animates (Reverse?) then jump to the proper size.

ti...@google.com <ti...@google.com> Oct 14, 2024 09:33PM

Reassigned to ti...@google.com.

to...@gmail.com <to...@gmail.com> #4Oct 15, 2024 08:37AM

This does not seems to be tied to the contents of the animation.

See attached video. First screen content is

        val navigator = LocalNavigator.current
        Box(modifier = Modifier.fillMaxSize().background(Color.Blue))  {
            Button(modifier = Modifier.safeContentPadding(), onClick = {navigator.navigateTo(AlbumDetailsScreenDestination(MediaItem())) }) { }
        }

Second screen content is

        Box(modifier = Modifier.fillMaxSize().background(Color.Red)) {

        }

content_box.mp4

2.5 MB

Download

to...@gmail.com <to...@gmail.com> #5Oct 15, 2024 08:41AM

If I add a .fillMaxSize() to the modifier of the AnimatedContent then the animation is different see video but also there's no more onSizeChanged called just a single

2024-10-15 10:37:18.070 26417-26417 TAG app.symfonik.music.player.debug E ScreenTransition:1440 x 2812

for first render.

    AnimatedContent(
        targetState = navigator.lastItem,
        transitionSpec = transition,
        modifier = modifier.onSizeChanged {
            Log.e("TAG", "ScreenTransition:$it ")
        }.fillMaxSize(),
        label = "",
    ) { screen ->
        navigator.saveableState("transition", screen) {
            content(screen)
        }
    }

animated_fillmaxsize.mp4

2.8 MB

Download

to...@gmail.com <to...@gmail.com> #6Oct 15, 2024 09:20AM

So after doing a tons of tests and removal and everything, the source cause is state restoration of the AnimatedContent. When the state is restored, the internal state of AnimatedContent is wrong. I suppose some things are remembered and not the others needed to go with it.

To solve this I just need to disable state saving / restoring in the tab navigator and then it works.

With that said I'll try to build a repro project now that I have the source issue.

to...@gmail.com <to...@gmail.com> #7Oct 15, 2024 10:09AM

And here's an ugly quick repro attached (Requires latest AS canary by default)

Press toggle multiple times and see it works.

Press go next then go previous

Press toggle and see that it fails.

animatedcontentbug.zip

985 KB

Download

ti...@google.com <ti...@google.com> #8Oct 16, 2024 03:16AM

Quick update:

I was able to repro and investigate the issue. It is indeed related to how the save and restore is set up. What I am seeing is the size change animation is accessing a stale AnimatedContentTransitionScope instance and therefore it operates on the wrong info.

Now I'm in the process to create a minimal repro that can be added to the test to verify a potential fix.

ap...@google.com <ap...@google.com> #9Oct 17, 2024 04:39PM

Project: platform/frameworks/support
Branch: androidx-main
Author: Doris Liu <tianliu@google.com>
Link: https://android-review.googlesource.com/3312267

Update SizeAnimation internal state when transition is recreated

Expand for full commit details

Update SizeAnimation internal state when transition is recreated

This change ensures that the size animtion reads the up-to-date
target sizes when AnimatedContent is being
re-used for different transitions.

Test: New tests added
Bug: 372512085
Change-Id: I7b0569287fb5e7e59be5226d827fdbcf90e46733

Files:

M compose/animation/animation/src/androidInstrumentedTest/kotlin/androidx/compose/animation/AnimatedContentTest.kt
M compose/animation/animation/src/commonMain/kotlin/androidx/compose/animation/AnimatedContent.kt

Hash: 8a597f07a0b80ebeede28f5d2a0887820ff92bb0
Date: Wed Oct 16 16:56:24 2024

ti...@google.com <ti...@google.com> #10Oct 17, 2024 08:01PM

Marked as fixed.

Verified the fix above with repro in comment #7. Please feel free to try out the new fix with snapshot: https://androidx.dev/snapshots/builds/12514980/artifacts

to...@gmail.com <to...@gmail.com> #11Oct 19, 2024 09:37AM

Can confirm it's fixed in my main app too.

pr...@google.com <pr...@google.com> #12Oct 30, 2024 05:38PM

The following release(s) address this bug.It is possible this bug has only been partially addressed:

androidx.compose.animation:animation:1.8.0-alpha05
androidx.compose.animation:animation-android:1.8.0-alpha05
androidx.compose.animation:animation-jvmstubs:1.8.0-alpha05
androidx.compose.animation:animation-linuxx64stubs:1.8.0-alpha05

Issue 372512085

Description

Issue summary

Comments

to...@gmail.com <to...@gmail.com> #2Oct 14, 2024 07:09PM

to...@gmail.com <to...@gmail.com> #3Oct 14, 2024 07:23PM

ti...@google.com <ti...@google.com> Oct 14, 2024 09:33PM

to...@gmail.com <to...@gmail.com> #4Oct 15, 2024 08:37AM

to...@gmail.com <to...@gmail.com> #5Oct 15, 2024 08:41AM

to...@gmail.com <to...@gmail.com> #6Oct 15, 2024 09:20AM

to...@gmail.com <to...@gmail.com> #7Oct 15, 2024 10:09AM

ti...@google.com <ti...@google.com> #8Oct 16, 2024 03:16AM

ap...@google.com <ap...@google.com> #9Oct 17, 2024 04:39PM

ti...@google.com <ti...@google.com> #10Oct 17, 2024 08:01PM

to...@gmail.com <to...@gmail.com> #11Oct 19, 2024 09:37AM

pr...@google.com <pr...@google.com> #12Oct 30, 2024 05:38PM

Add comment

Issue metadata