Let’s begin by organising how the gadgets are organized vertically. Simply take a field and for every person calculate its offsetX and offsetY as proven within the diagram above.
This may give us our vertical alignment. Now let’s clear up our horizontal alignment by adjusting the offset calculation as follows
var isHorizontal by bear in mind {
mutableStateOf(false)
}
...
val offsetX = (screenWidth - 25.dp) / 2 + if (isHorizontal) (index * 25).dp else 0.dp
val offsetY = ((screenHeight - 25.dp) / 2) + if (isHorizontal) 0.dp else (index * 50).dp
...
What we have performed right here is create an isHorizontal variable that toggles after we click on a button to alter the type.
We added the display screen width and top within the calculation simply to middle the view and it isn’t vital.
To type vertically, we improve the y-coordinate by the index 50dp occasions.
To type horizontally, we improve the x coordinate by the index by 25dp (50dp % 2).
To date, what we get it as under