1

I have created a horizontal pager and I have tried multiple things but unable to eliminate extra space after last item. Spacing before first item is correct but a lot after last item.

enter image description here

enter image description here

I want last space also to be uniform just like first.

HorizontalPager(
verticalAlignment = Alignment.Top,
count = 3,
state = pagerState,
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.constrainAs(pager) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(beneTitle.bottom)
},
contentPadding = PaddingValues(end = 80.dp),
itemSpacing = 16.dp
) { page -\>
val currentItem = additionalBenefitItem.listItems\[page\]
Box(modifier = Modifier.width(260.dp)) {
Card(
modifier = Modifier.clickable {
viewModel.updateSelectedBenefitCardIndex(page)
onCardClick()
}.padding(top = 20.dp),
elevation = 2.dp,
shape = RoundedCornerShape(corner = CornerSize(16.dp)),
backgroundColor = Color(
android.graphics.Color.parseColor(

                                currentItem.backgroundColor
                        )
                    )
                ) {
                    ConstraintLayout(
                        modifier = Modifier.fillMaxWidth(),
                    ) {
                        val (
                            title, description, image, feature1
                        ) = createRefs()
                        Text(
                            text = currentItem.title,
                            style = Theme.typography.bold,
                            modifier = Modifier
                                .constrainAs(title) {
                                    start.linkTo(parent.start, 16.dp)
                                    top.linkTo(parent.top, 40.dp)
                                },
                            color = Theme.colors.primary
                        )
                        Text(
                            text = currentItem.description!!,
                            style = Theme.typography.smallTextAdd,
                            modifier = Modifier
                                .constrainAs(description) {
                                    start.linkTo(parent.start, 16.dp)
                                    top.linkTo(title.bottom, 10.dp)
                                    end.linkTo(image.start, 24.dp)
                                    width = Dimension.fillToConstraints
                                },
                            color = Theme.colors.primary
                        )
                        AsyncImage(
                            model = currentItem.image,
                            contentDescription = null,
                            modifier = Modifier
                                .constrainAs(image) {
                                    end.linkTo(parent.end, 14.dp)
                                    top.linkTo(parent.top, 42.dp)
                                }
                                .height(72.dp)
                                .width(92.dp)
                        )
                        Row(
                            modifier = Modifier
                                .padding(bottom = 8.dp, start = 16.dp, end = 18.dp)
                                .fillMaxWidth()
                                .constrainAs(feature1) {
                                    start.linkTo(parent.start, 16.dp)
                                    top.linkTo(image.bottom, 20.dp)
                                    end.linkTo(parent.end, 18.dp)
                                },
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            val color = android.graphics.Color.parseColor(
                                
                                    currentItem.textColor
                            )
                            currentItem.featureList.forEach {
                                BulletPoints( // custom compose function
                                    text = it,
                                    color = Color(color),
                                    modifier = Modifier.padding(top = 0.dp),
                                    textStyle = Theme.typography.style400_10_12
                                )
                            }
                        }
                    }
  
                AsyncImage(
                    model = 
                        currentItem.logoUrl,
                    contentDescription = null,
                    modifier = Modifier
                        .padding(16.dp, 0.dp, 20.dp, 20.dp)
                        .align(Alignment.TopStart)
                        .height(44.dp)
                        .width(44.dp)
            `your text`            .border(BorderStroke(2.dp,Color(
                            android.graphics.Color.parseColor(
                               
                                    currentItem.backgroundColor
                            )                            )), shape = CircleShape)
                )
            }
        }`
Taslim Oseni
  • 6,086
  • 10
  • 44
  • 69

0 Answers0