Level 19

Paging 3 (Infinite Scrolling)

PagingSource, Pager & collectAsLazyPagingItems

Loading thousands of rows at once is wasteful. Paging 3 fetches data in pages as the user scrolls, exposes load states (loading/error/append), and integrates directly with `LazyColumn`.

📚 Explanation

A `PagingSource` knows how to load a single page given a key and returns the prev/next keys so Paging can walk forwards and backwards. `Pager` turns that source into a cold `Flow<PagingData>`; `cachedIn(viewModelScope)` keeps loaded pages across configuration changes. In the UI, `collectAsLazyPagingItems()` gives you an object you drive from `LazyColumn` — items are fetched just before they scroll into view, and `getRefreshKey` lets Paging resume near the user's current position after a refresh.

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

kotlin

import androidx.paging.Pager
import androidx.paging.PagingConfig
import androidx.paging.PagingSource
import androidx.paging.PagingState
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemKey
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import kotlinx.coroutines.flow.Flow

// 1. A PagingSource describes how to load ONE page
class ArticleSource(
    private val api: ArticleApi
) : PagingSource<Int, Article>() {

    override suspend fun load(
        params: LoadParams<Int>
    ): LoadResult<Int, Article> = try {
        val page = params.key ?: 1
        val articles = api.getArticles(page = page, size = params.loadSize)
        LoadResult.Page(
            data = articles,
            prevKey = if (page == 1) null else page - 1,
            nextKey = if (articles.isEmpty()) null else page + 1
        )
    } catch (e: Exception) {
        LoadResult.Error(e)
    }

    // Used to restart paging after a process death / refresh
    override fun getRefreshKey(state: PagingState<Int, Article>): Int? =
        state.anchorPosition?.let { anchor ->
            state.closestPageToPosition(anchor)?.prevKey?.plus(1)
        }
}

// 2. The ViewModel exposes a Flow<PagingData>
class FeedViewModel(api: ArticleApi) : ViewModel() {
    val articles: Flow<PagingData<Article>> = Pager(
        config = PagingConfig(pageSize = 20, prefetchDistance = 5)
    ) { ArticleSource(api) }.flow.cachedIn(viewModelScope)
}

// 3. The UI consumes pages lazily
@Composable
fun FeedScreen(viewModel: FeedViewModel) {
    val items = viewModel.articles.collectAsLazyPagingItems()

    LazyColumn {
        items(
            count = items.itemCount,
            key = items.itemKey { it.id }
        ) { index ->
            val article = items[index] // null while a placeholder loads
            if (article != null) ArticleRow(article)
        }
    }
}

Back to Android Levels Back to Developer Hub

Paging 3 (Infinite Scrolling)

PagingSource, Pager & collectAsLazyPagingItems

Loading thousands of rows at once is wasteful. Paging 3 fetches data in pages as the user scrolls, exposes load states (loading/error/append), and integrates directly with `LazyColumn`.

📚 Explanation

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

import androidx.paging.Pager

import androidx.paging.PagingConfig

import androidx.paging.PagingSource

import androidx.paging.PagingState

import androidx.paging.compose.collectAsLazyPagingItems

import androidx.paging.compose.itemKey

import androidx.compose.foundation.lazy.LazyColumn

import androidx.compose.foundation.lazy.items

import kotlinx.coroutines.flow.Flow

// 1. A PagingSource describes how to load ONE page

class ArticleSource(

private val api: ArticleApi

) : PagingSource<Int, Article>() {

override suspend fun load(

params: LoadParams<Int>

): LoadResult<Int, Article> = try {

val page = params.key ?: 1

val articles = api.getArticles(page = page, size = params.loadSize)

LoadResult.Page(

data = articles,

prevKey = if (page == 1) null else page - 1,

nextKey = if (articles.isEmpty()) null else page + 1

)

} catch (e: Exception) {

LoadResult.Error(e)

}

// Used to restart paging after a process death / refresh

override fun getRefreshKey(state: PagingState<Int, Article>): Int? =

state.anchorPosition?.let { anchor ->

state.closestPageToPosition(anchor)?.prevKey?.plus(1)

}

// 2. The ViewModel exposes a Flow<PagingData>

class FeedViewModel(api: ArticleApi) : ViewModel() {

val articles: Flow<PagingData<Article>> = Pager(

config = PagingConfig(pageSize = 20, prefetchDistance = 5)

) { ArticleSource(api) }.flow.cachedIn(viewModelScope)

}

// 3. The UI consumes pages lazily

@Composable

fun FeedScreen(viewModel: FeedViewModel) {

val items = viewModel.articles.collectAsLazyPagingItems()

LazyColumn {

items(

count = items.itemCount,

key = items.itemKey { it.id }

) { index ->

val article = items[index] // null while a placeholder loads

if (article != null) ArticleRow(article)

}