LazyColumn - Jetpack Compose

For this tutorial, we will be looking at creating a scrollable list inside a LazyColumn

If we wanted to display a large number of items or a list of an unknown length. Using a layout such as Column can cause performance issues, as all the items will be composed and laid out whether or not they are visible. At an app launch for example.

Jetpack Compose provides a set of components which only compose and lay out items which are visible in the component’s viewport. These components include LazyColumn.

Lets Look at Some Code

Here I have created a composable that produces a scrollable list of 100 items, contained in a LazyColumn.

@Composable
fun scrollList() {
    LazyColumn (
        modifier = Modifier
            .fillMaxSize()
            .background(colorResource(id = R.color.black))
            .wrapContentSize(Alignment.Center))
    {
        items(100) {
            Text(
                text = "Item $it",
                fontWeight = FontWeight.Bold,
                color = Color.White,
                textAlign = TextAlign.Center,
                fontSize = 25.sp,
                modifier = Modifier
                    .fillParentMaxWidth()
                    .padding(vertical = 24.dp),
            )
        }
    }
}

Let's See It in Action