I decided to update `MaterialPredictiveBackAnimata...

# decompose

[Philip Dukhov]

I decided to update MaterialPredictiveBackAnimatable for myself to be closer to what the system settings app has. The current version feels a bit strange in the final disappearing stage to me. Let me know if you're interested in such a contribution.

However, I noticed that you updated the alpha version to eliminate the use of the graphicsLayer https://github.com/arkivanov/Decompose/issues/877.

Do you know if this issue has been reported? I use graphicsLayer because I feel it's a performant solution. I'd like to reconsider it, knowing the corner cases where it could fail.

[Arkadii Ivanov]

MaterialPredictiveBackAnimatable originally followed a specific spec, which has changed a bit since then. The Android system UI animation is different depending on Android version. E.g. AndroidPredictiveBackAnimatable follows Android 14 on Pixel devices, and on Android 15 it's different.

I was thinking about adding an argument to AndroidPredictiveBackAnimatable, that would allow us to specify an Android version. And also maybe another argument to automatically select the animation depending on SDK_INT.

[Arkadii Ivanov]

I didn't file a bug about graphicsLayer, because it wasn't possible to create a reproducer. We had screen flickering on some screens when you start the back gesture. This was likely due to some UI Composable used in that screen, but we couldn't find out which one exactly.

[Philip Dukhov]

Thank you for the clarification!

One more thing I've noticed is that the text rendering behaves strangely during the animation. If you watch my video frame by frame, you'll see that some letters jump randomly when the scale or offset value changes.

It looks like a rounding-related issue, but I'm not sure how to make Compose apply the transform without re-rendering the text.

I thought it might be related to my text components, but I see the same behavior in X Light. Do you have any ideas on how to fix it?

screen-20250819-104729.mp4

[Arkadii Ivanov]

Yeah, I think it's how scale Modifier works. I haven't figured out yet how we can apply some antialiasing. Open to suggestions.

[Philip Dukhov]

Using graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen) seems to be solving the issue for me.

I wonder if using the graphicsLayer with direct parameters instead of block solves your flickering issues. I would expect it to, since Modifier.scale uses it under the hood anyway.

I used this code to identify the differences.

val scale = remember { Animatable(1f) }
LaunchedEffect(Unit) {
    while (true) {
        scale.animateTo(
            targetValue = if (scale.value == 1f) 0.8f else 1f,
            animationSpec = tween(durationMillis = 3000)
        )
    }
}
Box(
    modifier = Modifier
        .systemBarsPadding()
) {
    BasicText(
        LoremIpsum().values.first(),
        style = TextStyle(
            fontSize = 20.sp,
        ),
        modifier = Modifier
            .clip(object : Shape {
                override fun createOutline(
                    size: Size,
                    layoutDirection: LayoutDirection,
                    density: Density,
                ): Outline =
                    Outline.Rectangle(
                        Rect(
                            left = 0f,
                            top = 0f,
                            right = size.width / 2,
                            bottom = size.height
                        )
                    )
            })
            .graphicsLayer(
                scaleX = scale.value,
                scaleY = scale.value,
                compositingStrategy = CompositingStrategy.Offscreen,
            )
    )
    BasicText(
        LoremIpsum().values.first(),
        style = TextStyle(
            fontSize = 20.sp,
        ),
        modifier = Modifier
            .clip(object : Shape {
                override fun createOutline(
                    size: Size,
                    layoutDirection: LayoutDirection,
                    density: Density,
                ): Outline =
                    Outline.Rectangle(
                        Rect(
                            left = size.width / 2,
                            top = 0f,
                            right = size.width,
                            bottom = size.height
                        )
                    )
            })
            .graphicsLayer(
                scaleX = scale.value,
                scaleY = scale.value,
            )
    )
}

[Arkadii Ivanov]

Thanks for the suggestion! I will try.

[Arkadii Ivanov]

Filed https://github.com/arkivanov/Decompose/issues/918

[Arkadii Ivanov]

Thanks again for the idea! It seems to fix the scaling quality issue! TIL https://github.com/arkivanov/Decompose/pull/919