# compose


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
    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
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
Here's the gist 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.