在 Compose 中滚动时，HorizontalPager 未占用全宽

Question

I am using a ComposeView in an xml and loading a HorizontalViewPager in that view. My expected behaviour of that pager is when I scroll the items of that pager it should not be inside the bound of the padding of the parent layout but take the edge to edge scrolling instead. Here is the current look:

But I want something like this:

This is how I am getting the viewpager:

HorizontalPager(
                count = promotionalBanners.size,
                state = pagerState,
                itemSpacing = 8.dp,
                contentPadding = PaddingValues(end = 16.dp)
            ) {

                Card(
                    Modifier
                        .fillMaxWidth()
                        .height(172.dp)
                ) {
                    NetworkImage(
                        modifier = Modifier
                            .fillMaxSize()
                            .aspectRatio(1.8f)
                            .clip(RoundedCornerShape(4.dp))
                            .clickable {
                                context.openUrl(
                                    promotionalBanners[it].redirectUrl,
                                    navController
                                )
                            },
                        imageUrl = promotionalBanners[it].bannerUrl,
                        contentDescription = promotionalBanners[it].redirectUrl,
                        contentScale = ContentScale.FillBounds
                    )
                }
            }

Can any one suggest me how can I achieve that?

Answer 1

You have to calculate your conentPadding based on your item size.

val horizontalPadding = 16.dp
val itemWidth = 340.dp
val screenWidth = LocalConfiguration.current.screenWidthDp
val contentPadding = PaddingValues(start = horizontalPadding, end = (screenWidth - itemWidth + horizontalPadding).dp)

Try this solution.

Answer 2

I have found the solution by myself. Here is how I have solved it. In the xml where the composeview is places I have added this:

<androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_promotional_banner"
        android:layout_marginStart="-16dp"
        android:layout_marginEnd="-16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/rec_partners"/>

The -16dp did the trick here, it managed to disobey the parent layout padding, after that the simple below code placed the viewpager in position:

HorizontalPager(
                count = promotionalBanners.size,
                state = pagerState,
                itemSpacing = 8.dp,
                contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
            )