Ripple radius is only calculated once at the beginning of the animation [183019123]

Fixed

Bug

Status Update

No update yet.

Description

co...@protonmail.com

created issue #1

Mar 18, 2021 10:44AM

Jetpack Compose release version: beta02 Android Studio Build: canary 10

It's very slight but a ripple looks off when the container it's in open up because the ripple goes from filling in the rectangle, to instead be a circle. You can see that the left and right of the expanding item fills all the way to the corner, but the bottom left and right get a rounded ripple. In a large list of expanding and collapsing items my designer asked me if I could have the ripple continue to fill the entire container and thought it was a valid point.

Louis (from material team) and Doris Liu on slack told me it's worth reporting in bug tracker. Attaching code and video of the issue.

Code

@ExperimentalAnimationApi
@Composable
fun ExpandCollapseView2() {
    var visible by remember { mutableStateOf(false) }
    Column(modifier = Modifier.clickable { visible = !visible }.padding(48.dp)) {
        Row() {
            Text("Testing with animatedVisibility")
        }
        AnimatedVisibility(visible = visible) {
            Column {
                Text(
                    "Testing second line",
                    modifier = Modifier.padding(bottom = 24.dp),
                )
            }
        }
    }
}

possible_rippe_bug.mp4

96 KB

Download

Comments

ma...@google.com <ma...@google.com> Mar 18, 2021 11:54AM

Assigned to lp...@google.com.

ap...@google.com <ap...@google.com> #2Apr 26, 2021 01:14PM

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

lp...@google.com <lp...@google.com> #3Apr 30, 2021 01:12AM

This should now be fixed on Android (since we use RippleDrawable under the hood, which supports changing radius mid-animation) - but we still need to fix this in the common implementation.

cs...@gmail.com <cs...@gmail.com> #4Apr 30, 2021 03:05AM

Need help

co...@protonmail.com <co...@protonmail.com> #5May 2, 2021 03:10AM

Tried in beta05 and still able to repro my original "issue".

lp...@google.com <lp...@google.com> #6May 3, 2021 04:29PM

Yes, this change didn't land in beta05 - it will be available in the next release.

Er...@gtempaccount.com <Er...@gtempaccount.com> #7Mar 13, 2023 10:41AM

Hello, is there any updates on this issue ? I am seeing the same issue when creating a expandable card which uses AnimatedVisibility .

I am using:

Android Studio Electric Eel | 2022.1.1
androidx.compose:compose-bom:2023.01.00

lp...@google.com <lp...@google.com> #8Mar 15, 2024 02:10AM

Comment #3 isn't really accurate, here's the accurate current state:

On Android, explicitly setting a radius for RippleDrawable will not take effect until the next ripple. In Compose, when the radius is Dp.Unspecified, internally we calculate the default radius to use based on the size, and set this, so even though we could set the radius when the bounds change, this won't take effect.
On non-Android, this isn't implemented currently in Compose, but it could be.
RippleDrawable does support updating radius when the bounds change, if using RippleDrawable.RADIUS_AUTO, but:

The calculation for RADIUS_AUTO is different from the Compose calculation that follows newer specs, so we would need to diverge from specs to support this
If the radius calculated by RADIUS_AUTO changes due to bounds change, then the ripple has to be animated on the UI thread, which can cause jank, which is still not ideal.

If you know that a component's bounds can change, the best workaround is probably to explicitly set a large enough ripple radius that it will cover the expanded state, so the ripple will fill the size in both the collapsed and expanded states. The downside of this would be that the animation would be scaled to the maximum radius, so it would more quickly fill up the collapsed state, but given that the component itself is animating at the same time it is unlikely to be that noticeable.

lp...@google.com <lp...@google.com> #9Sep 27, 2024 07:19PM

Looked into this again, on API 31+ in the framework radius changes are accounted for when the bounds change, so we can implement this on newer versions of Android, at least. Before API 31 the same constraints as mentioned in comment #8 apply

ap...@google.com <ap...@google.com> #10Sep 30, 2024 12:30PM

Marked as fixed.

Project: platform/frameworks/support
Branch: androidx-main
Author: Louis Pullen-Freilich <lpf@google.com>
Link: https://android-review.googlesource.com/3284564

Supports ripple radius updates when bounds change on S+

Expand for full commit details

Supports ripple radius updates when bounds change on S+

On S+, if a new explicit radius is set before changing bounds, the new radius will be applied to an ongoing ripple.

Bug: b/360346196
Fixes: b/183019123
Test: RippleModifierNodeTest
Relnote: "Adds support for ripples in expanding components on Android S+, such as a card that expands on click. Previously the ripple would not fill up the new size but now it will expand to the new bounds"
Change-Id: If509acac87caa3f13aa2cf969f7bfade7da3e7f6

Files:

M compose/material/material-ripple/src/androidInstrumentedTest/kotlin/androidx/compose/material/ripple/RippleModifierNodeTest.kt
M compose/material/material-ripple/src/androidMain/kotlin/androidx/compose/material/ripple/Ripple.android.kt
M compose/material/material-ripple/src/androidMain/kotlin/androidx/compose/material/ripple/RippleHostView.android.kt
M compose/material/material-ripple/src/commonMain/kotlin/androidx/compose/material/ripple/Ripple.kt

Hash: 4a8b8622c7359dd2f881877c11d349d39cdf35a2
Date: Fri Sep 27 20:28:18 2024

na...@google.com <na...@google.com> #11Oct 16, 2024 05:48PM

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

androidx.compose.material:material-ripple:1.8.0-alpha04
androidx.compose.material:material-ripple-jvmstubs:1.8.0-alpha04
androidx.compose.material:material-ripple-linuxx64stubs:1.8.0-alpha04