[ScrollView fillViewport] There were a few discuss...

# compose

[Csaba Szugyiczki]

[ScrollView fillViewport] There were a few discussions about how to replicate ScrollView-s fillViewport=true behaviour. The same can be definitely achieved with a Column having fillMaxHeight height, and then applying the verticalScroll modifier on it. But if we use an inner Column, then the way it is measured is different than what we got used to using XML layouts. Setting an inner Columns height to wrapContentHeight and applying .weight(1f) on it only respects the weight modifier, but the wrapContentHeight modifier is ignored. This makes the Column cut its children.
Is there a workaround for this?
Sample code in 🧵

[Csaba Szugyiczki]

Here is my example setup in Compose

[Csaba Szugyiczki]

Column(
Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.background(color = Color.Red)
) {
Text(text = “Header”)

Column(
Modifier
.wrapContentHeight()
.weight(1f)
.background(color = Color.Blue)
) {
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(900.dp)
)
}

Text(text = “Footer”)
}

[Csaba Szugyiczki]

This creates the following result. Notice the Footer being visible, despite adding a 900 dp tall child inside the inner Column.

[Csaba Szugyiczki]

The same layout created using XML

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="<http://schemas.android.com/apk/res/android>"
    xmlns:tools="<http://schemas.android.com/tools>"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ec0000"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Header" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#0000ec">

            <View
                android:layout_width="match_parent"
                android:layout_height="900dp" />
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Footer" />

    </LinearLayout>
</ScrollView>

[Csaba Szugyiczki]

This creates a scrollable screen, witch respects the 900 dp height of the inner content

[Csaba Szugyiczki]

[Albert Chang]

I think you are misunderstanding Modifier.wrapContentHeight(). It is not the same as wrap_content in View system as it doesn't change layout size. It only controls how the content is aligned in the incoming constraints. See the doc:

If the content's measured size is smaller than the minimum height constraint, align it within that minimum height space. If the content's measured size is larger than the maximum height constraint (only possible when unbounded is true), align over the maximum height space.

[Albert Chang]

To achieve what you want, you can add a spacer with `Modifier.weight(1f)`:

Column(
    Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
        .background(color = Color.Red)
) {
    Text(text = "Header")
    Column(
        Modifier.background(color = Color.Blue)
    ) {
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(900.dp)
        )
    }
    Spacer(modifier = Modifier.weight(1f))
    Text(text = "Footer")
}

[Csaba Szugyiczki]

Yeah, I know that I can lift the Child applying weight to make it work, but this way I have to apply the Blue background on the Spacer. With blue background it is not a big deal, but if you have more complicated background decorations, like rounded corners, it gets more and more complicated