How to use LazyVerticalGrid with paginated api?

Question

Here's the network request I have:

fun getItems(pageNumber: Int): Single<List<Item>>

Here's my lazy grid:

@Composable
fun ItemGridView(
    productTiles: List<Item>,
) {
    LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier.fillMaxSize(),
    ) {
        items(productTiles) { item -> item.toPrettyComposableView() }
    }
}

Currently, my ItemGridView will stop rendering after the first page, but I would like it to continue requesting and rendering the next page after the user reaches the last item of the page. If the api response gives me an odd number of items for the first page, for the next page, it should continue filling the grid on the right side of the rendered item instead of creating a new row.

Please help

TheLuckyCoder · Accepted Answer · 2023-05-17T19:38:42.073

If you want pagination in your app, perhaps you might want to take a look at the AndroidX Pagination library. It handles all sorts of cases with a nice API, it also has Jetpack Compose support by importing this library implementation("androidx.paging:paging-compose:1.0.0-alpha16").

After following the official guide and trying it out in Compose you might notice that it does have support for LazyColumn and LazyRow but it does not yet have for LazyVerticalGrid.

This extension function might come in useful to you:

fun <T : Any> LazyGridScope.items(
    items: LazyPagingItems<T>,
    key: ((item: T) -> Any)? = null,
    span: ((item: T) -> GridItemSpan)? = null,
    contentType: ((item: T) -> Any)? = null,
    itemContent: @Composable LazyGridItemScope.(value: T?) -> Unit
) {
    items(
        count = items.itemCount,
        key = if (key == null) null else { index ->
            val item = items.peek(index)
            if (item == null) {
                PagingPlaceholderKey(index)
            } else {
                key(item)
            }
        },
        span = if (span == null) null else { index ->
            val item = items.peek(index)
            if (item == null) {
                GridItemSpan(1)
            } else {
                span(item)
            }
        },
        contentType = if (contentType == null) {
            { null }
        } else { index ->
            val item = items.peek(index)
            if (item == null) {
                null
            } else {
                contentType(item)
            }
        }
    ) { index ->
        itemContent(items[index])
    }
}

And you would use it like so:

// Get hold of a Flow of PagingData from your ViewModel or something similar
val pagingListFlow: Flow<PagingData<T>> = ...
val pagingList = photosPagingList.collectAsLazyPagingItems()

LazyVerticalGrid(columns = GridCells.Fixed(columnCount)) {
    // Use the extension function here
    items(items = pagingList) { item ->
        // Draw your composable
    }
}

EDIT: Since version 1.0.0-alpha19 Paging Compose has support for all lazy layouts, check the release notes for examples and changes: https://developer.android.com/jetpack/androidx/releases/paging#1.0.0-alpha19

How to use LazyVerticalGrid with paginated api?

1 Answers1