Jetpack Compose - Scrollable Column and clip to padding

Question

I have a simple screen with scrollable vertical column. It contains some text and images.

 Column(
   modifier = Modifier
     .fillMaxWidth()
     .padding(16.dp)
     .verticalScroll(rememberScrollState()),
 ) {
      ...
   }

The content is scrollable but it clips to defined padding. Meaning when you scroll, you can see that overscroll shadow does not fill the entire screen, but it is bound to the padding. It looks really bad:

In XML world you would use android:clipToPadding="false" to "fill" the container. Is there equivalent of that in Compose?

Answer 1

Got it, apparently order of modifier constraints matters, didn't know that. Just place padding as last one.

Column(
   modifier = Modifier
     .fillMaxWidth()
     .verticalScroll(rememberScrollState())
     .padding(16.dp),
 ) {
      ...
   }

Answer 2

Instead of setting the padding via modifier to the whole view, set the padding only for the content:

    LazyColumn(
        modifier = Modifier.fillMaxWidth(),
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) {
       ...
    }