Kotlin with Jetpack Compose -List View

Maneesha Erandi
3 min readMay 20

A List View is a basic component that we need in mobile development. In order to create a list view that scroll vertically, we can use LazyColumn with Jetpack compose. We can use a LazyRow to create a horizontal item list view.

When displaying a large number of items with an unknown length, using Column or Row will cause performance issues.

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 and LazyRow.

Properties of a lazy column.

fun LazyColumn(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyListScope.() -> Unit
) {

Lets see an example.

Creating a Data class and a list of data

data class ListItem(
val id: Int,
val title: String,
val subtitle: String,
val image: Int

val listItems = listOf(
ListItem(1, "Jane doe", "Subtitle for item 1", R.drawable.avatar),
ListItem(2, "Robert C. Williams", "Subtitle for item 2", R.drawable.avatar2),
ListItem(3, "Kendrick M. Valdez", "Subtitle for item 3", R.drawable.avatar3)

Creating a Single List Item view

You can see the list items that I wanted. Image avatar, Name, Another text under the name and an icon at the end of the list item. I wanted all these inside a card view.

So we need to add a Card with a Row inside to organize the item row. Inside the Row we have to add an Image with a circle shape, Column and an IconButton. We have to use the modifier and style params to give the look I wanted.

I added .weight(1f) to the modifier of theColumn in the middle to display the phone icon at the end of the row.

fun ListItem(item: ListItem) {
modifier =…
Maneesha Erandi

I write about mobile development and wildlife.