How to Use Row in Jetpack Compose for Android Layouts

In Jetpack Compose, use the Row composable to arrange child components horizontally. You can customize alignment, spacing, and size by passing parameters like horizontalArrangement and verticalAlignment inside the Row block.

Syntax

The Row composable arranges its children in a horizontal line. You can control spacing and alignment using parameters:

• modifier: to style or size the Row
• horizontalArrangement: controls spacing between children horizontally
• verticalAlignment: aligns children vertically within the Row
• Children: composables placed inside the Row block

kotlin

Row(
  modifier = Modifier.fillMaxWidth(),
  horizontalArrangement = Arrangement.SpaceBetween,
  verticalAlignment = Alignment.CenterVertically
) {
  // Child composables here
}

Output

A horizontal container filling the width, spacing children evenly, aligned vertically center.

Example

This example shows a Row with three Text elements spaced evenly and vertically centered.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun RowExample() {
  Row(
    modifier = Modifier
      .fillMaxWidth()
      .padding(16.dp),
    horizontalArrangement = Arrangement.SpaceEvenly,
    verticalAlignment = Alignment.CenterVertically
  ) {
    Text(text = "Home")
    Text(text = "Profile")
    Text(text = "Settings")
  }
}

Output

A horizontal row with three text labels "Home", "Profile", and "Settings" spaced evenly across the screen.

Common Pitfalls

Common mistakes when using Row include:

• Not setting Modifier.fillMaxWidth() when you want the Row to use full horizontal space, causing unexpected layout.
• Using Arrangement.Start without spacing, which can make children appear cramped.
• Ignoring vertical alignment, which can cause children of different heights to look misaligned.

kotlin

/* Wrong: No fillMaxWidth, children cramped to start */
Row {
  Text("One")
  Text("Two")
}

/* Right: Fill width and space evenly */
Row(
  modifier = Modifier.fillMaxWidth(),
  horizontalArrangement = Arrangement.SpaceEvenly
) {
  Text("One")
  Text("Two")
}

Output

Wrong: Texts appear close on left side. Right: Texts spaced evenly across full width.

Quick Reference

Parameter	Description	Example Values
modifier	Styling and sizing the Row	Modifier.fillMaxWidth(), Modifier.padding(8.dp)
horizontalArrangement	Controls horizontal spacing between children	Arrangement.Start, Arrangement.SpaceBetween, Arrangement.SpaceEvenly
verticalAlignment	Aligns children vertically inside the Row	Alignment.Top, Alignment.CenterVertically, Alignment.Bottom

Key Takeaways

Use Row to arrange composables horizontally in Jetpack Compose.

Set Modifier.fillMaxWidth() to make Row use full horizontal space.

Control spacing with horizontalArrangement and vertical alignment with verticalAlignment.

Without proper modifiers, children may appear cramped or misaligned.

Row is a flexible container for simple horizontal layouts in Compose.