https://kotlinlang.org logo
#android
Title
# android
f

Fred Bowker

03/07/2024, 7:59 PM
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
b

bryankeltonadams

04/08/2024, 7:30 PM
Any updates on what you tried? This is interesting, though I don't have this use case.
f

Fred Bowker

04/08/2024, 7:31 PM
still working on it
not entirely sure the answer on this, it’s unclear whether the HorizontalPager is meant to support dynamic paging or not
b

bryankeltonadams

04/08/2024, 7:34 PM
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.
f

Fred Bowker

04/08/2024, 7:34 PM
I’ve given a few tries, and it had issues
b

bryankeltonadams

04/08/2024, 7:35 PM
I see.
f

Fred Bowker

04/08/2024, 7:35 PM
the reason I’m saying I’m not entirely sure is that my colleague is now having a go
b

bryankeltonadams

04/08/2024, 7:35 PM
I see, would appreciate an update if/once a solution is found. 🙂
f

Fred Bowker

04/08/2024, 7:35 PM
image.png
from the docs it implies that you can remove items from it
you also get issues when using vertical scrolling inside horizontalPager
so at the moment we are still trying to figure whether we need to roll our own, or we can use the horizontalpager
b

bryankeltonadams

04/08/2024, 7:37 PM
Like if you have a LazyColumn on one of your pages you mean? (issues with vertical scrolling)?
f

Fred Bowker

04/08/2024, 7:39 PM
yeah
so if you think about something like tinder, you have a vert scroll on every page
aswell as horinzontalscroll if that makes sense
b

bryankeltonadams

04/08/2024, 7:40 PM
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 😛
it looks like you can fix the issue by using nestedScroll
but we are still looking into it all
b

bryankeltonadams

04/08/2024, 8:07 PM
Copy code
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")
    }
}
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?
f

Fred Bowker

04/09/2024, 10:35 AM
Hi
so i think issue will come when you remove a page from the middle