Understand Arrangement and Alignment in Jetpack Compose
Esse texto também está disponível em português aqui: https://vitor-ramos.medium.com/espa%C3%A7amento-com-arrangement-e-alignment-no-jetpack-compose-85830c516d61
Today I found a question in Stack Overflow about spacing children in a Row when using Jetpack Compose. The question was closed because the person who asked it provided very little context and someone judged it to need more details or clarity. I made and edit in the question to try to bring it back to life, since it’s something that I had asked myself a few weeks ago.
I’m waiting for someone to approve my edit and reopen the question. In the meantime, I decided to post here an explanation and comment the link in the question, so maybe I can help devs out there even if the question remains closed.
The Jetpack Compose team took a very good design decision by having different names for the param that dictates how the main axis spacing is done and the the param that dictates how the cross axis spacing is done. It took me some time to put this together since I haven’t seen that name separation in other UI frameworks.
The Arrangement “class” (I put class between quotes because it’s a singleton object, which in Kotlin is declared with the object keyword) is used to control the spacing of children in the main axis, so you will find in Column a verticalArrangement param and in Row a horizontalArrangement param.
The Alignment “class” is used to control spacing of children in the cross axis, so you will find in Column a horizontalAlignment param and in Row a verticalAlignment param.
It’s possible to write your own implementation of vertical and horizontal arrangement, but the library comes with a few default format that cover most of the uses:
- Arrangement.Start: places items in the main axis start.
- Arrangement.End: places items in the main axis end.
- Arrangement.Center: places items in the main axis center.
- Arrangement.SpaceBetween: places first item in the main axis start and the last item in the main axis end, then distribute the remaining items evenly in the space left.
- Arrangement.SpaceAround: puts the same amount of space in the left and the right of each item (in a Row, or top and bottom in a Column). Notice that spaces in the middle will be twice as large as spaces in the ends.
- Arrangement.SpaceEvenly: puts the same amount of space between items, the start and the end. It differentiates from space around because the spacing in start and end is the same as the spacing in the middle.
It’s worth pointing that, by default, Column and Row in Jetpack Compose is just as large as its content, so using an Arrangement won’t change anything. It’s possible to make a Row or Column larger using modifiers like, Modifier.fillMaxSize() or Modifier.size().
Here we have a visual representation of the default arrangements in Jetpack Compose applied to a Row. In a Column, the logic will be the same in the main (vertical) axis.
Hope this will help you better place components in your app. I usually write in Portuguese because there is a lot more coding content in English, but this text is meant to be an answer to a question in English (link below).
