Horizontal Scrolling inside LazyColumn in Jetpack Compose

Question

I'm currently trying to recreate a behavior, upon adding a new element to a LazyColumn the items start shifting to the right, in order to represent a Tree and make the elements easier to read.

The mockup in question:

---

Documentation

Reading through the documentation of Jetpack Compose in Lists and grids I found the following.

Keep in mind that cases where you’re nesting different direction layouts, for example, a scrollable parent Row and a child LazyColumn, are allowed:

Row(
    modifier = Modifier.horizontalScroll(scrollState)
) {
    LazyColumn {
        // ...
    }
}

---

My implementation

    Box(Modifier.padding(start = 10.dp)) {
        Row(
                modifier = Modifier
                    .horizontalScroll(scrollState)
                    .border(border = BorderStroke(1.dp, Color.Black))
        ) {
            LazyColumn(
                modifier = Modifier.fillMaxWidth()
            ) {
                for (i in 0..25) {
                    item {
                        OptionItem(Modifier.padding(start = (i*20).dp))
                    }
                    item {
                        TaskItem(Modifier.padding(start = (i*10).dp))
                    }
                }
            }
        }

        .
        .
        .
    }

OptionItem represents the element with the dot at the beginning, and TaskItem the other one.

When testing the LazyColumn, it appears as if instead of having a fixed size, the size of the column starts growing just after the elements have gone outside the screen, this causes a strange effect.

As you can see in the GIF, the width of the column starts increasing after the elements no longer fit in the screen.

---

The Question

I want to prevent this effect from happening, so is there any way I could maintain the width of the column to the maximum all the time?

Answer 1

The reason that applying a simple fillMaxWidth will not work because you are telling a composable to stretch to max, but that is impossible because the view itself can stretch indefinitely since it can be horizontally scrollable. I'm not sure why do you want to prevent this behavior but perhaps maybe you want your views to have some initial width then apply the padding, while maintaining the same width. what you can do in such case is simply give your composables a specific width, or what you can do is to get the width of the box and apply them to your composables by width (i used a text in this case)

val localDensity = LocalDensity.current
var lazyRowWidthDp by remember { mutableStateOf(0.dp) }
Box(
    Modifier
        .padding(start = 10.dp)
        .onGloballyPositioned { layoutCoordinates ->  // This function will get called once the layout has been positioned
            lazyRowWidthDp =
                with(localDensity) { layoutCoordinates.size.width.toDp() }  // with Density is required to convert to correct Dp
        }
) {
    val scrollState = rememberScrollState()
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .horizontalScroll(scrollState)
    ) {
        items(25) { i ->
            Text(
                text = "Hello",
                modifier = Modifier
                    .padding(start = (i * 20).dp)
                    .width(lazyRowWidthDp)
                    .border(1.dp, Color.Green)
            )
        }
        items(25) { i ->
            Text(
                text = "World",
                modifier = Modifier
                    .padding(start = (i * 10).dp)
                    .width(lazyRowWidthDp)
                    .border(1.dp, Color.Green)
            )
        }
    }
}

Edit:

you can apply horizontal scroll to the lazy column itself and it will scroll in both directions