How to build a list in jetpack compose with LazyColumn

In this tutorial you will see how to build a simple list with jetpack compose using LazyColumn view component. You will see how to create the list rows, how to handle a view click event and how to put a header with the parallax image effect.

How to build a list with jetpack compose

How to build a list with LazyColumn in jetpack compose

LazyColumn{
  items(20) { index ->
    ...view
  }
}

Inside the LazyColumn you can add item or items. The difference is that item is just a single cell in the cell. Items instead replicate the cells, given imput number that is the number of cells.

How to add a list header with jetpack compose

To add a list header, you will need to add a single item cell, for example an image view.

 LazyColumn {
        item {
            AsyncImage(
                model = "https://images.unsplash.com/photo-1648737922331-0b5e338215bc?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0OTg2NTgyNA&ixlib=rb-1.2.1&q=80&w=720",
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)                  
            )
        }
        items(20) { index ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.White)
            ) {
                Text("Row $index", modifier = Modifier.padding(20.dp))
            }
        }
    }

How to add the parallax effect with LazyColumn in jetpack compose

In order to enable the parallax effect, you first need to access the state of the LazyColumn using the rememberLazyListState. With this, you can access the scroll information and create the parallax effect on the image header view.

    val scrollState = rememberLazyListState()

    LazyColumn(state = scrollState) {
        item {
            AsyncImage(
                model = "https://images.unsplash.com/photo-1648737922331-0b5e338215bc?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0OTg2NTgyNA&ixlib=rb-1.2.1&q=80&w=720",
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
                    .graphicsLayer {
                        if (scrollState.firstVisibleItemIndex == 0) {
                            translationY = scrollState.firstVisibleItemScrollOffset * 0.5f
                            alpha = 1f - scrollState.firstVisibleItemScrollOffset / 1000f
                        }
                    }
            )
        }
        items(20) { index ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.White)
            ) {
                Text("Row $index", modifier = Modifier.padding(20.dp))
            }
        }
    }

How to add touch event to the cells in LazyColumn

With the clickable modifier, you can add the click actions to the single cells. On every cells you can off course access to the index.

 items(20) { index ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.White)
                    .clickable {
                       //put your touch event here on index cell
                    }
            ) {
                Text("Row $index", modifier = Modifier.padding(20.dp))
            }
        }

Other articles