Easy Android ListView Pagination using Jetpack Compose

Why Pagination?

Normal Lazy List in Jetpack Compose

LazyColumn {
items(state.data.size) {
ItemComposable(state.data[it], onItemClicked)
}

}

When to Load More Data

val listState = rememberLazyListState()LazyColumn(state = listState) {
items(state.data.size) {
ItemComposable(state.data[it], onItemClicked)
}

}
val isScrollToEnd by remember {
derivedStateOf {
listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index == listState.layoutInfo.totalItemsCount - 1
}
}
if (isScrollToEnd) {
onLoadMore()
}
State 1, 2, 3
sealed class ViewState {
object EmptyScreen : ViewState()
data class Loaded(val data: List<String>, val loadingMore: Boolean) : ViewState()
object Loading : ViewState()
}
@Composable
fun ContentComposable(
state: ViewModel.ViewState?,
onLoadMore: () -> Unit,
onItemClicked: () -> Unit,
) {
when (state) {
is ViewModel.ViewState.EmptyScreen -> {
Text
("Empty Screen")
}
is ViewModel.ViewState.Loaded -> {
LoadedComposable(state, onLoadMore, onItemClicked)
}
ViewModel.ViewState.Loading -> {
Text
("Initial Loading")
}
}
}

Final Loaded State.

@Composable
private fun LoadedComposable(
state: ViewModel.ViewState.Loaded,
onLoadMore: () -> Unit,
onItemClicked: () -> Unit
) {
val listState = rememberLazyListState()

val isScrollToEnd by remember {
derivedStateOf {
listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index == listState.layoutInfo.totalItemsCount - 1
}
}

if (isScrollToEnd && !state.loadingMore) {
onLoadMore()
}
LazyColumn(state = listState) {
items(state.data.size) {
ItemComposable(state.data[it], onItemClicked)
}

if (state.loadingMore) {
item {
CircularProgressIndicator(color = Color.Red)
}
}
}
}

ViewModel Layer

private val lists = mutableListOf<String>()
private var pageNo = 1
fun onLoadMore() {
if (!(viewStateLiveData.value as SearchViewState.Loaded).loadingMore) {
pageNo++
viewStateLiveData.value = SearchViewState.Loaded(lists, true)
val newData = getData(pageNo) // Api call
lists.addAll(searchData)
_viewStateLiveData.value = SearchViewState.Loaded(lists, false)
}
}

--

--

--

Lead Android Developer, Flutter Lover

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Secure your API KEY before publishing your project on internet

OnCollisionEnter VS OnTriggerEnter (Game Dev Day 11)

Implementing The Motion System with material components for Android

Git history as a motivational tool

Efficiently configuring binary dependencies in a multi-flavour Android project.

Text Classification using TensorFlow Lite in Android

Implementing Core Splashscreen API

Day32 of #100DaysOfCode

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabil Mosharraf Hossain

Nabil Mosharraf Hossain

Lead Android Developer, Flutter Lover

More from Medium

Creating an animated selector in Jetpack Compose

Animate on a Path with Android Jetpack Compose UI

LiveData in Kotlin

Scalable navigation in Android programmatically with Jetpack Navigation