Jetpack Compose: How to wrap list items inside a Card

Question

I have a screen where I need to show a header and a list of items wrapped in a card view. The whole screen has to be scrollable (like shown in the image below).

I know how to do this with a scrollable Column but I want to be able to use a LazyColumn (because each list item will have its own ViewModel due to the complexity of the view and I thought LazyColumn will be more resources-efficient). For the header, I can use item and for the list, I can use items. Below is the code I tried:

@Composable
fun Screen(
  items: List<String>
) {
  Column(
    Modifier.fillMaxSize()
  ) {
    TopAppBar(title = { Text(text = "My Activity") })

    LazyColumn {

      // Header
      item {
        Text("Title", Modifier.padding(32.dp))
      }

      // I cannot use Box in this way here
      Box(Modifier.padding(32.dp)) {
        Card {
          items(items.size) {
            Text("Item $it")
          }
        }
      }
    }
  }
}

The problem with that code is that I cannot wrap the list items in a card view because Card is not a LazyListScope. Using LazyColumn, how can I wrap the list items in a Card?

The [same question](https://stackoverflow.com/questions/69501458/lazycolumn-with-header-item-in-card-and-remaining-items-in-card) has been asked earlier. No answers so far :( — Abhimanyu, Oct 29 '21 at 14:48
@OmKumar you can take a video of it and then convert the video to gif file — Sepideh Vatankhah, Apr 08 '22 at 13:50

score 0 · Answer 1 · answered Jul 19 '23 at 16:45

As a workaround, you can emulate Card by drawing a custom Shape.

It would look something like this: screen_record

sealed class Item
class HeaderItem(...): Item()
class ContentItem(...) : Item()

...

val items: SnapshotStateList<Item> = mutableStateListOf()

...

LazyColumn(
        modifier = Modifier.fillMaxSize(),
    ) {
        itemsIndexed(
            items = state.items,
        ) { index, item ->

            val prevItem = state.items.getOrNull(index - 1)
            val nextItem = state.items.getOrNull(index + 1)

            Column {
                when (item) {
                    is HeaderItem -> Header(item)

                    is ContentItem -> {
                        Box(
                            modifier = Modifier
                                .heightIn(min = 48.dp)
                                .fillMaxWidth()
                                .clip(shape = getShape(prevItem, nextItem, 16.dp))
                                .background(Color.Green.copy(0.3F))
                        ) {
                            Item(item)
                        }
                    }
                }
            }
        }

fun getShape(prevItem: Item?, nextItem: Item?, corner: Dp): Shape {
    return if (prevItem is ContentItem && nextItem is ContentItem) {
        //FLAT
        RectangleShape
    } else if (prevItem !is ContentItem && nextItem !is ContentItem) {
        //ROUNDED_ALL
        RoundedCornerShape(corner)
    } else if (prevItem !is ContentItem) {
        //ROUNDED_TOP
        RoundedCornerShape(topStart = corner, topEnd = corner)
    } else {
        //ROUNDED_BOTTOM
        RoundedCornerShape(bottomStart = corner, bottomEnd = corner)
    }
}

score -1 · Answer 2 · answered Mar 29 '23 at 08:30

You had it slightly mixed up, you should put the Card inside of the items call:

    LazyColumn {
      // Header
      item {
        Text("Title", Modifier.padding(32.dp))
      }
      
      items(items.size) {
          // You can use Box in this way here
          Box(Modifier.padding(32.dp)) {
            Card {
              Text("Item $it")
            }
          }
       }
    }

Jetpack Compose: How to wrap list items inside a Card

2 Answers2