A modern programming language that makes developers happier.

kotlinlang

Screenshot 2022-07-18 at 4.28.55 PM.png

I used view pager to achieve the below ui. I had to hardcode the padding to 142.dp. Is there any other way to achieve this using pager  lib.

```HorizontalPager(
    count = 10,
    contentPadding = PaddingValues(horizontal = 142.dp, vertical = 0.dp),
    modifier = modifier
) // 142 is hardcoded value that i came up randomly```

```    val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue
 
    val percentFromCenter = 1.0f - (pageOffset / (5f/2f))

    val itemScale = 0.5f + (percentFromCenter * 0.5f).coerceIn(0f, 1f)
    val  opacity = 0.25f + (percentFromCenter * 0.75f).coerceIn(0f, 1f)

    alpha = opacity
    scaleY = itemScale
    scaleX= itemScale
}.clip(CircleShape)```


Screenshot_20220718_162936.png

Result!. Is this the right way or  can this be bettered??

<https://github.com/google/accompanist/issues/849|https://github.com/google/accompanist/issues/849> something similar??

i did padding as screenwidth/2 - 50.dp ( the size of the center circle)  seems to work. Not sure if i can do better. Seems to work.

I think a better way is to have a custom layout in compose drawing inspiration from <https://fvilarino.medium.com/creating-a-circular-list-in-jetpack-compose-29924c70e3e0>

Here's the gist <https://gist.github.com/raghunandankavi2010/133b9a821b483cea584d5c7de658ba08>. Any suggestions to make it better??. No view pager and hardcoding padding values.

```val contentPadding = (maxWidth - 50.dp) / 2
val center = maxWidth / 2
val offSet = maxWidth / 5
val itemSpacing = offSet - 50.dp```
This did the trick. No more hardcoded padding using BoxWithContraints to measure the width.

But the horizontal pager seems to take vertical gesture as well on horizontal swipe. This seems to be fixed if you update accompanist pager lib.