Rows and Columns - devrath/ComposeAlchemy GitHub Wiki

Differences Between Rows and Columns in Jetpack Compose

  • We refer to 2 main types main-axis and cross-axis
    • In the main-axis we refer to the place where we make the arrangement.
    • In the cross-axis we refer to the place where we align the items.
    • In the row-composable the horizontal-arrangement we refer to as the main axis.
    • In the column-composable the vertical-arrangement we refer to as the main axis.

Different Arrangement types

Rows Columns
Rows Illustration Columns Illustration

Using SpaceBy

  • We can use this way to add space between composables
  • This is a better alternative to adding a spacer

Code

@Composable
fun RowsSpacedByDemoScreen(modifier: Modifier = Modifier) {
    
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        Text("Space by")
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(space = 20.dp, alignment = Alignment.CenterHorizontally)
        ) {
            Box(modifier = Modifier
                .size(100.dp)
                .background(Color.Cyan))
            Box(modifier = Modifier
                .size(100.dp)
                .background(Color.Magenta))
        }

    }
}

Out-put