Row in Jetpack Compose: what it is, composable properties and how it works

What is Row in Jetpack Compose

Row is a composable function that places child elements in a horizontal sequence. In the Compose layout hierarchy, Row occupies the position of a basic container alongside Column and Box.

Row does not require specifying dimensions — it automatically adjusts to its content. The width of Row equals the sum of the widths of child elements including padding, unless Modifier.fillMaxWidth or a fixed size is specified.

Child elements of Row can have their own modifiers that affect their position within the container. For example, Modifier.weight allows elements to occupy a proportional part of the available space.

According to Android Developers Blog, 2024, Row processes child elements sequentially, calculating their sizes based on Compose measurement rules: elements without weight are measured first, then the remaining space is distributed among elements with weight.

Row syntax and basic signature

The basic signature of Row includes the modifier parameter, horizontalArrangement and verticalAlignment. All child elements are passed in the final content lambda block.

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

Row properties: horizontalArrangement and verticalAlignment

The horizontalArrangement parameter determines how child elements are distributed along the horizontal axis within Row. Available values include Start, End, Center, SpaceBetween, SpaceAround and SpaceEvenly from the Arrangement class.

Arrangement.Start places elements at the beginning of the container, Arrangement.End — at the end, and Arrangement.Center — in the center. These values work similarly to the justify-content property in CSS Flexbox.

Arrangement.SpaceBetween distributes elements evenly, placing the first element at the start, the last at the end, and the rest with equal spacing between them. According to Material Design Guidelines, 2025, SpaceBetween is optimal for toolbars and navigation rows.

The verticalAlignment parameter aligns elements vertically. Available values include Alignment.Top, Alignment.CenterVertically and Alignment.Bottom. This property is useful when Row elements have different heights — for example, an icon next to multi-line text.

Arrangement values table

Space distribution with Modifier.weight

Modifier.weight is a modifier available only inside Row and Column that distributes the available space between child elements proportionally to the specified value. If one element has a weight of 1.0f and another has 2.0f, the second element will take twice as much space.

Elements without weight occupy the space needed for their content. The remaining space is distributed among elements with weight proportionally to their weight. This behavior is similar to the flex-grow property in CSS Flexbox.

According to Android Developer Documentation, 2025, weight works only inside Row, Column and BoxWithConstraints. When using weight in Row, all child elements are measured in two passes: first elements without weight, then elements with weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Left",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Right")
    }
}

Code examples with Row

The first example demonstrates Row with an icon and text — a typical scenario for a contacts list or settings. Icon and Text are wrapped in Row with verticalAlignment set to center.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Add to favorites")
    }
}

The second example shows Row with buttons and even distribution. SpaceEvenly guarantees equal spacing between all buttons and the edges of the container.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Cancel") }
        Button(onClick = {}) { Text("Save") }
    }
}

The third example — Row inside a Card for displaying a rating. A nested Row with Modifier.weight allows the rating star and numeric value to occupy fixed space.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Rating:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Row features in adaptive layout

Row requires width control in adaptive layout. If Row content exceeds the available screen width, elements may overflow the container boundaries. To prevent this, use Modifier.horizontalScroll or switch to Column.

When combining Row with Modifier.weight, it is important to set fillMaxWidth to the parent Row — otherwise weight will distribute non-existent space. According to Material Design Guidelines, 2025, Row with weight without fillMaxWidth is considered an invalid configuration.

For adaptive interfaces, it is recommended to combine Row with Box or use Arrangement.SpaceBetween for automatic element distribution across different screen sizes. This provides flexibility without media queries.

• Modifier.horizontalScroll — adds scrolling when Row overflows
• Modifier.weight — distributes space proportionally
• Arrangement.SpaceBetween — adaptive distribution with edge fixing