Hi everyone, I’m looking for a pager in Jetpack compose where the pages can be added dynamically, my...

# android

[Fred Bowker]

Hi everyone, I’m looking for a pager in Jetpack compose where the pages can be added dynamically, my code polls the server and on new info adds a page to the end of the pager. My question is has anyone done this with HorizontalPager, or is this not functionality that it supports. I could update the pageCount in the rememberState, but want to check if anyone has tried this, or whether they would go with a different approach

[bryankeltonadams]

Any updates on what you tried? This is interesting, though I don't have this use case.

[Fred Bowker]

still working on it

[Fred Bowker]

not entirely sure the answer on this, it’s unclear whether the HorizontalPager is meant to support dynamic paging or not

[bryankeltonadams]

Wonder how difficult it would be to test it in a sample app with just an empty screen and a StateFlow that has a list on it and then try to make the pages based off of the elements in the list.

[Fred Bowker]

I’ve given a few tries, and it had issues

[bryankeltonadams]

I see.

[Fred Bowker]

the reason I’m saying I’m not entirely sure is that my colleague is now having a go

[bryankeltonadams]

I see, would appreciate an update if/once a solution is found. 🙂

[Fred Bowker]

image.png

[Fred Bowker]

from the docs it implies that you can remove items from it

[Fred Bowker]

you also get issues when using vertical scrolling inside horizontalPager

[Fred Bowker]

so at the moment we are still trying to figure whether we need to roll our own, or we can use the horizontalpager

[bryankeltonadams]

Like if you have a LazyColumn on one of your pages you mean? (issues with vertical scrolling)?

[Fred Bowker]

yeah

[Fred Bowker]

so if you think about something like tinder, you have a vert scroll on every page

[Fred Bowker]

aswell as horinzontalscroll if that makes sense

[bryankeltonadams]

Interesting, one of our pages is a location list which has a LazyColumn on that page, though I personally haven't added a ton of locations in order to actually test scrolling 😛

[Fred Bowker]

https://stackoverflow.com/questions/77820059/lazycolumn-scroll-delay-in-horizontalpager-jetpack-compose

[Fred Bowker]

it looks like you can fix the issue by using nestedScroll

[Fred Bowker]

but we are still looking into it all

[bryankeltonadams]

package com.bryankeltonadams.testdynamicpager

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.bryankeltonadams.testdynamicpager.ui.theme.TestDynamicPagerTheme
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.update

data class PageUiState(val pageList: List<String> = listOf("Page 1", "Page 2", "Page 3"))


class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalFoundationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestDynamicPagerTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                    var items by remember { mutableStateOf(listOf("choiceList", "map")) }
                    val pagerState = rememberPagerState(pageCount = { items.size })

                    Column() {
                        HorizontalPager(
                            state = pagerState,
                            modifier = Modifier.weight(1f)
                        ) { index ->
                            Text(text = items[index])
                        }
                        Button(onClick = {
                            items = items + "grape"
                        }) {
                            Text("Add Page")
                        }
                    }

                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    TestDynamicPagerTheme {
        Greeting("Android")
    }
}

[bryankeltonadams]

I did this in a sample project and was able to get new pages to appear upon button press. what are you specifically looking for?

[Fred Bowker]

Hi

[Fred Bowker]

so i think issue will come when you remove a page from the middle

[Gregory]

I extracted the code for a simple slider I developed:
https://github.com/GoCardsEdu/Dynamic-Pager/blob/main/dynamic-pager/src/main/java/pl/gocards/dynamic_pager/DynamicPagerViewModel.kt
Yes, deleting pages was the hardest part so the animations would still work properly.