Welcome back.
In this video we're going to learn about arrangement and alignment.
Jetpack compose offers several options for aligning and arranging your UI elements within containers
like row, column, and box.
Understanding these options empowers you to create visually appealing and intuitively outs for your
applications.
Let's start with the arrangement.
Arrangement is used to control the spacing of children in the main axis, so you will find in column
a vertical arrangement param and in row a horizontal arrangement param.
Let's start with the row horizontal arrangement in row specifies the horizontal arrangement of items
within the row.
It can be set to start and center space between space evenly or space around you.
Use arrangements to position children relative to one another.
The possible horizontal arrangements are space between the row.
Composable places each child within an equal amount of space without calculating in spacing before the
first child or after the last child.
Space evenly similar to space between the row.
Composable places the children with with an equal amount of space, but this time it includes starting
or ending spacing space around the row, composable places children just like with space evenly, but
reduces the space between consecutive children by half.
Centre.
Start and the row.
Composable places children at the centre start or end without space between them.
This is the arrangement in row.
Now let's learn about the vertical arrangement in column.
Vertical arrangement defines how the vertical space available in the container is distributed among
its children.
So the vertical arrangement parameter specifies the vertical arrangement of items within the column.
It can be set to the top, which is default the bottom center space between space evenly or space around
the arrangement.
Top places all children together at the top of container with any remaining space at the button arrangement.
Button places all children together at the bottom of the container, with any remaining space at the
top.
Arrangements center vertically centers all the children within the container, with any remaining space
equally distributed above and below them.
Space between distributes space evenly between the children, with equal padding on the top and bottom
sides.
Now let's move to the alignment.
The alignment is used to control spacing of children in the cross axis, so you will define in a column
a horizontal alignment parameter and in row a vertical alignment parameter.
This is the row.
The vertical alignment defines the vertical alignment of items within the row.
You can use top, bottom, center, or baseline values.
Top aligns the children to the top of the parent center.
Vertically aligns the children in the center of the parent vertically.
Bottom aligns the children to the bottom of the parent.
This is in row.
Now let's see the alignment in column.
Horizontal alignment defines the horizontal alignment of items within the column.
You can use values such as start, end or center horizontally.
So this is the alignment in row and column.
And this is the arrangement in row and column.
These are very important concepts.