Just updated to Accompanist 0.19.0, and I have an issue with the reworked HorizontalPager: my items ...

# compose

[Lucien Guimaraes]

Just updated to Accompanist 0.19.0, and I have an issue with the reworked HorizontalPager: my items have now a start/end padding to fill the pager width, instead of only keeping the item width. Anyone know how to fix this ?

20211008_110132.mp4

[Lucien Guimaraes]

I opened an issue here

[nitrog42]

same issue for me, rolled back to 0.18.0 for now, I couldn't find a way to not have item taking full width

[cb]

This is working as intended. If you wish to implement the screenshot from above, you would use something like contentPadding = PaddingValues(start = 16.dp, end = 128.dp)

[cb]

(obviously tweak those values to match your design)

[nitrog42]

so if we want to avoid fixed size (before we used fillMaxWidth(0.9f) ) we have to get the current composable/screen width to do that right ?

[nitrog42]

for example :

[nitrog42]

@OptIn(ExperimentalPagerApi::class)
@Composable
fun PagerContent() {
    HorizontalPager(count = 10, contentPadding = PaddingValues(end = 100.dp)) {
        Box(
            Modifier
                .size(200.dp)
                .background(Color(Random.nextInt()))
        )
    }
}

I'm not sure what is the way to have each square follow each other without any space

[nitrog42]

like that :

[nitrog42]

120.dp seems to be the value here but I found it by trial and error

[Lucien Guimaraes]

This is working as intended. If you wish to implement the screenshot from above, you would use something like contentPadding = PaddingValues(start = 16.dp, end = 128.dp)

Ah ok I will check this, thanks! BTW, is there any reason for this change?

[cb]

@nitrog42: Use Modifier.fillMaxWidth() on your content (plus maybe aspectRatio(1f) if you want them to be square).

[cb]

@Lucien Guimaraes: Yep, the move to LazyRow forced us to re-think how it works. The new API is more restrictive and focused to what Pagers should be (in terms of UX).

What most people are using Pagers for (including @nitrog42's design above) is closer to a LazyRow + snapping, than a Pager.

[cb]

The PR has lots of discussion: https://github.com/google/accompanist/pull/678

[nitrog42]

it seems it also make the "I have an horizontal pager with different item's height" works which is great !

[cb]

Yeah, it comes with a lot of benefits too. contentPadding + key are key benefits

[nitrog42]

though there seems to be a bug with verticalAlignment

[nitrog42]

@OptIn(ExperimentalPagerApi::class)
@Composable
fun PagerContent() {
    HorizontalPager(
        count = 10,
        contentPadding = PaddingValues(start = 20.dp, end = 20.dp),
        itemSpacing = 16.dp,
        verticalAlignment = <http://Alignment.Top|Alignment.Top>,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green)
    ) {
        Box(
            Modifier
                .requiredHeight(100.dp)
                .background(Brush.verticalGradient(colors = listOf(Color.Blue, Color.Red)))
                .fillMaxWidth()
        )
    }
}

still center the content :

[nitrog42]

i'm checking what's happening behind 😄

[nitrog42]

ah yes, it's because each items are wrapped in a Box with

fillParentMaxSize()

[nitrog42]

I made a bug report https://github.com/google/accompanist/issues/779 , I think there is a workaround any way