How to add multiple items to Accompanist HorizontalPager?

Question

When I create

HorizontalPager(count = 3) {
   page  -> ComposableName()
}

It just shows same composable multiple times, i can't add few pages and if I try to

HorizontalPager(count = 3) {
   Image()
   Image()
   Image()
}

elements are just stacked on top of each other and also 3 times.

Is there any way to make smth like

LazyColumn()
{
item {}
item {}
item {}
}

If not what's the simplest solution?

score 1 · Accepted Answer · answered Jan 04 '23 at 00:06

1

In the content block of HorizontalPager you get index of the page that should be displayed. So you can do something like this:

HorizontalPager(count = 3) { index ->
    if (index == 0) {
        Image0()
    } else if (index == 1) {
        Image1()
    }
    ...
}

answered Jan 04 '23 at 00:06

Jan Bína

3,447
14
16

God bless you! It was so confusing and unintuitive to figure out on my own! Maybe you could advise some other resources? – Osanosa Jan 04 '23 at 20:41
Well Accompanist has many samples that show how to use those components: https://github.com/google/accompanist/blob/v0.28.0/sample/src/main/java/com/google/accompanist/sample/pager/HorizontalPagerTabsSample.kt#L112 – Jan Bína Jan 05 '23 at 15:14

score 1 · Answer 2 · answered Mar 08 '23 at 05:40

The way to make it works is:

val itemPager = listOf(Image1: String, Image2: String, Image3: String )

val pagerState = rememberPagerState()
    
HorizontalPager(count = itemPager.size, state = pagerState) { currentPage -> 
     
    Image(currentPage)
}


@Composable
fun Image(page: String) {
     Async...(page)
}

In the example, I used Coil. You can use what you want,

How to add multiple items to Accompanist HorizontalPager?

2 Answers2