Search code examples
android-jetpack-compose

Jetpack Compose - Scrollable Column and clip to padding


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:

enter image description here

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


Solution

  • 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),
     ) {
          ...
       }