https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
r

raghunandan

07/18/2022, 11:04 AM
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.
Copy code
HorizontalPager(
    count = 10,
    contentPadding = PaddingValues(horizontal = 142.dp, vertical = 0.dp),
    modifier = modifier
) // 142 is hardcoded value that i came up randomly
Copy code
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)
Result!. Is this the right way or can this be bettered??
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.
Copy code
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.
9 Views
Powered by