LazyList clips children [186318448]

Fixed

Bug

Status Update

No update yet.

Description

wo...@gmail.com

created issue #1

Apr 26, 2021 03:49PM

I have a LazyRow of Cards.

Now LazyRow creates as a LazyList which creates a SubcomposeLayout which has `clipToBounds() in it's modifiers set.

This leads to LazyRow clipping the shadows of cards. As a workaround I can create enough content padding. This is however a suboptimal solution because that makes it harder to position other elements in relation to that LazyRow composable as it's bottom / top now do not start at the bottom / top of the cards.

It would be great if you could find a way such that LazyRow / LazyColumn would not clip it's children.
Tested on compose beta 5.

Comments

pa...@google.com <pa...@google.com> Apr 26, 2021 04:14PM

Assigned to an...@google.com.

wo...@gmail.com <wo...@gmail.com> #2Apr 26, 2021 04:23PM

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

Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling

Expand for full commit details

Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling 
 
These APIs allow overscroll to have events dispatched to it by one component, and rendered in a separate component. 
 
Fixes: b/266550551 
Fixes: b/204650733 
Fixes: b/255554340 
Fixes: b/229537244 
Test: OverscrollTest 
Relnote: "Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling APIs - these APIs create a wrapped instance of the provided overscroll effect that doesn't draw / handle events respectively, which allows for rendering  overscroll in a separate component from the component that is dispatching events. For example, disabling drawing the overscroll inside a lazy list, and then drawing the overscroll separately on top / elsewhere." 
Change-Id: Idbb3d91546b49c1987a041f959bce4b2b09a9f61

Files:

M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/api/restricted_current.txt
M compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/OverscrollDemo.kt
M compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/OverscrollSample.kt
M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/OverscrollTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Overscroll.kt

Hash: f64e25b7a473c757d080521e7dd97b3f6670f60d
Date: Fri Nov 01 18:43:56 2024

lo...@gmail.com <lo...@gmail.com> #3Apr 26, 2021 05:45PM

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

androidx.compose.foundation:foundation:1.8.0-alpha06
androidx.compose.foundation:foundation-android:1.8.0-alpha06
androidx.compose.foundation:foundation-jvmstubs:1.8.0-alpha06
androidx.compose.foundation:foundation-linuxx64stubs:1.8.0-alpha06

ap...@google.com <ap...@google.com> #4May 25, 2021 02:07PM

Marked as fixed.

Project: platform/frameworks/support
Branch: androidx-main

commit 0df3d14606dc7376ef7b5a4c91d45716524e3a5c
Author: Andrey Kulikov <andreykulikov@google.com>
Date: Mon May 24 20:30:27 2021

Fix for scrollable containers clipping its children on the cross axis

In the scrollable containers we want to clip the main axis sides in order to not display the content which is scrolled out. But once we apply clipToBounds() modifier on such containers it causes unexpected behavior as we also clip the content on the cross axis sides. It is unexpected as Compose components are not clipping by default. The most common case how it could be reproduced is a horizontally scrolling list of Cards. Cards have the elevation by default and such Cards will be drawn with clipped shadows on top and bottom. This was harder to reproduce in the Views system as usually scrolling containers like RecyclerView didn't have an opaque background which means the ripple was drawn on the surface on the first parent with background. In Compose as we don't clip by default we draw shadows right in place. We faced similar issue in Compose already with Androids Popups and Dialogs where we decided to just predefine some constant with a maximum elevation size we are not going to clip. We are going to reuse this technique here. This will improve how it works in most common cases. If the user will need to have a larger unclipped area for some reason they can always add the needed padding inside the scrollable area.

Relnote: Fix for scrollable containers clipping its children on the cross axis. It was easily reproducible if you have a LazyRow with Card items. now the shadow will not be clipped.
Test: new tests
Fixes: 186318448
Change-Id: Icb6356d8dac24720981caa6afe8785546a2e7847

M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/ScrollTest.kt
M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/lazy/LazyColumnTest.kt
M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/lazy/LazyRowTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Scroll.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyList.kt

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

wo...@gmail.com <wo...@gmail.com> #5May 25, 2021 02:52PM

Thanks for your fantastic work :)

[Deleted User] <[Deleted User]> #6Nov 7, 2022 01:19PM

Hi!

I've stumbled across this issue when searching for information about clipping myself. It's really unexpected that LazyList clips in the cross axis, and the use case can very well expand beyond shadows.
For my case, I needed a small avatar which holds a card and is placed with a certain offset, and the MaxSupportedElevation used for clip in the cross-axis was not sufficient for my use-case. It's implemented with negative offset and lies within an item placed in a LazyRow.

My use case is solvable by altering the padding (and making a custom spacing-scheme for the overlying LazyColumn), but it's not an optimal solution. Would be really nice if clipping in the cross-axis could be removed as a whole!

Tested on compose 1.2.0.

an...@google.com <an...@google.com> #7Nov 7, 2022 01:23PM

Hey. Unfortunately I am not sure it will be an efficient solution. We anyway have to clip with some bounds and the smaller the bounds the more efficient it is to clip. Feel free to use content padding as you need for your use case