Jetpack Compose Paging Group Items Under Header

December 17, 2021

Setup Paging Source with ContentResolver.query.

We have items of List<Gallery.LocalImage> with compose paging support, now I wanted to display the images group by date (day) header.

@Composable
fun SelectPhotoScreen(viewModel: SelectPhotoViewModel = viewModel(), albumId: String) {
    val lazyImages = viewModel.fetchLocalImage(albumId = albumId).collectAsLazyPagingItems()

    LazyColumn {
        val itemCount = lazyImages.itemCount

        // pre-process
        var lastDateGroup: String? = null
        // var images = mutableListOf<Gallery.LocalImage>()
        val dayBatch = mutableMapOf<String, MutableList<Int>>()
        val rowSize = 3

        for (index in 0 until itemCount) {
            // val nextImage =  lazyImages[index]
            // prevent pageload
            val nextImage =  lazyImages.peek(index)

            if (nextImage != null) {
                // format datetime to date string
                val date = nextImage.created.format(DateTimeFormatter.ISO_LOCAL_DATE)
                if (lastDateGroup == null || date != lastDateGroup) {
                    dayBatch[date] = mutableListOf()
                    lastDateGroup = date
                }

                dayBatch[lastDateGroup]?.add(index)
            }
        }

        for ((dateGroup, imageIndexes) in dayBatch) {
            stickyHeader(key = dateGroup) {
                Text(
                    text = dateGroup,
                    color = MaterialTheme.colors.primary,
                    style = MaterialTheme.typography.h6,
                    modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp)
                )
            }

            item(key = "$dateGroup-images") {
                // show 3 image per row
                Grid(
                    rowSize = rowSize,
                    chunks = imageIndexes.chunked(rowSize)
                ) { _, imageIndex, modifier ->
                    // trigger pageload
                    val localImage = lazyImages[imageIndex]
                    PhotoItem(
                        modifier = modifier,
                        data = localImage?.uri
                    )
                }
            }
        }
    }
}

NOTE: Refer PhotoItem

NOTE: Refer Grid

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Related entries:

Jetpack Compose LazyColumn Add Divider

Jetpack Compose Google Places Show Nearby Places

Jetpack Compose Show Confirm Dialog

Jetpack Compose Show TextField with Popup Date and Time Picker

Jetpack Compose Show Progress Bar Dialog

Jetpack Compose Load Data (Flow.collectAsState) Common Mistakes (Compose Infinite Loop)

Jetpack Compose Load Data (Initial on Show) using Flow or Coroutines

Jetpack Compose Paging With Header