How to create a circular (Endless) Lazycolumn/LazyRow in Compose

Question

How to achieve infinite like list in Lazycolumn/LazyRow.When scrolled to the end, I would like to views to be visible while the displaying data from the top of the list or when scrolled to the top of the list I would display data from the bottom of the list.

Answer 1

I think something like this can work:

@Composable
fun CircularList(
    items: List<String>,
    modifier: Modifier = Modifier,
    onItemClick: (String) -> Unit
) {
    val listState = rememberLazyListState(Int.MAX_VALUE / 2)

    LazyColumn(
        state = listState,
        modifier = modifier
    ) {
        items(Int.MAX_VALUE, itemContent = {
            val index = it % items.size
            Text(text = items[index])    // item composable
        })
    }
}

Answer 2

In addition to the previous answer, you can make it customizable to support both variants of the list.

@Composable
fun CircularList(
    items: List<String>,
    modifier: Modifier = Modifier,
    isEndless: Boolean = false,
    onItemClick: (String) -> Unit
) {
    val listState = rememberLazyListState(
        if (isEndless) Int.MAX_VALUE / 2 else 0
    )

    LazyColumn(
        state = listState,
        modifier = modifier
    ) {
        items(
            count = if (isEndless) Int.MAX_VALUE else items.size,
            itemContent = {
                val index = it % items.size
                Text(text = items[index])    // item composable
            }
        )
    }
}