I used view pager to achieve the below ui. I had to hardcode the padding to 142.dp. Is there any oth...

# compose

[raghunandan]

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.

[raghunandan]

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

[raghunandan]

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)

[raghunandan]

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

[raghunandan]

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

[raghunandan]

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.

[raghunandan]

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

[raghunandan]

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

[raghunandan]

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.

[raghunandan]

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.