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

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager

By Desmond Lua

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

Tags:

Jetpack Compose ModalBottomSheetLayout Sample

Jetpack Compose LazyColumn of Clickable Icon With Text

Jetpack Compose LazyVerticalGrid Within LazyColumn

Jetpack Compose Nested Lazycolumn

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)