https://kotlinlang.org logo
Join Slack
Powered by
Is there any way to make compose not clip it's con...
# compose
p
Is there any way to make compose not clip it's contents? I have this compsable inside a recycler view and yet clipChildren is set to false it clips the shadows. The layout bounds are the bounds of a whole composable and it seems to even clip them within a composable
c
IIRC compose does not clip by default. BUT I think a material surface does clip by default. Idk if that helps at all. 🙃
a
the scrolling containers have to clip the content in order to not be drawing the parts of the content which are out of the parent size. there is no way to disable it unfortunately, but you can add the extra padding for the scrolling content to not have it clipped. see contentPadding param on LazyRow
a
ah, if this is about disabling clipping on the ComposeView, yeah this makes sense. ComposeView keeps an AndroidComposeView as a single child that Compose renders into for a bunch of historical reasons; setting the clip on the outer CompoeView won't propagate. Can you file a bug on this? I can't think of a reason why we shouldn't disable clipping on the inner AndroidComposeView implementation detail here, which would let disabling clip on the outer ComposeView do what you expected.
p
Well it's two bugs in one
The top clipping comes from that row thing andrey talkes about and that bottom clipping comes from adams description?
t
Maybe better convert your recyclerview to LazyColumn?
p
That's not in the scope for now 🙂
🆗 1
@Adam Powell
ah, if this is about disabling clipping on the ComposeView, yeah this makes sense. ComposeView keeps an AndroidComposeView as a single child that Compose renders into for a bunch of historical reasons; setting the clip on the outer CompoeView won't propagate.
Line 355 of AndroidComposeView sets clipChildren to false?
a
hmm, explains why this discussion sounded familiar 🙂
p
Content padding on the rows has fixed it:
Is there really no way around that? This feels like in the recycler view days with item decorations and stuff just for adding margins
SubcomposeLayout inside 
LazyList
uses 
clipToBounds
😕
t
Yes i think i had the same problem in the past. When I remember correctly you can use contentPadding to solve your problem. But of course maybe it is not the ideal solution for you. It depends.
p
It makes distancing to other components really hard because now I need to be careful where exactly in the list that item is and dynamically decrease other paddings 😕
t
No inside the list you should not have clipping. Only outside at the bounds of the LazyColumn.
p
If I understand correctly the issue is: LazyRow creates a SubcomposeLayout with clipToBounds() set which clips the cards.
t
Copy code
val test = listOf("A", "B", "C")
LazyRow(contentPadding = PaddingValues(horizontal = 0.dp, vertical = 16.dp)) {
    items(test) {
        Card(Modifier.padding(8.dp), elevation = 16.dp) {
            Box(Modifier.size(200.dp), contentAlignment = Alignment.Center) {
                Text(it)
            }
        }
    }
}
p
Did you write that to confirm my issue?
t
Ok sorry i think i did not get what your issue is
p
Well now you want want that whole thing in a column with a text below that card list with 16dp distance to the top
You will need to create a 8 dp spacer
t
Ok i see. So you want that this is than drawn above the shadow.
p
That intrinsic padding makes the composable way less reusable because when you add it somewhere you now always need to think about the intrinsic paddigs
No, it's not about the drawing order
It's about how reusable that composable is
t
So this code shows your issue right?
Copy code
Column {
    val test = listOf("A", "B", "C")
    LazyRow() {
        items(test) {
            Card(Modifier.padding(8.dp), elevation = 16.dp) {
                Box(Modifier.size(200.dp), contentAlignment = Alignment.Center) {
                    Text(it)
                }
            }
        }
    }
    Box(Modifier.size(100.dp).background(Color.Red))
}
Here the shadow is cut because of no contentPadding
p
Yes
t
Maybe it could be possible to get rid of the vertical clipping of a LazyRow and the horizontal clipping of the LazyColumn?
44 Views
Open in Slack
PreviousNext
Powered by